前言：
在實際開發程序中，尤其是小程式的開發，我們常常會遇到一些在檔案中解決不了的問題，在這里，我就淺談一下我遇到的一些問題
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.uj5u.com/yidong/553149.html
標籤：其他
下一篇：返回列表