最新在做一個小程式專案，框架使用的是：mpvue + Vant Weapp；其餘還用的技術棧：vue.js、微信小程式、網路庫flyio等。

mpvue是美團開源的微信小程式框架，由於無限接近vue開發而受到大量關注；

Vant Weapp UI庫是輕量、可靠的小程式 UI 元件庫，是 有贊團隊 開源的一套基於 Vue 2.0 的 Mobile 元件庫；

一、總結一些遇到的問題

1. 小程式在網路請求上只支援  HTTPS 請求；在開發時可以勾選 “不校驗合法域名、web-view（業務域名）、TLS 版本以及 HTTPS 證書” 選項從而使用http；但是在釋出版或者體驗版不可以（體驗版可以開啟除錯模式從而使用http）

2. 小程式官方的單位是 rpx

一般以iphone6作為開發標準！在某一些動態寬高在不同機型上會出現不同樣式的情況下，可以使用 rpx 來開發（不會有轉換的過程，所以顯示出來的效果將比 px 更統一）

3. 微信的一些常見操作度可以在 API 裡面找到（mpvue和vue的開發方式及其相同），使用只需要關注一些微信相關的操作即可

4. 在mpvue的框架下，也是支援小程式原生的元件的，我比較常用的是：swiper（輪播）、rich-text（富文字）、picker（選擇時間/日期、地址）、web-view等（詳情參考小程式開發文件的元件模組）

5. 在mpvue的框架下，元件不僅有vue的生命週期（常用）還有小程式的生命週期回撥函式（onLoad、onShow、onHide這些生命週期函式都是比較好用的）

6. 小程式的下拉重新整理、上拉載入的實現

• 在main.json中開啟下拉重新整理、觸發上拉載入事件的距離

• 頁面中配置onPullDownRefresh() ==>> 使用者下拉重新整理事件、onReachBottom() ==>> 上拉觸底事件（和methods同級）

7. 小程式的路由調轉（vue-router不相容小程式）

小程式原生調轉方式：

• wx.navigateTo：跳轉到某個頁面。會產生一個新的頁面
• wx.redirectTo：重定向到某個頁面。替換掉當前頁面
• wx.switchTab：切換tab頁
• wx.reLaunch：重新啟動。清空之前的所有頁面

注意：在小程式中有層級的限制，只能開啟十個頁面，因此要合理利用跳轉的方式。

在小程式中可以使用原生提供的跳轉API；但是如果你更喜歡型別 vue-router 的方式，可以使用 mpvue-router-patch 這個庫。

8. 網路請求

網路請求是一個程式的主要部分，在pc端常用的有ajax、axios；在react native上官方推薦的是 fecth（當然用axios等其它庫也是可以的）；其中，axios 是比較常用比起好用的。

但是：axios不相容小程式，所以選用了 flyio ；flyio 相容Node.js 、微信小程式 、Weex 、React Native 、Quick App 和瀏覽器。

二、以下記錄一下采坑過程，主要是一些佈局上的問題：

1. 背景圖片使用本地檔案時無效

在微信開發者工具中檢視Element結果：

經測試，使用 網路圖片 是可以的！！！

2. 塊級（div、p）內只顯示兩行文字，超過的用省略號

display: -webkit-box; 
-webkit-line-clamp: 2;  
-webkit-box-orient: vertical; 
overflow: hidden;

3. vue中對樣式進行運算、判斷（方法：在行內使用  :style  繫結樣式，在<style></style>標籤內不行）

運算：

判斷：

4. vue中在遍歷陣列的時候，其標籤樣式使用的是item中的每一個欄位 或者 根據index計算得出。

5. 塊級標籤（div、p）內的文字不不換行（一般不會出現這種情況，除非你自己亂輸入一整串英文才會出現）

word-wrap: break-word;
word-break: break-all;
overflow: hidden;

6. Vant Weapp UI庫想要重置樣式很困難，我一個都沒成功，知道的大佬請指教的！

總結：總的來說：整個小程式的開發花了一週左右的時間（頁面不是很多哈），開發過程是比較順利的，只是作為第一次開發小程式就直接使用了mpvue，對微信小程式原生的一些API和概念並不是很清楚，需要後期繼續學習。而在使用的UI框架方面，Vant Weapp確實提供了很多不錯的元件，在一定程度上加快了開發的進度。但是不能充值樣式這一點有點不好用（可能是我沒找到方法）；而在整個小程式開發過程中，佈局其實花掉了大部分的時間！！！

最後，看一下使用mpvue框架創建出來的專案檔案目錄結構：

每一個頁面都包含三個檔案（index.vue、main.js、main.json）:

JSON 配置配置說明

JSON 配置分為三種：全域性小程式配置 app.json、頁面配置 page.json、工具配置 project.config.json

1 全域性小程式配置 app.json

包括了小程式的所有頁面路徑、介面表現、網路超時時間、底部 tab 等。可以配置的類別如下：

2 頁面配置 page.json

頁面是針對小程式相關頁面的配置。比如：整個小程式的風格是藍色調，但有個頁面頂部標題欄需要是綠色的，你就可以在該頁面的 page.json 裡去配置。配置列表如下：

3 工具配置 project.config.json

該檔案主要記錄你在開發者工具上做的配置，當你重新安裝工具或者換電腦工作時，你只要載入同一個專案的程式碼包，開發者工具就自動會幫你恢復到當時你開發專案時的個性化配置。一般不需要我們特別關注，只需要在開發者工具裡面做修改即可。

文章僅為本人學習過程的一個記錄，僅供參考，如有問題，歡迎指出！