mpvue微信小程序項目踩坑記錄

1.mpvue入門教程， http://mpvue.com/mpvue/quickstart.html

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由於眾所周知的原因，可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 一般是要 sudo 權限的
$ npm install --global vue-cli@2.9

# 4. 創建一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

 

2.mpvue不支持ElementUI，不支持vue-router;

3.新增頁面，需要重寫npm run dev 進行編譯；

4.安裝依賴不用寫webpack配置文件，vue-cli webpack自動配置；

5.npm安裝node-sass失敗，需要安裝淘寶鏡像，進行安裝部分依賴  ，且強烈推薦cnpm，安裝速度很快；

npm install -g cnpm --registry=https://registry.npm.taobao.org

6.小程序頁面相對路徑的圖片不顯示，解決方法：需要把圖片放到static目錄下；

7.小程序圖片不能等比例拉伸或壓縮，處理圖片使用小程序給的image組件 設置mode有效值；

8.vue-cli創建的項目  eslint代碼嚴查嚴格，一直會出現報錯，安裝模板可以不安裝eslint依賴；

9.小程序一些綁定元素 換成vue寫法，小程序提供的組件方法可以繼續使用，換成vue語法就可以使用；

10.mpvue中生命周期不要用created,用了created即使你沒有打開那個頁面，也會觸發里面的內容。用mounted來做一些頁面初始化的事情；

11.利用a標簽跳轉傳參，參數被編譯成字符串。需要加點 擊事件，使用 wx.navigateTo({ url })；

12.mian.js全局引用scss不生效，語法報錯，需要單文件引入。但是css可以在main.js中全局引用；

13.后台給的接口數據是富文本（html）內容，但.微信小程序不顯示html格式的內容；

　　嘗試解決方案1：百度解決的方法是使用wxParse，然而對mpvue不能更好的支持；

　　嘗試解決方案1：使用v-html，但官網提出不支持v-html，直接被編譯成rich-text；但是微信提供的rich-text組件，不能修改內部標簽樣式 ，圖片超出很大，直接可以橫向滑動，必須要處理所以此方法不可行；

　　最終解決方案：

　　使用mpvue-wxparse

　　1.裝依賴

cnpm install mpvue-wxparse -D

　　2.在需要用到的頁面引用，然后添加 wxParse組件；

 import wxParse from "mpvue-wxparse";

components: {

wxParse

},

　3.語法使用

<wxParse :content="content" />

demo　

<template>
　　<div>
　　　　<wxParse :content="content" />
　　</div>
</template>

<script>
import wxParse from "mpvue-wxparse";

export default {
　　components: {
　　　　wxParse
　　},
　　data() {
　　　　return {
　　　　content:
　　　　　　'<div>測試代碼</div><img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo_top_ca79a146.png" alt="">'
　　　　　　};
　　}
};
//
</script>

14.vue轉小程序編譯渲染會轉成wxml,wxml不支持過濾器，所以這部分功能不能使用；

15.template 中無法支持復雜的 JavaScript 表達式。 可支持三目運算和簡單的v-if，v-else；

16.遇到過微信小程序wx.navigateTo不起作用的原因：

　　1.app.json里tabBar里面的list使用的pagePath跟wx.navigateTo路徑一樣的話不起作用，實現不了跳轉。

　　2.可以使用wx.switchTab和和wx.redirectTo來代替，但是有一定的不同；

　　3.wx.switchTab是唯一能跳轉到 tabBar 頁面，而wx.switchTab卻只能設置tabBar相同的路徑

　　4.wx.redirectTo關閉當前頁面,用wx.navigateTo時,能用wx.navigateBack ；

　　5.wx.navigateTo能跳轉下一頁面還能有返回上一頁面的功能；

17.在vue2.0中出現了數據緩存問題，頁面只顯示之前加載的時候調用數據，如果返回到列表再進入詳情那么頁面是不會重新渲染頁面，data初始化的數據不會重新讀取，只會緩存之前的賦值。我最后只能用v-if做判斷來解決的。因為不是路由跳轉，所以沒有辦法在路由做文章。

18.每次進入商品詳情，新加載的數據完成之前會先顯示上次緩存的數據內容，解決方法，加loading，數據加載完成之后，去掉覆蓋頁面的loading，用戶就不會看到數據的明顯切換；

19.小程序button默認邊框無法去除，解決方法；

button::after{

border: none;

}

20.wx.request不支持PATCH請求,官方說目前也不打算支持。。。

21.wx.chooseAddress 獲取位置成功后，賦值無效，原因是this指向問題。　

var that = this;
wx.chooseAddress({
　　success: function(res) {
　　that.chooseAdd = false;
　　that.addressList = res;
　　}
});

22.ios端catchtouchmove事件，上下滑動會穿透到page跟着一起動.如果使用禁止滑動（catchtouchmove='true' ），則整個頁面滑動失效，投機取巧處理了下；

　　解決方法：微信小程序--滾動視圖容器

23.mpvue組件樣式不生效；搞了半天發現問題：一個頁面調用這個組件沒問題，但兩個和兩個以上頁面調用這個組件，這個組件的樣式將會失效。解決方法參考：https://github.com/Meituan-Dianping/mpvue/issues/7

修改webpack 配置 webpack.*.conf.js 中文件，把 || count >= 2刪除即可；

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf('node_modules') >= 0
        ) || count >= 2
      }
    }),

 

為

new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf('node_modules') >= 0
        )
      }
    }),

 

25.git下載代碼mpvue項目，npm run dev之后找不到app.json入口文件。修改package.json文件，把"mpvue-loader": "^1.0.13",里面的‘^’去掉，然后重新裝依賴，再npm run dev就好了。