關於微信小程式原生組件與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引用微信組件導致的樣式變形，可以在網上搜尋 微信組件樣式穿透  ，結合微信官方給出的文檔中的 樣式隔離 ，就可以解決

以上，就是本人分享的一些開發經驗，希望能幫助到各位遇到和我一樣難題卻找不到解決思路的人