公司開(kāi)發(fā)一個(gè)新的微信小程序項(xiàng)目，技術(shù)方面沒(méi)有要求。選擇的時(shí)候主要就是從 wepy 和 mpvue ，綜合各自的特點(diǎn)之后選擇了 mpvue 。日常用的就是 Vue 敲代碼比較習(xí)慣，同時(shí)可以使用 Vuex 還是很方便的。這張圖還是比較明顯的把各自的特點(diǎn)列出來(lái)了。如果想知道具體的就看看各自的文檔，每個(gè)人的喜好都不同。
補(bǔ)充： wepy 是可以使用 redux 的，相關(guān)https://juejin.im/post/5b067f6ff265da0de02f3887
常見(jiàn)問(wèn)題先去倉(cāng)庫(kù)看看：https://github.com/Meituan-Dianping/mpvue/issues
組件庫(kù)：https://github.com/mpvue/awesome-mpvue
坑~
1、 class 和 style 綁定的問(wèn)題：按正常的習(xí)慣 ‘:’ 左側(cè)為布爾值，但是 mpvue 中是反過(guò)來(lái)的。(這應(yīng)該是我踩的最氣的坑，所以開(kāi)發(fā)之前要好好看看文檔)
<div :class="{ myCradsListUp: listShow }">
2、background-image 圖片引用的問(wèn)題：設(shè)置比較小的圖片是沒(méi)有影響的，但是比較大的圖片就會(huì)發(fā)現(xiàn)沒(méi)有效果。原因~
在 webpack.base.conf.js 中 url-loader 的相關(guān)設(shè)置對(duì)圖片大小有限制。可以取消這個(gè)限制，同時(shí)使用絕對(duì)路徑訪問(wèn)就會(huì)避免這個(gè)問(wèn)題了。一般其實(shí)是放在 src/assets 目錄下，然后通過(guò) ~@/assets/xxx 這樣引用的。
Ps：因?yàn)樾〕绦驅(qū)Υ笮∮邢拗?多個(gè)包最大4M，單個(gè)2M)，所以盡量不要使用本地圖片。
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 100,
name: utils.assetsPath('img/[name].[ext]')
}
},
3、bind style 后設(shè)置 backgroundImage 的 url ：最后以這種方式實(shí)現(xiàn)了效果，但是會(huì)報(bào)錯(cuò)...
<div :style="{backgroundImage: 'url(' + pictures.background + ')'}">
<div :style="{backgroundImage: `url(${pictures.exampleCard})`}"></div>
4、小程序事件綁定的寫(xiě)法：錯(cuò)把 bindgetuserinfo 當(dāng)成了一個(gè)屬性...設(shè)置了半天都不好用，哈哈哈~
<button open-type="getUserInfo" bindgetuserinfo="getInfo">點(diǎn)擊登錄</button> // 小程序
<button open-type="getUserInfo" @getuserinfo="getInfo">點(diǎn)擊登錄</button> // mpvue
5、獲取表單 formId ：獲取事件 event 對(duì)象的值時(shí)，在 event 后加一個(gè) mp。
<form @submit="formSubmit" report-submit>
<button plain class="idBtn" form-type="submit" data-type="click"></button>
</form>
formSubmit (e) {
let formId = e.mp.detail.formId // mpvue
let formId = e.detail.formId // 小程序
}
6、獲取頁(yè)面跳轉(zhuǎn)鏈接拼接的 query 時(shí)，mpvue 進(jìn)行了優(yōu)化，通過(guò) this.$root.$mp.query 來(lái)獲取。
7、在實(shí)現(xiàn)雙向數(shù)據(jù)綁定的時(shí)候盡量使用 v-model.lazy ，以優(yōu)化性能減去出現(xiàn) bug 的可能性。
<input type="text" v-model.lazy:value="englishName" placeholder="請(qǐng)輸入">
8、頁(yè)面的刷新問(wèn)題：因?yàn)樾〕绦蚴菦](méi)辦法 window.reload 的所以在 onLoad 或者 onShow 的時(shí)候去調(diào)用數(shù)據(jù)接口就可以了。
常見(jiàn)問(wèn)題：
創(chuàng)建完成后引入 not find ，樣式修改不生效啊~~~ bulabula...的問(wèn)題。統(tǒng)一姿勢(shì)~刪除 dist 重新 start。
還有一個(gè)比較 low 的問(wèn)題，因?yàn)樾〕绦驅(qū)?xiàng)目大小的限制。所以我毫不猶豫去看小程序分包和 webpack 優(yōu)化等等~ 但是實(shí)際上你再上傳前 build 一下就會(huì)小很多。這個(gè)問(wèn)題。。。貌似身邊好多小伙伴都忘記了....哈哈哈
