前言：
在實(shí)際開發(fā)過程中，尤其是小程序的開發(fā)，我們常常會遇到一些在文檔中解決不了的問題，在這里，我就淺談一下我遇到的一些問題
1.小程序的構(gòu)建框架是uni-app，卻突然被要求用原生的微信小程序代碼來開發(fā)，到最后要整合到uni-app里面
這個整合問題，uni-app官網(wǎng)就有解決方式，這里就不多說，直接上鏈接
https://uniapp.dcloud.net.cn/tutorial/miniprogram-subject.html
2.整合之后，就輪到傳參問題了，本著能省事與提高開發(fā)效率，于后期方便維護(hù)整改，在這里，我是直接要傳到微信原生組件的數(shù)據(jù)直接丟在集合里面，在微信組件那邊直接從集合里面拿我們要傳過去的數(shù)據(jù)
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頁面就把我們想要傳給微信原生組件的數(shù)據(jù)給傳遞過去了
3.為了后期的維護(hù)方便，我們都會寫一個公用的api.js文件，這個文件里面存儲的是接口的地址，為了后期維護(hù)便利，本人采用的是將所有的請求都寫在引用組件的父頁面下，而不在組件里面調(diào)用請求。
但是，在這里我們要注意，由于是混合開發(fā)，uni-app里面的一些js寫法與微信組件原生的寫法不一樣?。?！，所以在各自的文檔中并沒有提及在整合其他組件時，組件調(diào)用頁面的函數(shù)，經(jīng)過本人踩坑，去網(wǎng)上收集資料，弄出一個可行的方式
廢話不多說，上示例
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
},
/**
* 組件的初始數(shù)據(jù)
*/
data: {},
/**
* 組件的方法列表
*/
methods: {
//組件頁面上的點(diǎn)擊事件
btngoToOtherPage: function(e){
this.triggerEvent("brool",data)
},
}
})
這樣，我們就能在uni-app里面建一個專門存放api的文件夾，便于后期維護(hù)
關(guān)于uni-app引用微信組件導(dǎo)致的樣式變形，可以在網(wǎng)上搜尋 微信組件樣式穿透? ，結(jié)合微信官方給出的文檔中的 樣式隔離 ，就可以解決文章來源：http://www.zghlxwxcb.cn/news/detail-454723.html
以上，就是本人分享的一些開發(fā)經(jīng)驗(yàn)，希望能幫助到各位遇到和我一樣難題卻找不到解決思路的人文章來源地址http://www.zghlxwxcb.cn/news/detail-454723.html
到了這里，關(guān)于關(guān)于微信小程序原生組件與uniApp混合開發(fā)過程遇到的問題與解決方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
