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