1.mpvue入門教程， http://mpvue.com/mpvue/quickstart.htmlcss
# 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;html
3.新增頁面，須要重寫npm run dev 進行編譯；vue
4.安裝依賴不用寫webpack配置文件，vue-cli webpack自動配置；node
5.npm安裝node-sass失敗，須要安裝淘寶鏡像，進行安裝部分依賴 ，且強烈推薦cnpm，安裝速度很快；webpack
npm install -g cnpm --registry=https://registry.npm.taobao.org
6.小程序頁面相對路徑的圖片不顯示，解決方法：須要把圖片放到static目錄下；ios
7.小程序圖片不能等比例拉伸或壓縮，處理圖片使用小程序給的image組件 設置mode有效值；git
8.vue-cli建立的項目 eslint代碼嚴查嚴格，一直會出現報錯，安裝模板能夠不安裝eslint依賴；github
9.小程序一些綁定元素 換成vue寫法，小程序提供的組件方法能夠繼續使用，換成vue語法就能夠使用；web
10.mpvue中生命週期不要用created,用了created即便你沒有打開那個頁面，也會觸發裏面的內容。用mounted來作一些頁面初始化的事情；vue-router
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就行了。
