前言

說起小程序，其實在去年我都還只試著照著官方文檔寫過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，這個項目的解構我基本上是按公司那個項目搭建的，準備放一些常用的組件，後續會逐步完善更新，歡迎帶啊支持。

遇到的一些坑

1、關於分享功能

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

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

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

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

因為mpvue中，小程序的生命周期鉤子和vue的聲明周期鉤子是可以同時存在的，雖然官方不建議我們同時用，但是因為小程序一個頁面的page在切換頁面的過程中是不會銷毀的，所以頁面上的數據會被緩存起來，也就是說我們改變了A頁面上的某些值，去到B頁面之後再返回A頁面的那些值還是改過之後的。這是我們想看到的嗎？看業務情況，如果不是的話可以在onShow這個生命周期鉤子裏初始化那些變量。

3、關於樣式適配問題

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

總結

做完一個項目，真正到了總結時才發現有些問題沒有及時總結，等做完項目之後可能都記憶模糊了，所以無論再忙，還是得及時總結才能記錄下那些get到的知識點。

還有，就是想到那句話：能說到別人懂才是真的懂，發現自己在總結的過程中有些知識點當時查了資料似乎是懂了，可真正總結出來說給別人看時就有點說不上來了，說明還是理解得不夠深入。所以，以後的文章不在於長而在於精，首先一定要堅持寫同時每次盡量把一個小的知識點寫得稍微深入一點點，加油！

參考文章

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

第一個mpvue小程序開發總結