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

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 });

3. 有时候改变数组或者对象的值后视图不更新，请使用vue中的this.$set() 方法

4.使用官方的选择地区组件的时候可能有些不一样：

           

              所在地区：{{area[0] + area[1] + area[2]}}

           

methods里面的方法：

bindRegionChange(e) {

      this.area = e.target.value

    }

更多分享可以关注我的博客:http://www.dsiab.com