mpvue+vant踩坑筆記和完成template模板

這段時間boss要我寫一個小程序，因爲公司的前端技術棧爲Vue，因此我堅決果斷就選擇了mpvue來減小學習成本，UI框架則是選擇了有讚的Vant。在此記錄下這次踩坑的心得，以及順帶寫了一個vue的模板😍，方便下次開發小程序的時候不用再去折騰環境以及webpack的一些配置。後面會送上GitHub地址 😏

此文檔假定你已經瞭解vue、webpack以及node和npm一些基礎知識

快速瞭解小程序

• 小程序官方文檔

• 小程序開發工具

• mpvue介紹

• Vant框架

---

小程序沒有單頁面應用的一些特性，mpvue以及一些插件只是封裝。開發小程序最重要是開發的項目要儘可能簡單，能兩個頁面就完成的儘可能不要開發多頁面，功能儘可能簡潔，突出重要功能。並且也能加快微信官方的審覈速度。

---

安裝環境（直接拉取GitHub上的模板，不用再去折騰，請先安裝vue-cli）

vue init Mercer-Lee/mpvue-template 你的項目名字

• 若是沒有什麼特殊配置，一路無腦回車就行，而後依次執行命令

• 打開微信開發者工具，以下圖操做，本地預覽項目，能正常顯示沒有報錯就是跑通環境了，可使用vscode等工具編寫代碼，微信開發者工具做爲預覽和調試的工具，改動都是熱更新的

• 把vant文件下載（就在這個項目這裏，自行下載）放到安裝的dist文件夾目錄下，這樣才能使用

• src下文件存放路徑說明：

• Vuex和各類封裝的工具函數要想使用以下：

  import store from './vuex'
  import MpvueRouterPatch from 'mpvue-router-patch'
  import httpLint from './utils/httpLint'
  import request from './utils/request'
  
  Vue.prototype.$httpLint = httpLint
  Vue.prototype.$store = store
  Vue.use(MpvueRouterPatch)
  Vue.prototype.$request = request
  複製代碼

• 路由配置詳解：

mpvue的一些注意事項：

• 生命週期鉤子:

  你進入項目的時候全部頁面的created鉤子都會觸發，並且頁面跳轉的時候不會再觸發， 全部用小程序自帶的onload()代替。好比要接收路由跳轉時的帶過來的keyword參數，例子以下：

mounted：你若是從頁面B返回頁面A，頁面A的mounted鉤子不會觸發，由於頁面沒有 從新加載（mpvue並無真正的組件掛載的完整生命週期）。因此請用小程序的onShow代替

最坑的是不要用v-show這個指令來指定渲染元素， 不然沒法完全隱藏掉元素，請用v-if代替，不用太在乎v-if重複渲染帶來的性能問題

由於是熱更新，因此每次更改配置文件或者eslint檢測到代碼不規範，就不會執行熱更新，這時候去控制檯檢查下錯誤就行， 是配置文件更改了須要從新執行npm run dev

Vant的一些注意事項：

不少組件中諸如bind:search要改成@search，以及例如搜索組件中的input的 alue沒法實現數據雙向綁定，獲取值的方法以下：

---

小程序的注意事項：

一、小程序中的圖片資源若是前綴沒有http或者https是沒法顯示圖片的，不過在本地的微信開發者工具能夠預覽到，因此請檢驗服務器的圖片資源，好比寫個httpLint.js

二、就算是在mpvue框架上咱們能寫瀏覽器的標準標籤，可是咱們沒法操做dom。

三、不建議使用小程序的scroll-view來作視圖滾動到底部觸發的請求加載，建議使用onReachBottom( )來監聽。好比我要在視圖滾動到底部時發送一個請求，例子以下：

四、提交審覈的時候請先看關注下當時微信官方審覈的一些規則和注意事項以及提醒，通常1——3天就會有審覈結果。

這次也算是一個小踩坑，可是小程序的開發整體給人的開發體驗仍是很是很差的🤷，並且不少緣由也是利益相關🤔，畢竟這個最後仍是依賴於微信平臺😅，對了，最後發下這個模板的 GitHub地址😘。