关于微信小程序原生组件与uniApp混合开发过程遇到的问题与解决方式

Posted 2023-05-22 言午子虚

前言：

　　在实际开发过程中，尤其是小程序的开发，我们常常会遇到一些在文档中解决不了的问题，在这里，我就浅谈一下我遇到的一些问题

1.小程序的构建框架是uni-app，却突然被要求用原生的微信小程序代码来开发，到最后要整合到uni-app里面

这个整合问题，uni-app官网就有解决方式，这里就不多说，直接上链接

https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html

2.整合之后，就轮到传参问题了，本着能省事与提高开发效率，于后期方便维护整改，在这里，我是直接要传到微信原生组件的数据直接丢在集合里面，在微信组件那边直接从集合里面拿我们要传过去的数据

uni-app页面

<template>
　　<view class="foot-box">
   　　<view-xxx :xxxList="datalist"/>
　　</view>

</template>
<script>
　　export default 
　　　　data() 
　　　　　　return 
　　　　　　　　xxxList:
　　　　　　　　　　\'name\': \'张三\'，
　　　　　　　　　　\'age\': 16
　　　　　　　　

　　　　　　
　　　　
　　
</script>

微信组件

  Component(
　　/**
   * 组件的属性列表
   */
  properties: 
    xxxList: Object
  ,
　attached: function () 
　　　console.log(this.properties.xxxList)

　,
　data：,
　methods:

）

这样，我们在uni-app的vue页面就把我们想要传给微信原生组件的数据给传递过去了

3.为了后期的维护方便，我们都会写一个公用的api.js文件，这个文件里面存储的是接口的地址，为了后期维护便利，本人采用的是将所有的请求都写在引用组件的父页面下，而不在组件里面调用请求。

但是，在这里我们要注意，由于是混合开发，uni-app里面的一些js写法与微信组件原生的写法不一样！！！，所以在各自的文档中并没有提及在整合其他组件时，组件调用页面的函数，经过本人踩坑，去网上收集资料，弄出一个可行的方式

废话不多说，上示例

uniapp页面

<template>
　　<view class="foot-box">
   　　<view-xxx :xxxList="datalist"  v-on:brool = "getfunction" />
　　</view>
</template>
<script>
　　export default 
　　　　data() 
　　　　　　return 
　　　　　　　　xxxList:
　　　　　　　　　　\'name\': \'张三\'，
　　　　　　　　　　\'age\': 16
　　　　　　　　
　　　　　　
　　　　，
            methods：
                getfunction（）
                     console.log(11111)
                     
            
　　
</script>                                                                                            

微信组件js页面

  /**
   * 组件的属性列表
   */
  properties: 
    xxxList: Object
  ,

  /**
   * 组件的初始数据
   */
  data: ,
  /**
   * 组件的方法列表
   */
  methods: 
　　//组件页面上的点击事件
    btngoToOtherPage: function(e)
        this.triggerEvent("brool",data)
    ,

  
 
)

这样，我们就能在uni-app里面建一个专门存放api的文件夹，便于后期维护

关于uni-app引用微信组件导致的样式变形，可以在网上搜寻 微信组件样式穿透  ，结合微信官方给出的文档中的 样式隔离 ，就可以解决

以上，就是本人分享的一些开发经验，希望能帮助到各位遇到和我一样难题却找不到解决思路的人

uni-app 引用 微信小程序原生自定义组件

参考技术A 参考官方文档： https://uniapp.dcloud.io/frame?id=小程序自定义组件支持