mpvue為框架的練手小項目，mpvue官網(wǎng)，mpvue一定程度上對熟悉了vue之后想做小程序的開發(fā)十分友好，忍不住搞了兩個小項目試了一下
主要內(nèi)容
mpvue-note是一個關(guān)于詩詞的小項目
mpvue-news是一個新聞相關(guān)的小項目
相關(guān)功能介紹
開發(fā)工具
個人推薦的是VScode+微信開發(fā)者工具，關(guān)閉微信開發(fā)者工具的編輯器只用來預(yù)覽和調(diào)試使用。
項目框架的設(shè)置
在mian.js中設(shè)置項目的入口以及tabbar，如果項目和newsAPP一致只有一個主頁面那么不需要設(shè)置tabbar，可以只設(shè)置window。
所有的需要跳轉(zhuǎn)的界面都要在pages中進行設(shè)置，相當(dāng)于vue中的路由設(shè)置。其中pages/index/main前面的符號，表示他為程序啟動之后加載的首頁界面。
左側(cè)的紅框中可以看到，在pages中每個頁面中需要設(shè)置一個main.js頁面用來設(shè)置導(dǎo)航欄的設(shè)置和部分刷新功能屬性的設(shè)置。
mpvue用法與注意點
mpvue中可以直接使用vue中的大部分控件也可以使用小程序的原生組件。
這里我們直接使用了小程序的scroll-view組件并設(shè)置相關(guān)屬性實現(xiàn)了news小程序中頭部的滾動部分，
scroll-view使用注意：
- 父容器
設(shè)置寬度,并設(shè)置white-space: nowrap - 每一個控件
設(shè)置寬度和display:inline-block ,使用flex無效
同樣可以使用自己封裝的組件和vue中的一些寫法直接傳值，但是不支持v-html語句，使用web-view來代替。
頁面跳轉(zhuǎn)和傳值
無法使用vue-router進行頁面跳轉(zhuǎn)，使用微信小程序提供的navigateTo組件進行頁面跳轉(zhuǎn)。
在接收數(shù)據(jù)的界面進行的相關(guān)設(shè)置
網(wǎng)絡(luò)請求
在mpvue中貌似無法直接使用axios進行網(wǎng)絡(luò)請求，使用flyio來進行網(wǎng)絡(luò)請求
網(wǎng)絡(luò)請求的設(shè)置
import flyio from 'flyio/dist/npm/wx'
Vue.prototype.$http = new flyio
// 一定要設(shè)置content - type
Vue.prototype.$http.config.headers = {
//公共請求頭
"Content-Type": "application/json; charset=utf-8",
"Authorization": "APPCODE 8b3b838de2dc42eebc1a5846f2d4e734",
}
然后我們可以使用flyio來進行網(wǎng)絡(luò)請求，在正式的項目中對其進行網(wǎng)絡(luò)請求的封裝和使用。
為了交互的顯示效果更友好，我們使用微信原生的
wx.showLoading({
title: "加載中"
});
與
wx.hideLoading();
在進行網(wǎng)絡(luò)請求時進行提示顯示。一個簡單的網(wǎng)絡(luò)請求舉例如下
域名的處理
在開發(fā)中，在微信開發(fā)工具中，詳情，然后勾選不校驗合法域名、web-view（業(yè)務(wù)域名）、TLS 版本以及 HTTPS 證書，因為小程序使用的https且TLS 版本必須大于等于 1.2。
如果需要提交審核需要去后臺設(shè)置好請求需要的https域名。
后記
暫時就寫這么多，一些細(xì)節(jié)可以在代碼中看到，練手小項目可能其他地方需要優(yōu)化，歡迎指出
