mpvue實(shí)現(xiàn)微信小程序（歡迎踩坑）

notebin 發(fā)布于2019-08-02 11:13 / 1709人閱讀

摘要：最近剛使用完成了微信小程序的開發(fā)，寫點(diǎn)東西，做個(gè)記錄。專門用于外鏈跳轉(zhuǎn)但是外鏈跳轉(zhuǎn)還是個(gè)坑，微信僅能支持跳到在它那邊注冊(cè)過的的網(wǎng)址，其他還是不行，暫時(shí)沒有找到好的方式看了知乎，它的外鏈直接轉(zhuǎn)成了文本，不可點(diǎn)擊了。

最近剛使用mpvue完成了微信小程序的開發(fā)，寫點(diǎn)東西，做個(gè)記錄。

首先依舊是兩個(gè)傳送門：

微信小程序文檔:[https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html][1]
mpvue的官網(wǎng)鏈接:[http://mpvue.com/][2]

踩坑記錄：

真機(jī)調(diào)試的時(shí)候，小程序的本地圖片不顯示；
如：頁面路徑為：/pages/index/index.vue,圖片路徑：/static/img/1.png;最初在index.vue頁面里面圖片的src為“../../../static/img/1.png;然后發(fā)現(xiàn)在小程序的調(diào)試環(huán)境可顯示，但是在真機(jī)上不顯示；（但是放在components里面用這種方式寫的圖片沒有這個(gè)問題）

解決方式：把pages引用的圖片地址都改為"/static/",以根目錄開頭

之前設(shè)置顏色的時(shí)候，很喜歡rgba(0,0,0,.1),這樣，然后真機(jī)測試的時(shí)候，我的手機(jī)是華為mate9（ios測試過沒有問題，可能是安卓的問題）輸入的時(shí)候是空白的但是有占位，點(diǎn)了回車才能顯示，不能邊輸邊顯示；debug了半天，最后才發(fā)現(xiàn)我字體顏色設(shè)置為rgba的時(shí)候會(huì)導(dǎo)致錯(cuò)誤

解決方式：把color的rgba設(shè)置改為#設(shè)置

使用微信小程序的picker組件實(shí)現(xiàn)省-城市選擇；本來想直接用picker的城市mode的，但是這個(gè)數(shù)據(jù)要后臺(tái)返回的而且也沒有到區(qū)；picker還有一個(gè)多列選擇器，感覺傳入的數(shù)據(jù)實(shí)在是麻煩；最后用picker-view；清清爽爽；就設(shè)置兩列，分別傳入列數(shù)組就好了；這里遇到的一個(gè)坑就是，在綁定的change函數(shù)上，我無法取到當(dāng)前change的是哪一列的數(shù)據(jù)；因?yàn)檫@里要做判斷，如果是第一列的話，要替換第二列的數(shù)組內(nèi)容；

解決方式：新建變量，在change函數(shù)中賦值，在watch里面監(jiān)聽；

不管用onload還是onshow方法，小程序的data里面的值始終沒有被初始化；就比如我設(shè)置了一個(gè)狀態(tài)變量，初值為false，我在頁面操作后變?yōu)閠rue；回退再打開時(shí)，它依然是true值；這個(gè)問題不知道是不是我哪里沒有考慮到，暫時(shí)只是用了一個(gè)不是辦法的辦法解決

解決辦法：在onload方法內(nèi)重置狀態(tài)變量

底部導(dǎo)航切換的時(shí)候，onshow每次都會(huì)調(diào)用，但是onload只會(huì)調(diào)用一次；

對(duì)image來說，height：auto這個(gè)屬性是不生效的；圖片自適應(yīng)的問題搞了半天；因?yàn)槭且粋€(gè)富文本字符串，因此沒有辦法像官方文檔設(shè)置mode；最后升級(jí)了我用的轉(zhuǎn)換插件 (mpvue-wxparse)的版本；它支持富文本內(nèi)設(shè)置圖片的mode屬性。

搜索回車之前用的是@keyup.native 在小程序里面要換成@confirm

還有跳轉(zhuǎn)外鏈，小程序是有提供一個(gè)組件的,實(shí)現(xiàn)的時(shí)候，只要多帶帶做一個(gè)外鏈的頁面只包含上面這個(gè)標(biāo)簽，傳入url就可以了。這個(gè)標(biāo)簽是立即執(zhí)行的，有這個(gè)的話，就會(huì)在當(dāng)前頁面直接跳轉(zhuǎn)，所以我多帶帶把它寫成一個(gè)頁面。專門用于外鏈跳轉(zhuǎn)；但是外鏈跳轉(zhuǎn)還是個(gè)坑，微信僅能支持跳到在它那邊注冊(cè)過的https的網(wǎng)址，其他還是不行，暫時(shí)沒有找到好的方式；看了知乎，它的外鏈直接轉(zhuǎn)成了文本，不可點(diǎn)擊了。

最后的話

好了，暫時(shí)就寫到這么多啦,第一次寫小程序，雖然用了mpvue少了很多學(xué)習(xí)成本，但是轉(zhuǎn)化的時(shí)候還是遇到了挺多問題，過程中都一直在網(wǎng)上搜索解決方式啊，也會(huì)發(fā)問題問問大家；感覺收獲還挺大的；聽說wepy也挺好用的，下次開發(fā)小程序的時(shí)候，可以看看試著用用。