mpVue

http://mpvue.com/

全局安装 vue-cli

  $ npm install --global vue-cli

创建一个基于 mpvue-quickstart 模板的新项目

  $ vue init mpvue/mpvue-quickstart my-project

安装依赖

  $ cd my-project
  $ npm install

启动构建

  $ npm run dev

新增的页面需要重新 npm run dev 编译

小程序配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

  {
    "pages": [
      "pages/index/index",
      "pages/logs/index"
    ],
    "window": {
      "navigationBarTitleText": "Demo"
    },
    "tabBar": {
      "list": [{
        "pagePath": "pages/index/index",
        "text": "首页"
      }, {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }]
    },
    "networkTimeout": {
      "request": 10000,
      "downloadFile": 10000
    },
    "debug": true
  }

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
工具配置 project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
其他配置项细节可以参考文档 开发者工具的配置 。
页面配置 page.json
这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
其他配置项细节可以参考文档 页面配置 。
WXML 模板
标签名字 小程序的 WXML 用的标签是 view, button, text 等等
wx:if 这样的属性以及 {{ }} 的表达式

  <view class="container">
    <view class="userinfo">
      <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
      <block wx:else>
        <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
      </block>
    </view>
    <view class="usermotto">
      <text class="user-motto">{{motto}}</text>
    </view>
  </view>

WXML

  <text>{{msg}}</text>

JS

  this.setData({ msg: "Hello World" })

WXSS 样式
WXSS 在底层支持新的尺寸单位 rpx
提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
WXSS 仅支持部分 CSS 选择器
更详细的文档可以参考 WXSS 。
JS 交互逻辑

  <view>{{ msg }}</view>
  <button bindtap="clickMe">点击我</button>

点击 button 按钮的时候，我们希望把界面上 msg 显示成 “Hello World”，在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

  Page({
    clickMe: function() {
      this.setData({ msg: "Hello World" })
    }
  })

事件可以参考文档 WXML - 事件
调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。更多 API 可以参考文档 小程序的API

  Page({
    data: { // 参与页面渲染的数据
      logs: []
    },
    onLoad: function () {
      // 页面渲染后 执行
    }
  })

组件

  <map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

更多的组件可以参考 小程序的组件。
API
要获取用户的地理位置时：

  wx.getLocation({
    type: 'wgs84',
    success: (res) => {
      var latitude = res.latitude // 经度
      var longitude = res.longitude // 纬度
    }
  })

调用微信扫一扫能力：

  wx.scanCode({
    success: (res) => {
      console.log(res)
    }
  })

需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。
更多的 API 能力见 小程序的API。

实例生命周期
同 vue，不同的是我们会在小程序 onReady 后，再去触发 vue mounted 生命周期

  beforeCreate
  created
  beforeMount
  mounted
  beforeUpdate
  updated
  activated
  deactivated
  beforeDestroy
  destroyed

除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。

app 部分：

  onLaunch，初始化   相当于react的componentDidMount
  onShow，当小程序启动，或从后台进入前台显示
  onHide，当小程序从前台进入后台
  page 部分：
  onLoad，监听页面加载
  onShow，监听页面显示
  onReady，监听页面初次渲染完成
  onHide，监听页面隐藏
  onUnload，监听页面卸载
  onPullDownRefresh，监听用户下拉动作
  onReachBottom，页面上拉触底事件的处理函数
  onShareAppMessage，用户点击右上角分享
  onPageScroll，页面滚动
  onTabItemTap, 当前是 tab 页时，点击 tab 时触发 （mpvue 0.0.16 支持）
  onPageNotFound，页面找不到

用法示例：

  new Vue({
    data: {
      a: 1
    },
    created () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a)
    },
    onShow () {
      // `this` 指向 vm 实例
      console.log('a is: ' + this.a, '小程序触发的 onshow')
    }
  })

微信小程序的页面的 query 参数是通过 onLoad 获取的，mpvue 对此进行了优化，直接通过 this.$root.$mp.query 获取相应的参数数据，其调用需要在 onLoad 生命周期触发之后使用，比如 onShow 等，具体生命周期调用顺序，

1.不支持 纯-HTML
小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。

2.不支持部分复杂的 JavaScript 渲染表达式
我们会把 template 中的 {{}} 双花括号的部分，直接编码到 wxml 文件中，由于微信小程序的能力限制(数据绑定)，所以无法支持复杂的 JavaScript 表达式。
目前可以使用的有 + - * % ?: ! == === > < [] .，

  <!-- 这种就不支持，建议写 computed -->
  <p>{{ message.split('').reverse().join('') }}</p>
  
  <!-- 但写在 @event 里面的表达式是都支持的，因为这部分的计算放在了 vdom 里面 -->
  <ul>
      <li v-for="item in list">
          <div @click="clickHandle(item, index, $event)">{{ item.value }}</p>
      </li>
  </ul>

3.不支持过滤器
渲染部分会转成 wxml ，wxml 不支持过滤器，所以这部分功能不支持。
4.不支持函数
不支持在 template 内使用 methods 中的函数。

5.不支持 官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。
class 支持的语法:

  <p :class="{ active: isActive }">111</p>
  <p class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</p>
  <p class="static" :class="[activeClass, errorClass]">333</p>
  <p class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</p>
  <p class="static" v-bind:class="[{ active: isActive }, errorClass]">555</p>
  style 支持的语法:
  <p v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</p>
  <p v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</p>

  <template>
      <!-- 支持 -->
      <div class="container" :class="computedClassStr"></div>
      <div class="container" :class="{active: isActive}"></div>
  
      <!-- 不支持 -->
      <div class="container" :class="computedClassObject"></div>
  </template>

列表渲染
全支持 官方文档：列表渲染
只是需要注意一点，嵌套列表渲染，必须指定不同的索引！
示例：

  <template>
      <ul v-for="(card, index) in list">
          <li v-for="(item, itemIndex) in card">
              {{item.value}}
          </li>
      </ul>
  </template>

事件处理器
几乎全支持啦 官方文档：事件处理器
我们引入了 Vue.js 的虚拟 DOM ，在前文模版中绑定的事件会被挂在到 vnode 上，同时我们的 compiler 在 wxml 上绑定了小程序的事件，并做了相应的映射，所以你在真实点击的时候通过 runtime 中 handleProxy 通过事件类型分发到 vnode 的事件上，同 Vue 在 WEB 的机制一样，所以可以做到无损支持。同时还顺便支持了自定义事件和 $emit 机制。
// 事件映射表，左侧为 WEB 事件，右侧为 小程序 对应事件

  {
      click: 'tap',
      touchstart: 'touchstart',
      touchmove: 'touchmove',
      touchcancel: 'touchcancel',
      touchend: 'touchend',
      tap: 'tap',
      longtap: 'longtap',
      input: 'input',
      change: 'change',
      submit: 'submit',
      blur: 'blur',
      focus: 'focus',
      reset: 'reset',
      confirm: 'confirm',
      columnchange: 'columnchange',
      linechange: 'linechange',
      error: 'error',
      scrolltoupper: 'scrolltoupper',
      scrolltolower: 'scrolltolower',
      scroll: 'scroll'
  }

在 input 和 textarea 中 change 事件会被转为 blur 事件。
踩坑注意：
列表中没有的原生事件也可以使用例如 bindregionchange 事件直接在 dom 上将bind改为@ @regionchange,同时这个事件也非常特殊，它的 event type 有 begin 和 end 两个，导致我们无法在handleProxy 中区分到底是什么事件，所以你在监听此类事件的时候同时监听事件名和事件类型既

<template>   <div>
   <picker @change="bindPickerChange" :value="index" :range="array">
     <view class="picker">
       当前选择：{{array[index]}}
     </view>
   </picker>   </div> </template>

<script> export default {   data () {
   return {
     index: 0,
     array: ['A', 'B', 'C']
   }   },   methods: {
   bindPickerChange (e) {
    console.log(e)
   }   } }
</script>

表单元素 radio 用 radio-group 组件进行代替

  <template>
    <div>
      <radio-group class="radio-group" @change="radioChange">
        <label class="radio" v-for="(item, index) in items" :key="item.name">
          <radio :value="item.name" :checked="item.checked"/> {{item.value}}
        </label>
      </radio-group>
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        items: [
          {name: 'USA', value: '美国'},
          {name: 'CHN', value: '中国', checked: 'true'},
          {name: 'BRA', value: '巴西'},
          {name: 'JPN', value: '日本'},
          {name: 'ENG', value: '英国'},
          {name: 'TUR', value: '法国'}
        ]
      }
    },
    methods: {
      radioChange (e) {
        console.log('radio发生change事件，携带value值为：', e.target.value)
      }
    }
  }
  </script>

页面跳转

  <navigator  :class="matchState?'gen-matchCard-warp gen-matchCard-begin': 'gen-matchCard-warp gen-matchCard-end'"
    url="../../pages/schedule/index">
    :url="'../../pages/schedule/index?name=' + macthData.name">
  </navigator>

mptoast 组件代替官方提供的 wx.showToast,

npm i vuex
npm i mptoast