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中進(jìn)行設(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進(jìn)行頁面跳轉(zhuǎn)幽崩，使用微信小程序提供的navigateTo組件進(jìn)行頁面跳轉(zhuǎn)。
在接收數(shù)據(jù)的界面進(jìn)行的相關(guān)設(shè)置
網(wǎng)絡(luò)請求
在mpvue中貌似無法直接使用axios進(jìn)行網(wǎng)絡(luò)請求寞钥，使用flyio來進(jìn)行網(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來進(jìn)行網(wǎng)絡(luò)請求慌申，在正式的項目中對其進(jìn)行網(wǎng)絡(luò)請求的封裝和使用。
為了交互的顯示效果更友好理郑，我們使用微信原生的
wx.showLoading({
title: "加載中"
});
與
wx.hideLoading();
在進(jìn)行網(wǎng)絡(luò)請求時進(jìn)行提示顯示蹄溉。一個簡單的網(wǎng)絡(luò)請求舉例如下
域名的處理
在開發(fā)中，在微信開發(fā)工具中您炉，詳情柒爵，然后勾選不校驗合法域名、web-view（業(yè)務(wù)域名）赚爵、TLS 版本以及 HTTPS 證書棉胀，因為小程序使用的https且TLS 版本必須大于等于 1.2。
如果需要提交審核需要去后臺設(shè)置好請求需要的https域名冀膝。
后記
暫時就寫這么多唁奢，一些細(xì)節(jié)可以在代碼中看到，練手小項目可能其他地方需要優(yōu)化窝剖，歡迎指出
