記一次用mpvue框架搭建的小程序

介紹

mpvue （github 地址請參見）是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心，mpvue 修改了
Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js
開發體驗。 總之就是用vue的開發方法來開發小程序，對沒使用太小程序，可是會用vue的開發者來講十分友好

建立項目

就按照官網上這幾行代碼，就能夠建立一個mpvue項目了。下載開發者工具，導入項目，填入appid，一個mpvue小程序就建立成功了

是否是很簡單(*￣︶￣)

建立頁面

目錄大概是這樣
pages文件夾下面的每一個子文件夾是一個頁面，建立新頁面時，須要

1. 複製pages下面其中一個子文件夾，改文件夾名
2. 在src下的app.json文件，新增字段，這就是這個頁面的路由
3. 重啓項目

每次新增頁面都須要重啓項目

使用less
安裝less cnpm install less less-loader --save-dev 頁面的style標籤加上lang='less'

引入圖片
圖片和樣式的靜態文件放在static文件夾下

<img src="/static/img/location.png" /> // 圖片用絕對路徑

請求封裝
使用flyio,具體參考flyio封裝

彈出層
小程序使用原生的彈出層
美團小程序框架mpvue入門教程 這篇文章中的封裝的mptoast在某個iphone se上有不兼容的問題,因此改爲的原生的彈出層

路由攜帶信息
小程序沒有vue的路由機制，因此只有使用小程序原生的頁面跳轉，在起始頁面url地址裏面拼接參數，在目的頁面的onLoad 或以後的生命週期
經過this.$root.$mp.query可獲取到頁面參數

// 起始頁面
wx.navigateTo({
  // 目的頁面地址
  url: '../detail/main?id=' + xx.id + '&type=random', // 地址就是app.json裏面的
  success: function (res) {
    console.log(res)
  }
})
// 目的頁面
onLoad () {
  console.log('detail', this.$root.$mp.query)
}

使用vuex
mpvue使用vuex跟在vue裏面使用vuex是同樣的

---

在src文件夾下新建一個store文件夾,分別有這幾個js文件,主要是後面三個文件
index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'

Vue.use(Vuex)

const state = {
  username: '', // 自定義要改變的變量
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

mutation-types.js

export const SET_USERNAME = 'SET_USERNAME' // 自定義改變全局變量的方法名字

mutations.js

import {
  SET_USERNAME, // 引入全局變量的方法名
} from './mutation-types.js'

export default {
  [SET_USERNAME] (state, obj) {
    state.username = obj // 改變全局變量的具體方法
  }
}

main.js 引入
在src文件夾下的main.js

// 全局狀態管理
import store from './store/index'
Vue.prototype.$store = store

如今開始具體在頁面裏面使用這個變量
userinfo.vue 子頁面

<div @click='changeusername'>改變名字</div> // 用vue的方式綁定方法

import {mapMutations, mapState} from 'vuex' // 引入全局變量的方法和狀態

computed: {
  ...mapState(['username']) // 在本頁面可使用定義的全局變量username了
}

methods: {
 ...mapMutations(['SET_USERNAME']), // 聲明有這個方法
changeusername () {
  this.SET_USERNAME('小明') // username這個變量值已經變了,在其餘頁面獲取到的這個變量值也變了
}
}

分享

// 特定分享某個頁面
<button class="" open-type="share">邀請好友</button>

onShareAppMessage: function (res) {
    console.log(res)
    var title = 'xxxxxx'
    var path = 'pages/index/main' // 頁面右上角的分享路徑
    var imageUrl = '/static/img/success.png'
    if (res.from === 'button') {
      // 點擊某個按鈕的分享路徑
      path = 'pages/success-detail/main?id=' + xx.id // 路徑可攜帶參數
    }
    return {
      title,
      path,
      imageUrl,
      success: (res) => {
        console.log('res', res)
      },
      fail: (res) => {
        console.log('res', res)
      }
    }
  }

formId 發送模板消息
在點擊事件裏面嵌套這個表單提交方法

<form @submit="createFormId" report-submit='true'>
  <button form-type="submit" class="hidebtn">肯定</button>
</form>

createFormId (e) {
  // 產生form_id
  console.log(e.target.formId)
  if (e.target.formId !== '' && e.target.formId !== 'the formId is a mock one') {
    // 存儲formId 須要的時候傳到後臺
  }
}

打包
運行 npm run build打包
若是打包以後運行錯誤 提示 小程序始終提示查找不到‘app.json’文件
參考小程序始終提示查找不到‘app.json’文件

若是沒有錯就能夠發佈上傳了

持續更新...