使用mpvue框架开发微信小程序

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/breakcastle/article/details/81878555

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 class="picker">
              所在地区：{{area[0] + area[1] + area[2]}}
            </view>
</picker>

methods里面的方法：

bindRegionChange(e) {
      this.area = e.target.value
    }

阅读更多