mpvue官网:http://mpvue.com/mpvue/
通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目:
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install # 启动构建 $ npm run dev
接下来,你只需要启动 微信开发者工具,引入dist目录即可预览到你的第一个 mpvue 小程序。
mpvue使用vue的语法,组件方面既可以使用官网小程序的组件,也可以自己写vue组件。
第一次使用该框架写小程序的时候需要注意:
1.可以在onload里面对页面进行初始化:
onLoad(res) {
// res.id 是上个页面在链接在链接后添加的参数,比如 /order-detail/main?id=234
wx.setNavigationBarTitle({
title: "产品详情" // 设置当前页面标题
})
}
};
2.页面跳转有两种方式,可以使用navigateTo,可以直接在a链接里面写直跳转的地址
let url = "./order-detail/main";
wx.navigateTo({ url });
<a href="/order-detail/main">
3. 有时候改变数组或者对象的值后视图不更新,请使用vue中的this.$set() 方法
4.使用官方的选择地区组件的时候可能有些不一样:
<picker mode="region" @change="bindRegionChange($event)" :value="area" :custom-item="customItem">
<view >
所在地区:{{area[0] + area[1] + area[2]}}
</view>
</picker>
methods里面的方法:
bindRegionChange(e) {
this.area = e.target.value
}
更多分享可以关注我的博客:http://www.dsiab.com