微信小程式-Mpvue快速搭建小程式架構

小程式是一種全新的連接配接使用者與服務的方式，它可以在微信内被便捷地擷取和傳播，同時具有出色的使用體驗；同時，小程式具有上手簡易、開發成本低且可推廣成本低等優點，是以從創業型公司到上市企業，擁有自身的小程式已成為一種标配。

本文目錄大綱

技術方案

項目搭建

項目結構

Github 小程式項目位址

技術方案

目前開發微信小程式時，可選的技術方案大概有若幹種：

• 微信小程式原生開發
• wepy小程式架構開發
• mpvue小程式架構開發
• taro小程式架構開發

本篇文章主要介紹使用mpvue + vuex + Vant Weapp + we-validator來建構一個簡易的微信小程式，可在起上進行自定義開發，其中vuex是一個專門為Vue.js應用程式開發的狀态管理模式，Vant Weapp是UI元件庫，we-validator是表單管理控件。

項目搭建

項目準備

1. 申請賬号 根據指引填寫資訊和送出相應材料，進而擁有自己的小程式賬号
2. 安裝小程式開發者工具 登入小程式官網按相關步驟下載下傳小程式開發者工具
3. mpvue項目建立 根據官方文檔初始化mpvue項目，項目初始化時建議使用勾選Vuex進行狀态管理和Eslint規範程式代碼
4. Vant Weapp UI元件庫引入 直接通過git下載下傳 Vant Weapp源代碼，并将dist目錄拷貝到項目中的static下并重命名
5. we-validator 表單控制器引入 通過npm方式安裝

建構小程式基礎架構

PS：以該工程項目為基礎進行講述

1. Vant Weapp UI元件庫的具體使用

   假設你已經在項目準備的過程中成功引入Vant Weapp UI元件庫，是以在使用具體的元件時，可以直接在使用的頁面main.json中引用

/src/pages/index/main.json 引入vant-field和vant-cell-group

"usingComponents": {
    "van-field": "/static/vant/field/index",
    "van-cell-group": "/static/vant/cell-group/index"
  }

/src/pages/index/index.vue 使用vant-field和vant-cell-group

<van-field v-bind:value="username" required clearable
        label="使用者名" placeholder="請輸入使用者名" @change="usernameChange" />
<van-field v-bind:value="password" required type="password"
        label="密碼" placeholder="請輸入密碼"  @change="passwordChange"/>
<van-field v-bind:value="phone" required label="手機号"
        placeholder="請輸入手機号"  @change="phoneChange" />
           

1. we-validator表單控制器的具體使用

   we-validator表單控制器的具體使用可參考原文檔

2. Vuex 狀态管理子產品的使用

   在使用Vuex之前，需在main.js進行相關配置：

import Vue from 'vue'
import App from './App'
import store from './stores/index'

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()
Vue.prototype.$store = store

           

在/src目錄下建立子目錄stores，目錄結構如下：

/stores
        /module
                formSubmit.js
        index.js	//注冊formSubmit子產品
           

前端資料與store子產品資料保持一緻 事件觸發更新store子產品資料

...mapState({
	username: state => state.formSubmit.username,
	password: state => state.formSubmit.phoneNum,
	phone: state => state.formSubmit.phone
})


usernameChange (event) {
	this.$store.commit('formSubmit/updateUsername', event.mp.detail);
},
passwordChange (event) {
	this.$store.commit('formSubmit/updatePassword', event.mp.detail);
},
phoneChange (event) {
	this.$store.commit('formSubmit/updatePhone', event.mp.detail);
}
           

項目結構

project.config.json   	#微信項目配置檔案
package.json	     	#npm項目配置檔案
/dist				#項目編譯的目标目錄，也作為小程式的根目錄
/static					#靜态資源檔案夾，将編譯到 /dist 目錄下
        /functions			#雲函數目錄
	/images				#圖檔檔案目錄
	/icons				#圖示檔案目錄
	/...
/src				# mpvue源碼目錄
	/components			#自定義元件目錄
	/data				#資料相關，如網絡api定義
		data1.js			# 定義
	/stores				#vuex stores目錄，管理狀态（頁面的資料）
		index.js			# store子產品
                /modules                        # modles子產品目錄
		        store1.js			# store定義
	/pages				#頁面目錄
		/page1			# 具體的頁面
			index.vue		#vue頁面元件
			main.js			#将vue元件轉為小程式元件
			main.json		#頁面配置檔案, 參考 [1]
		/page2
		/...
	/utils			#工具類
	app.json		# 小程式全局配置，參考[2]
	App.vue			# 相當于小程式裡的Application，作用于全局
	main.js			# 将vue元件轉為小程式元件
           

總結

經過上面的相關描述，再結合項目的具體細節，可輕松的自定義一個簡易的小程式，進而快速的進行小程式的開發