快速上手mpvue 項目

初始化一個 mpvue 項目

$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 因爲衆所周知的緣由，能夠考慮切換源爲 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安裝 vue-cli
# 通常是要 sudo 權限的
$ npm install --global vue-cli@2.9

# 4. 建立一個基於 mpvue-quickstart 模板的新項目
# 新手一路回車選擇默認就能夠了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

分包機制 2018.7.23+
mpvue-loader 1.1.2-rc.2 以後，優化了 build 後的文件生成結構

webpack 配置
注意事項
新增的頁面須要從新 npm run dev 來進行編譯

使用手冊
mpvue 繼承自 Vue.js，其技術規範和語法特色與 Vue.js 保持一致

# 全局安裝 vue-cli
$ npm install --global vue-cli

# 建立一個基於 mpvue-quickstart 模板的新項目
$ vue init mpvue/mpvue-quickstart my-project

# 安裝依賴
$ cd my-project
$ npm install
# 啓動構建
$ npm run dev

框架原理
mpvue 保留了 vue.runtime 核心方法，無縫繼承了 Vue.js 的基礎能力
mpvue-template-compiler 提供了將 vue 的模板語法轉換到小程序的 wxml 語法的能力
修改了 vue 的建構配置，使之構建出符合小程序項目結構的代碼格式： json/wxml/wxss/js 文件

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed

app 部分：

onLaunch，初始化
onShow，當小程序啓動，或從後臺進入前臺顯示
onHide，當小程序從前臺進入後臺
page 部分：

onLoad，監聽頁面加載
onShow，監聽頁面顯示
onReady，監聽頁面初次渲染完成
onHide，監聽頁面隱藏
onUnload，監聽頁面卸載
onPullDownRefresh，監聽用戶下拉動做
onReachBottom，頁面上拉觸底事件的處理函數
onShareAppMessage，用戶點擊右上角分享
onPageScroll，頁面滾動
onTabItemTap, 當前是 tab 頁時，點擊 tab 時觸發

生命週期圖示

事件處理器

// 事件映射表，左側爲 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'
}

表單控件綁定

<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>

<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>

---

請點贊！由於你的鼓勵是我寫做的最大動力！

吹逼交流羣：711613774