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

这篇具有很好参考价值的文章主要介绍了关于微信小程序原生组件与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引用微信组件导致的样式变形，可以在网上搜寻微信组件样式穿透，结合微信官方给出的文档中的样式隔离，就可以解决

以上，就是本人分享的一些开发经验，希望能帮助到各位遇到和我一样难题却找不到解决思路的人文章来源地址https://www.toymoban.com/news/detail-454723.html

到了这里，关于关于微信小程序原生组件与uniApp混合开发过程遇到的问题与解决方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！