基于mpvue构建小程序项目的步骤

前言

Mpvue是美团开源的前端框架，语法和vue.js一样，可以快速开发小程序。根据官方网站，一组代码可以在小程序和H5接口之间使用。使用该框架，开发人员将获得完整的Vue.js开发体验，并为H5和小程序提供代码重用能力。如果你想把H5项目改造成一个小程序，或者你想在开发一个小程序后把它转换成H5，mpvue将是一个非常合适的解决方案。

Mpvue官网：http://mpvue.com/demo地址：https://github.com/ccwyn/mpvuedemo/tree/master/my-project

为什么要用mpvue

首先，微信小程序推荐一种简单的开发方式，通过多页面聚合完成轻量级的产品功能。小程序以离线包的形式在本地下载，由微信客户端加载启动。开发标准简洁，技术包透彻，是一个自成体系的开发系统。定位为简单的逻辑视图层框架，官方不建议开发复杂的应用，但是业务需求很难精简。复杂应用对开发方法有很高的要求，如组件化和模块化、自动化构建和集成、代码重用和开发效率等。然而，小程序开发规范极大地限制了这部分能力。因此，为了解决上述问题，提高开发效率，提供更好的开发体验，我们使用基于Vue.js的mpvue框架开发微信小程序。

mpvue的特性

透彻的组件开发能力：提升Vue.js完整的开发体验；便捷的Vuex数据管理方案：方便搭建复杂应用；快速webpack构建机制：自定义构建策略，开发阶段hotReload支持使用npm外部依赖，并使用Vue.js命令行工具vue-cli快速初始化项目H5代码转换并编译成小程序目标代码的能力。

项目组成

1.使用mpvue官方脚手架搭建项目底层结构；2.使用Fly.js作为http请求库；3.使用手写笔作为项目的css预处理工具。

项目框架结构和文件目录结构

关注应用程序代码所在的src目录

src //我们项目的源代码编写文件 组件//组件目录head//导航组件 config //公共配置tips//提示和加载工具类界面调用文件 config //fly配置文件 pages //项目页面目录 商店//状态管理vuex配置目录 actions.js //actions异步修改状态getter计算过滤操作variations-types.js//variations类型variations.js//modify状态 index.js//where我们组装模块并导出存储state . js .数据源定义手写笔//手写笔css处理器目录common.stylel//global CSS样式index . styl//手写笔导出 mixin.styl /

首先，通过官方文件快速创建一个小程序http://mpvue.com/mpvue/

#全局安装vue-CLI $ npminstall-global vue-CLI #基于mpvue-quickstart模板创建新项目$ vueinit mpvue/mpvue-quick start my-project #安装依赖于$ CD my-project $ NPM install # start build $ NPM运行dev 2。微信开发者工具打开dist目录查看页面是否显示。

第三，配置fly

# npm安装flyio$ npm安装flyio - save1，在src下创建http目录。目录结构是：

http //http请求配置文件api.js//interface调用文件 config.js //fly配置文件2、config.js。

//引入飞行变量飞行=必需('飞行输入输出/距离/NPM/wx ')飞行变量飞行=新飞行；//配置请求基地址////定义公共头球//飞。配置。headers={ xx:5，bb:6，dd:7}////设置超时//飞。配置。超时=10000；////设置请求基地址//飞。配置。BaseURl=' https://wendux。github。io/'//添加拦截器飞吧。拦截器。request.use((config，promise)={ //给所有请求添加自定义标题配置。标题[' X-Tag ']=' flyio '；返回配置；})//Vue.prototype.$http=fly //将飞实例挂在某视频剪辑软件原型上导出默认fly3、api.js

从.进口苍蝇“/config”从QS /导入QS/配置应用程序接口接口地址让根='接口域名；/** * 接口模版====post * * export const test=params={ return fly。post(`$ { root }/xx/xx `，QS。stringify(params))}；* * 接口模版====get * * export const test1=function(){ return fly。get(`$ { root }/API/getnew list `) } * * *用法： * 在页面用引入测试*从导入{测试}././http/api.js' * *测试(参数).然后(RES={控制台。log(RES)})*/export const test=params={ return fly。post(` $ { root }/xx/xx `，QS。stringify(params))}；四、配置唱针

# npm安装flyio$ npm安装手写笔-保存-开发$ npm安装手写笔-加载器-保存-开发1、在科学研究委员会下创建唱针目录目录结构为：

手写笔//手写笔钢性铸铁处理器目录 常见。styl /全局钢性铸铁样式 指数。styl /手写笔出口mixin . style//mixin方法 重置。styl/重置css2、mixin。手写笔

考虑到将来可能要复用到h5项目中所以这里写了一个单位转换的方法【px2rem】，并没有使用存在平台差异的rpx，以后即便迁移到网端，只需要处理【px2rem】的单位转换逻辑就好

//单行显示省略号无换行()文本溢出：省略号飞越：隐藏空白-: nowrap/多行显示省略号no-wrap-more ($ col)display :-web kit-box-web kit-box-oriented :垂直-web kit-line-clamp : $ col overflow : hidden//rem转换$ px/75 * 1 EMP x2 rem($ px)$ px * 1 rpx 3、索引。手写笔

@import ./mixin.styl'@import ' ./重置。styl “@ import ”./common.styl'4，引入

在app.vue中引入

style lang='手写笔type=' text/手写笔rel='样式表/手写笔@import手写笔/index.styl'/style**如果要用到混合。手写笔中的方法，需要在页面的唱针文件中单独引用混合。手写笔

五配置配置目录

1、在科学研究委员会下创建配置目录目录结构为：

配置//公共配置 tips.js //提示与加载工具类2、tips.js

考虑到将来可能要复用到h5项目中所以这里将微信提供的提示与加载框封装成工具类，以后即便迁移到网端，只需要删除tips.js的wx api就可以了。

可以在main.js中引入，绑定到原型上

从""导入提示/config/tip ' vue .原型。$小费=小费在页面中这个$tips.alert('请输入手机号)调用

/** * 提示与加载工具类*/导出默认类Tips { constructor(){ this。IsLoading=false} /** * 弹出提示框*/静态成功(标题，持续时间=500){ setTimeout(()={ wx。showtoast({ title : title，icon: 'success '，mask: true，duration : duration })；}, 300);如果(持续时间0) {返回新的承诺(解析，拒绝)={ setTimeout(()={ resolve()；},持续时间);});} } /** * 弹出确认窗口*/静态确认（文本，有效负载={},标题='提示){返回新的承诺(解析，拒绝)={ wx。显示模式({ title : title，content: text，showCancel: true，success : RES={ if(RES . confirm){ resolve(有效负载);}否则if (res.cancel) { reject(有效负载);} }，fail: res={ reject(有效负载);} });});}静态toast(title，onHide，icon=' success '){ setTimeout(()={ wx。show toast({ title : title，icon: icon，mask: true，duration : 500 })；}, 300);//隐藏结束回调if(onHide){ setTimeout(()={ onHide()；}, 500);} } /** * 弹出加载提示*/静态加载（标题='加载中){ if(tips。正在加载){ return} Tips.isLoading=truewx。showLoading({ title : title，mask : true })；} /** * 加载完毕*/static loaded(){ if(tips。isloading){ tips。isloading=falsewx。hide loading()；} }静态共享（标题、网址、desc)返回{ title:标题、路径：网址，描述：成功：函数(res) { Tips.toast('分享成功');} };}静态警报（文本，ok){ if(ok===void 0){ ok=function(RES){ }；} if(！text){ return；} wx。显示模态({ content : text，showCancel: false，confirmColor: '#000000 '，cancelColor: '#000000 '，成功： ok })；};}/** * 静态变量，是否加载中*/tips。isloading=false六、配置状态管理

1、在科学研究委员会下创建商店目录目录结构为：

店//状态管理状态管理配置目录 行动。js/行动异步修改状态 吸气剂。js/吸气剂计算过滤操作 突变类型。js/突变类型 突变。js /修改状态 指数。js /我们组装模块并导出商店的地方 州。js /数据源定义2、main.js中引入商店，并绑定到某视频剪辑软件构造函数的原型上，这样在每个某视频剪辑软件的组件都可以通过这个。$商店访问商店对象。

从""导入存储/store ' vue。原型。$ store=store3、state.js

在数据源文件中定义变量：

const state={ test: 0，}导出默认状态4、突变类型。射流研究…

在突变类型中定义你的变化的名字

export const TEST='TEST' //这是测试的5、突变

在突变。射流研究…中写处理方法

从""导入*作为类型/variation-type '常量={/* * *状态：当前状态树*数据：提交匹配时传的参数*///是否有渠道[类型。测试](状态，数据){状态。测试=数据；}、}导出默认元素6、使用方法

# 在存储索引。射流研究…中引入从“Vue”导入Vue从“Vuex”导入Vuex从""导入状态/国家。”从导入突变"。/ventures ' vue。使用(Vuex)；导出默认的新Vuex .存储({状态，突变，})在页面中引用

7、将状态管理中的数据持久化到本地（使用vuex-persistedstate)

# 安装vuex-persistedstate$ npm安装vuex-persistedstate -保存在存储索引。射流研究…引入

从“Vue”导入Vue从“Vuex”导入Vuex从""导入状态/国家。”从导入突变"。/ventures的导入创建持久状态来自vuex-持久状态' vue。使用(Vuex)；导出默认的新Vuex .存储({状态，突变，plugins :[createPersistedState({ storage : { getitem : key=wx。getstoragesync(键)，setItem:(键，值)=wx.setStorageSync(键，值)，removeItem:键={ } })演示)地址：https://github。com/ccwyn/mpvuedemo/tree/master/my-project

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。