mpvue官網(wǎng):http://mpvue.com/mpvue/
通過 Vue.js 命令行工具 vue-cli,你只需在終端窗口輸入幾條簡單命令体谒,即可快速創(chuàng)建和啟動一個帶熱重載、保存時靜態(tài)檢查晚顷、內(nèi)置代碼構(gòu)建功能的小程序項目:
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個基于 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project
# 安裝依賴
$ cd my-project
$ npm install # 啟動構(gòu)建 $ npm run dev
接下來婚夫,你只需要啟動 微信開發(fā)者工具,引入dist目錄即可預(yù)覽到你的第一個 mpvue 小程序缓醋。
mpvue使用vue的語法,組件方面既可以使用官網(wǎng)小程序的組件如失,也可以自己寫vue組件。
第一次使用該框架寫小程序的時候需要注意:
1.可以在onload里面對頁面進(jìn)行初始化:
onLoad(res) {
? // res.id 是上個頁面在鏈接在鏈接后添加的參數(shù)送粱,比如 /order-detail/main?id=234
? ? wx.setNavigationBarTitle({
? ? ? title: "產(chǎn)品詳情" // 設(shè)置當(dāng)前頁面標(biāo)題
? ? })
? }
};
2.頁面跳轉(zhuǎn)有兩種方式褪贵,可以使用navigateTo,可以直接在a鏈接里面寫直跳轉(zhuǎn)的地址
let url = "./order-detail/main";
wx.navigateTo({ url });
<a href="/order-detail/main">
3. 有時候改變數(shù)組或者對象的值后視圖不更新抗俄,請使用vue中的this.$set() 方法
4.使用官方的選擇地區(qū)組件的時候可能有些不一樣:
<picker mode="region" @change="bindRegionChange($event)" :value="area" :custom-item="customItem">
? ? ? ? ? ? <view >
? ? ? ? ? ? ? 所在地區(qū):{{area[0] + area[1] + area[2]}}
? ? ? ? ? ? </view>
</picker>
methods里面的方法:
bindRegionChange(e) {
? ? ? this.area = e.target.value
? ? }
更多分享可以關(guān)注我的博客:http://www.dsiab.com