一、安裝開發(fā)環(huán)境
? ? ? ? 1) node.js
? ??????????下載地址:https://nodejs.org/en/download/? ?安裝完成后,打開你的命令行輸入如下命令褂痰,驗(yàn)證安裝是否成功:
????????????node --version? //成功則會(huì)輸出相應(yīng)版本
? ? ? ? ? ? 安裝成功之后即npm安裝成功兼搏,由于國外環(huán)境安裝速度較慢,可以切換到國內(nèi)的淘寶鏡像來提高效率
? ? ? ? ? ? ?npm set registry https://registry.npm.taobao.org/
二连霉、開發(fā)環(huán)境安裝成功之后我們需要安裝開發(fā)依賴?
? ? ? ? 1)vue-cli
? ??????????vue-cli是一個(gè)vue專用的項(xiàng)目腳手架工具榴芳,可以用于方便的創(chuàng)建vue項(xiàng)目骨架代碼,
? ? ? ? ????cnpm install vue-cli -g
? ? ? ? 2)下載微信開發(fā)者工具跺撼,調(diào)試和模擬運(yùn)行微信小程序
? ??????????下載地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
三窟感、創(chuàng)建機(jī)遇mpvue的小程序項(xiàng)目
? ? 1)快速構(gòu)建mpvue小程序項(xiàng)目,按照命令行的引導(dǎo)一路回車:
? ? ? ? 結(jié)束之后會(huì)在我的F盤下面的test文件下新建一個(gè)vuetest的文件歉井,即我們項(xiàng)目文件地址柿祈,在這個(gè)過程中vue幫我們下載了一份注冊名為? ? mpvue/mpvue-quickstart的模板代碼,然后根據(jù)開發(fā)者在命令行提示過程中輸入的信息哩至,生成一份經(jīng)過配置后的代碼躏嚎。安裝成功之后我們還需要對項(xiàng)目安裝開發(fā)所需要的依賴:
? ? ? ? 結(jié)束之后開發(fā)所需要的依賴環(huán)境就自動(dòng)安裝在了vuetest下(node_modules),執(zhí)行以下代碼即可將項(xiàng)目運(yùn)行起來:
? ? ? ? 成功運(yùn)行之后項(xiàng)目就可以進(jìn)入開發(fā)模式菩貌,一但源代碼發(fā)生變化就會(huì)觸發(fā)自動(dòng)編譯卢佣,可以用正常的vue語句開發(fā),但最終還需要轉(zhuǎn)換成小程序的的代碼才可以在微信小程序環(huán)境下運(yùn)行箭阶,編譯后的代碼會(huì)在dist目錄下::
cnpm run build
運(yùn)行查看結(jié)果虚茶,打開微信開發(fā)者工具——>新建項(xiàng)目
? ? ? ? 項(xiàng)目目錄選擇我們剛剛新建的vuetest目錄,若無AppID則可使用測試號:
? ? ? ? 點(diǎn)擊導(dǎo)入則可進(jìn)入小程序開發(fā)界面:
? ? ? ? 左側(cè)為運(yùn)行結(jié)果仇参,右側(cè)可以查看小程序源碼
三嘹叫、mpvue小程序頁面構(gòu)成
? ? 1)src目錄
? ? ? ? src目錄下是我們編寫程序的目錄文件,默認(rèn)生成的模板已經(jīng)給我們創(chuàng)建了三個(gè)文件夾作為參考案例诈乒,可以參考這里面的邏輯代碼自己來編寫自己的風(fēng)格
? ??????components:一般我們會(huì)將公共的模板或者說重復(fù)較多的部分提取成vue組件存放在這里
? ??????pages:存放小程序的頁面
????????utils:可選(可刪)罩扇。可以將代碼中一些公用工具函數(shù)組織成模塊放入該目錄下
? ??????main.js + App.vue:這兩個(gè)是入口文件抓谴,相當(dāng)于原生小程序框架中的app.json和app.js的復(fù)合體暮蹂。
? ? 2)config目錄
? ??????config目錄下包含了用于開發(fā)和生產(chǎn)環(huán)境下的不同配置,dev.env.js用于開發(fā)環(huán)境癌压,prod.env.js用于生產(chǎn)環(huán)境仰泻,可以將開發(fā)階段和生產(chǎn)階段不一樣的信息配置到這兩個(gè)文件中去,比如說后臺(tái)請求的api地址滩届,圖片地址等集侯,然后在代碼中以變量的形式進(jìn)行引用:
? ??????// dev.env.js
module.exports = merge(prodEnv, {
? NODE_ENV: '"development"',
? BASE_URL: '"http://xxxx/api"'
})
// prod.env.js
module.exports = {
? NODE_ENV: '"production"',
? BASE_URL: '"http://xxxxadd/api"'
}
? ? ? ? 后面在使用api接口的時(shí)候可以直接使用:
const baseURL = process.env.API_BASE_URL
wx.request({url:`${baseURL}/xxx`})
? ? 3)build目錄
? ??????build目錄下是一些用于項(xiàng)目編譯打包的node.js腳本和webpack配置文件被啼。一般情況下不需要修改這些文件。
? ? 4)static目錄
? ? ? ? 主要存放一些靜態(tài)資源棠枉,比如圖片浓体、文本文件等
四、小程序入口
? ? 1)app.json
? ??????app.json是小程序的全局配置文件辈讶,其包含了小程序的頁面文件路徑配置命浴、窗口的全局樣式信息、底部選項(xiàng)卡式菜單欄的配置贱除,以及一些小程序網(wǎng)絡(luò)超時(shí)的配置等等生闲。
? ? 2)App.vue
? ??????App.vue組件中可以編寫小程序的生命周期方法(通常使用Vue的生命周期方法,但也兼容原生的生命周期方法)月幌,也可以在其中加入小程序的全局樣式
? ? 3)其他頁面
? ??????我們新建一個(gè)名為index的子目錄(請遵循每個(gè)頁面放入一個(gè)子目錄的良好習(xí)慣)碍讯,然后在該子目錄下,新建2個(gè)文件:一個(gè)用于實(shí)現(xiàn)頁面主體功能的index.vue組件扯躺,另一個(gè)則用于將這個(gè)頁面組件生成Vue實(shí)例并加載的main.js捉兴。以后的每一個(gè)mpvue頁面組件都會(huì)擁有這樣的結(jié)構(gòu)。然后在main.js中編寫如下代碼录语,非常簡單的一段代碼倍啥,它的功能是引入index.vue并創(chuàng)建Vue實(shí)例:
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()