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

2024-10-17 来源：个人技术集锦

前言：

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

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

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

显示全文

全部栏目

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