wepy+weappx開發(fā)小程序遇到的坑以及解決方案
|
從小程序的發(fā)布，到現(xiàn)在已經(jīng)有一年多的時(shí)間了，從當(dāng)時(shí)信誓旦旦的要替代APP，到近期實(shí)現(xiàn)了APP和小程序互跳的功能，定位也悄然變?yōu)锳PP的一個(gè)補(bǔ)充，都是現(xiàn)實(shí)給逼的，就像當(dāng)時(shí)卸載了摩拜和美團(tuán)的APP，覺得只用小程序就行的同事，最后都又把APP裝了回來，為什么呢？因?yàn)樾〕绦蛑皇菍?shí)現(xiàn)了原有APP的部分功能，最后發(fā)現(xiàn)還是APP用著方便，畢竟現(xiàn)在手機(jī)內(nèi)存基本都是32g起，一個(gè)APP也占不了多少地方。 技術(shù)無止境，人生莫等閑，開啟正文。 技術(shù)棧
微信小程序官方文檔已經(jīng)很詳細(xì)了，經(jīng)過多次的更新，目前小程序已經(jīng)支持自定義組件，引入其他開發(fā)者的插件和外部的資源，還有了一套小程序的語言wxs,據(jù)官方文檔的說法在IOS上的運(yùn)行速度比JavaScript要快2~20倍，組件和API也是越來越完善。 WePY是騰訊一團(tuán)隊(duì)出的一個(gè)小程序組件化開發(fā)框架，第一次更新是在2016.11.23，比小程序的發(fā)布時(shí)間2017.1.9還早，也就是說小程序在騰訊內(nèi)測的時(shí)候，某個(gè)喜歡Vue大佬用了之后，發(fā)現(xiàn)這玩意開發(fā)起來不夠爽呀，連組件都不支持，然后這個(gè)大佬就拉了一幫人，說兄弟們咱弄個(gè)框架出來吧，讓大家能用類Vue的開發(fā)方式去開發(fā)小程序，然后你應(yīng)該懂了，如果你會Vue，上手這個(gè)那是分分鐘的事，它支持組件 Props 傳值，自定義事件、組件分布式復(fù)用Mixin、計(jì)算屬性函數(shù)computed、模板內(nèi)容分發(fā)slot等等。 weappx是一個(gè)小程序的狀態(tài)管理框架，wepy和原生小程序都可以使用， API和Dva，Vuex挺像，但是比它們兩個(gè)要簡單的多，Dva已經(jīng)把APi的數(shù)量精簡到6個(gè)，它更狠才4個(gè)API就能上手，API雖然少但作為狀態(tài)管理框架，該有的功能都是有的，開發(fā)起來還是相當(dāng)?shù)乃模敿?xì)的介紹請看文檔，相比Dva現(xiàn)在的9000多個(gè)star，weappx的50多個(gè)star顯的有點(diǎn)寒酸，如果用了之后覺得挺不錯(cuò)的童鞋，都star下，精神上支持下作者。 遇到的坑以及開發(fā)注意點(diǎn)1. repeat標(biāo)簽嵌套兩級以及以上組件傳值給自組件傳值問題
這個(gè)問題其實(shí)是wepy的一個(gè)bug，在github上已經(jīng)有好多人提過Issues，官方并沒有給出解釋，經(jīng)過自己的摸索，有兩種解決方式：
子組件中第二層循環(huán)采用此寫法，直接使用template
<template wx:key="{{index}}" wx:for="{{item.giftBoxs}}" wx:for-item="giftBoxsItem" data="{{...giftBoxsItem}}" is="indexMoItem"></template>
在主頁面中引入此模板 <import src="../../components/giftIndex/indexMoItem.wxml"/> wepy最終會把所引用的組件代碼，都打包到一個(gè)主頁面中的,所以在主頁面引入模板即可
對于第二層循環(huán)要傳的值，用repeat標(biāo)簽包裹一層
<repeat for="{{ [item] }}" key="item.orderNo" index="index" item="itemval"> <giftItem :itemval="itemval" ></giftItem> </repeat>
已經(jīng)在wepy的Issues中做了回答，并有一個(gè)老鐵點(diǎn)了贊，應(yīng)該是幫他解決了這個(gè)問題
2. 向子組件傳類似Object.key這樣的值正常傳值
// 數(shù)據(jù)
data = {
textMsg1: 'text1',
textMsg2: {
text: 'text2'
},
}
// 組件
<child :msg="textMsg1"></child>
界面展示
傳對象中的值 <child :msg="textMsg2.text"></child> 界面展示
沒有報(bào)錯(cuò)但是值也無法傳遞，這個(gè)問題也是Issues中提的比較多的,可采用下面方法解決
<repeat for="{{ [textMsg2.text] }}">
<child :msg="item"></child>
</repeat>
3. 小程序開發(fā)工具變慢在開發(fā)過程城中，隨著項(xiàng)目文件的越來越大，會發(fā)現(xiàn)小程序的開發(fā)工具越來越慢，甚至一個(gè)跳轉(zhuǎn)都要等幾秒鐘才能跳轉(zhuǎn)過去，這個(gè)時(shí)候需要把小程序打包出來的文件dist文件夾刪掉，然后重新打包，會快很多，wepy也提供了命令，直接運(yùn)行 npm run clean 也能達(dá)到同樣的效果。 4. 小程序在手機(jī)上預(yù)覽，出現(xiàn)卡頓現(xiàn)象出現(xiàn)這種情況有多方面的原因，如果你之前用過原生小程序開發(fā)過項(xiàng)目，那么直接點(diǎn)擊開發(fā)工具上的預(yù)覽按鈕，然后用手機(jī)掃碼預(yù)覽是一個(gè)常見的操作，但是在使用wepy過程中，你使用npm run dev 命令后，是出于開發(fā)環(huán)境，dist文件夾中的代碼并沒有進(jìn)行壓縮，優(yōu)化，所以手機(jī)預(yù)覽的時(shí)候會顯得很慢，運(yùn)行 npm run build打成生產(chǎn)包預(yù)覽，可以解決。 5. 數(shù)據(jù)更新了，UI視圖沒有更新這個(gè)也與開發(fā)環(huán)境和生成環(huán)境有關(guān)系，這種情況出現(xiàn)的比較少，在開發(fā)選擇地址模塊的時(shí)候，在開發(fā)工具上選擇地址后，并改變了model中的數(shù)據(jù)，但是視圖并沒有更新，這種現(xiàn)象只在開發(fā)環(huán)境中出現(xiàn)，生產(chǎn)環(huán)境一切正常。 6. 個(gè)別手機(jī)樣式錯(cuò)亂出現(xiàn)這種問題，是因?yàn)閣epy腳手架中并沒有配置樣式自動(dòng)補(bǔ)全，需要自己手動(dòng)配置，在wepy.config.js添加下面代碼即可， 插件地址
module.exports.plugins = {
'autoprefixer': {
filter: /\.wxss$/,
config: {
browsers: ['last 11 iOS versions']
}
}
}
7. 通一個(gè)頁面多次使用同一個(gè)組件數(shù)據(jù)傳遞問題同一個(gè)頁面多次使用同一個(gè)組件，要為這個(gè)組件起不同的名字，這個(gè)官方文檔有介紹， 需要注意的是，WePY中的組件都是靜態(tài)組件，是以組件ID作為唯一標(biāo)識的，每一個(gè)ID都對應(yīng)一個(gè)組件實(shí)例，當(dāng)頁面引入兩個(gè)相同ID的組件時(shí)，這兩個(gè)組件共用同一個(gè)實(shí)例與數(shù)據(jù)，當(dāng)其中一個(gè)組件數(shù)據(jù)變化時(shí)，另外一個(gè)也會一起變化。 這個(gè)與wepy的組件機(jī)制有關(guān)，
// data
data = {
textMsg1: 'text1',
textMsg3: 'text3',
textMsg2: {
text: 'text2'
},
}
// 組件
<child :msg="textMsg1"></child>
<child :msg="textMsg3"></child>
按照正常的邏輯，最終顯示結(jié)果肯定是text1和text3,但是
我們查看編譯后的代碼
<view class="containers">
<view>我是子組件</view>
傳遞來的數(shù)據(jù)：{{$child$msg}}
</view>
<view class="containers">
<view>我是子組件</view>
傳遞來的數(shù)據(jù)：{{$child$msg}}
</view>
在開發(fā)工具中的AppData中我們能看到
相信大家已經(jīng)明白了，wepy中的組件其實(shí)就是把組件中的代碼copy到引入的頁面中，組件中使用的變量，名字被改成$+組件名字+變量名字，在組件引用頁中的data其實(shí)就是一個(gè)對象，對象的屬性值，后面會覆蓋前面，頁面渲染過程，大致如下
data = {
}
// 渲染第一個(gè)組件
data.$child$msg = 'text1'
// 渲染第二個(gè)組件
data.$child$msg = 'text3'
將第二個(gè)組件注釋掉，第一個(gè)就會顯示正常 我們給組件起不同的名字后顯示就能如預(yù)期那樣渲染
// 掛載組件
components = {
child1: Child,
child2: Child
};
<child1 :msg="textMsg1"></child1>
<child2 :msg="textMsg3"></child2>
// 編譯后
<view class="containers">
<view>我是子組件</view>
傳遞來的數(shù)據(jù)：{{$child1$msg}}
</view>
<view class="containers">
<view>我是子組件</view>
傳遞來的數(shù)據(jù)：{{$child2$msg}}
</view>
我們可以看到顯示正常了，查看data也會看到
8. weappx中更改state數(shù)據(jù)報(bào)錯(cuò)在使用weappx過程中，只能在mutations中更改state中的數(shù)據(jù)，如果在其他地方更改數(shù)據(jù)就會報(bào)錯(cuò)，Uncaught (in promise) TypeError: Cannot assign to read only property 'count' of object '#'，這句話的意思是，count為只讀屬性，不能進(jìn)行設(shè)置，如果一個(gè)頁面要使用其他model中的數(shù)據(jù)，最好是深度clone一份，以免無意中修改數(shù)據(jù)，出現(xiàn)上述錯(cuò)誤 使用感受1.采用類Vue語法，對于新手比較友好，上手比較快, 但還需要學(xué)習(xí)小程序的api，框架不是很完善，有不少坑要填 2.使用狀態(tài)管理框架,集中管理邏輯代碼，實(shí)現(xiàn)不同頁面狀態(tài)的共享，提升開發(fā)效率 3.代碼結(jié)構(gòu)清晰，接口，邏輯代碼和靜態(tài)頁面分離，便于多人合作和后期的維護(hù) 4.引入庫比較多，導(dǎo)致項(xiàng)目體積過大 |
