CSDN

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

2023-05-22 14:52 由 言午子虚 发表于 #移动端开发

前言：

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

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引用微信组件导致的样式变形，可以在网上搜寻 微信组件样式穿透  ，结合微信官方给出的文档中的 样式隔离 ，就可以解决

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

热门相关：仙城纪   横行霸道   学霸女神超给力   学霸女神超给力   名门天后：重生国民千金