mpvue實現微信小程序（歡迎踩坑）

jas0n 發布于2019-08-29 16:21 / 2964人閱讀

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

最近剛使用mpvue完成了微信小程序的開發，寫點東西，做個記錄。

首先依舊是兩個傳送門：

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

踩坑記錄：

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

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

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

解決方式：把color的rgba設置改為#設置

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

解決方式：新建變量，在change函數中賦值，在watch里面監聽；

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

解決辦法：在onload方法內重置狀態變量

底部導航切換的時候，onshow每次都會調用，但是onload只會調用一次；

對image來說，height：auto這個屬性是不生效的；圖片自適應的問題搞了半天；因為是一個富文本字符串，因此沒有辦法像官方文檔設置mode；最后升級了我用的轉換插件 (mpvue-wxparse)的版本；它支持富文本內設置圖片的mode屬性。

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

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

最后的話

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

云服務器 GPU云服務器微信小程序技術實現微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/113686.html

mpvue實現微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發，寫點東西，做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑，微信僅能支持跳到在它那邊注冊過的的網址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

xuexiangjys 2019-08-23 10:56 評論0 收藏0
mpvue實現微信小程序（歡迎踩坑）

摘要：最近剛使用完成了微信小程序的開發，寫點東西，做個記錄。專門用于外鏈跳轉但是外鏈跳轉還是個坑，微信僅能支持跳到在它那邊注冊過的的網址，其他還是不行，暫時沒有找到好的方式看了知乎，它的外鏈直接轉成了文本，不可點擊了。最近剛使用mpvue完成了微信小程序的開發，寫點東西，做個記錄。首先依舊是兩個傳送門：微信小程序文檔:[https://developers.weixin.qq.com/...

notebin 2019-08-02 11:13 評論0 收藏0
微信小程序scroll-view橫向滾動的實踐踩坑及隱藏其滾動條的實現

摘要：此時正確姿勢如下變成這樣子不讓它換行到這里，就基本如我所愿了，大概長這樣二隱藏滾動條在網上搜了很多，都是說加上這段代碼就可以隱藏滾動條或者有的人說這樣子隱藏滾動條然而兩種方法我都試過，的滾動條依然存在。。一、實踐踩坑項目使用mpvue開發 1. scroll-view默認是不滾動的。。所以要先設置scroll-x=true或者scroll-y=true showImg(https...

wemall 2019-08-26 13:37 評論0 收藏0
在小程序/mpvue中使用flyio發起網絡請求

摘要：上一篇文章介紹了在快應用中使用，本文主要介紹一下如何在微信小程序中使用。下面我們看看在微信小程序中和中如何使用微信小程序微信小程序采用開發技術棧，使用語言開發，但是運行時和瀏覽器又有所不同，導致等庫無法在微信小程序中使用，而可以。 Fly.js 一個基于Promise的、強大的、支持多種JavaScript運行時的http請求庫. 有了它，您可以使用一份http請求代碼在瀏覽器、微信...

mumumu 2019-08-22 15:49 評論0 收藏0
微信小程序mpvue框架總結

摘要：原理架構作為與之間相互通信的橋梁部分在環境中注入的實現代碼，包含了協議的拼裝發送參數池回調池等一些基礎功能。部分在客戶端中的功能映射代碼，實現了攔截與解析環境信息的注入通用功能映射等功能。原理架構 JSBridge 作為native 與 JS 之間相互通信的橋梁JS部分(bridge): 在JS環境中注入 bridge 的實現代碼，包含了協議的拼裝/發送/參數池/回調池等一些基礎功能...

microelec 2019-08-23 18:32 評論0 收藏0