微信小程序-Mpvue快速搭建小程序框架

微信小程序-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="请输入密码" border="false" @change="passwordChange"/>
<van-field v-bind:value="phone" required label="手机号"
        placeholder="请输入手机号" border="false" @change="phoneChange" />

2. we-validator表单控制器的具体使用
   we-validator表单控制器的具体使用可参考原文档

3. 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组件转为小程序组件

总结

经过上面的相关描述，再结合项目的具体细节，可轻松的自定义一个简易的小程序，从而快速的进行小程序的开发