第一個mpvue小程序開發總結

前言

提及小程序，其實在去年我都還只試着照着官方文檔寫過demo的，不過如今這家公司小程序作得比較多，我來以後也參與了幾個小程序的開發了，最開始那幾個是用的wepy，最近一個開始轉用mpvue開發，最近這個項目終於上線了，我也來試着總結回顧一波吧。

關於框架的選擇

我剛來如今的公司時，我就瞭解過有一個小程序框架叫mpvue被美團開源了，有過一個大體的瞭解。來了公司以後瞭解到咱們公司已經有了一套本身的小程序技術棧那就是基於wepy的，而不是原生小程序，畢竟咱們要開發的小程序不是簡單的幾個頁面，並且原生小程序是不支持引入npm包的，原生語法開發的也相對慢一些。咱們前端團隊以前選擇的wepy框架，這是一款騰訊出的小程序框架，類vue的語法，支持引入npm包，比較好地支持組件化開發，這是咱們團隊開發所必須的。

後來之因此要在最近一個項目中從新選型使用mpvue是由於，在使用wepy的過程當中愈來愈以爲wepy像vue但又不如vue那麼好用，並且咱們項目一開始就是有計劃作H5頁面的，mpvue可以最大程度地支持咱們代碼的複用，並且大致上來講，mpvue可以提供全套的vue環境，包含數據管理vuex，這個跟咱們其餘用vue全家桶開發項目的切換時無縫的。套用一張網上比較原生、mpvue、wepy和taro的對比圖吧（tarp暫時還沒使用過，不評價）

項目的搭建

咱們項目的基本結構是經過vue-cli生成的：

$ vue init mpvue/mpvue-quickstart my-project

而後就是常規的安裝依賴和啓動了，具體使用看文檔。不過在開發過程當中爲了提升團隊的效率以及最大程度上作到和原有的H5項目的一致從而作到最大程度地複用，咱們仍是改造了部分mpvue-quickstart 模板：

• 爲了集中式頁面配置和新增頁面熱更新，webpack打包的入口文件使用mpvue-entry作統一處理
• 爲了和H5項目有儘量一致的路由體驗，引入了mpvue-router-patch
• 官方模版默認是沒有安裝預處理器相關的依賴的，咱們項目中用的sass，須要安裝node-sass、sass-loader兩個依賴
• 數據請求這塊咱們使用的是fly.js，也叫flyio，並基於這個作了一些統一的封裝，具體用法能夠查閱前面提供的文檔。之因此選擇flyio，是由於它輕量且支持多種JavaScript，這樣咱們能夠在不一樣項目中最大程度地複用請求代碼。具體的封裝代碼下次專門用篇文章展開。
• 關於登陸和受權
  
  上面這張圖是官方文檔給出的一個完整流程，大致上來講就是先前端先經過用於受權獲取code而後發送給咱們本身的服務器，服務器經過登陸憑證接口去微信接口服務器換取咱們所須要的session_key和openid，以後咱們與本身服務器之間的數據交互就只要驗這個身份惟一標示就能夠了。不過新版小程序更新以後用戶登陸權限須要手動觸發了，這個須要注意。

還有一些改造的部分忘記了，先想到這些吧，完整的項目結構能夠看我本身從新搭建的一個小項目https://github.com/wanCheng7/mpvue-components，這個項目的解構我基本上是按公司那個項目搭建的，準備放一些經常使用的組件，後續會逐步完善更新，歡迎帶啊支持。

遇到的一些坑

一、關於分享功能

普通的頁面分享給好友能夠直接調用子弟你分享按鈕

<butto n open-type='share'>分享</butto>

因爲目前微信是不支持直接分享朋友圈的，因此要想分享朋友圈就只能曲線救國，那就是引導用戶將要分享的圖片保存到相冊再分享這張圖片。還有一種常見的場景就是分享咱們帶有小程序碼的自定義圖片給朋友或者朋友圈時能夠先將這張圖片用canvas繪製好，而後預覽出來，預覽出來以後用戶是直接給朋友掃仍是保存到手機裏那就是用戶的選擇了。

二、關於頁面數據緩存問題

由於mpvue中，小程序的生命週期鉤子和vue的聲明週期鉤子是能夠同時存在的，雖然官方不建議咱們同時用，可是由於小程序一個頁面的page在切換頁面的過程當中是不會銷燬的，因此頁面上的數據會被緩存起來，也就是說咱們改變了A頁面上的某些值，去到B頁面以後再返回A頁面的那些值仍是改過以後的。這是咱們想看到的嗎？看業務狀況，若是不是的話能夠在onShow這個生命週期鉤子裏初始化那些變量。

三、關於樣式適配問題

我印象比較深入的一個問題是，若是不對頁面最外層的盒子設置高度讓裏面的內容撐開盒子的話，在IOS系統下對底部設置margin和padding都是無效的，必定要設置一個min-height，而安卓沒有這個問題。還有一些適配問題一時想不起來了。

總結

作完一個項目，真正到了總結時才發現有些問題沒有及時總結，等作完項目以後可能都記憶模糊了，因此不管再忙，仍是得及時總結才能記錄下那些get到的知識點。

還有，就是想到那句話：能說到別人懂纔是真的懂，發現本身在總結的過程當中有些知識點當時查了資料彷佛是懂了，可真正總結出來講給別人看時就有點說不上來了，說明仍是理解得不夠深刻。因此，之後的文章不在於長而在於精，首先必定要堅持寫同時每次儘可能把一個小的知識點寫得稍微深刻一點點，加油！

參考文章

• mpvue-docs
• 小程序開發框架技術分析選型
• 第一個mpvue小程序開發完了，來總結下吧
• 理解mpvue的生命週期