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

前言:

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

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

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

热门相关:仙城纪