基于mpvue的小程序项目搭建的步骤
前言mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案。 Mpvue官网: demo地址 : 为什么要用mpvue首先微信小程序推荐简洁的开发方式,通过多页面聚合完成轻量的产品功能。小程序以离线包方式下载到本地,通过微信客户端载入和启动,开发规范简洁,技术封装彻底,自成开发体系,本身定位为一个简单的逻辑视图层框架,官方并不推荐用来开发复杂应用,但业务需求却难以做到精简。复杂的应用对开发方式有较高的要求,如组件和模块化、自动构建和集成、代码复用和开发效率等,但小程序开发规范较大的限制了这部分能力。所以为了解决上述问题,提高开发效率,提供更好的开发体验,通过使用基于 Vue.js 的mpvue框架来开发微信小程序。 mpvue的特点
项目搭建项目构成1、采用mpvue 官方脚手架搭建项目底层结构 2、采用Fly.js 作为http 请求库 3、采用stylus作为项目css预处理工具。 项目框架结构和文件目录结构主要关注应用程序代码所在的src目录 搭建过程一、通过官方文档 快速创建一个小程序创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project 安装依赖$ cd my-project 启动构建$ npm run dev 二、微信开发者工具打开dist目录,查看页面是否显示。三、配置 fly1、在src下 创建 http目录 目录结构为: 2、config.js //配置请求基地址
// //定义公共headers // fly.config.headers={xx:5,bb:6,dd:7} // //设置超时 // fly.config.timeout=10000; // //设置请求基地址 // fly.config.baseURL="https://wendux.github.io/" //添加拦截器 // Vue.prototype.$http=fly //将fly实例挂在vue原型上 export default fly 3、api.js // 配置API接口地址
let root ='接口域名'; /**
export const test = params => {return fly.post( 四、配置 stylus1、在src下 创建 stylus目录 目录结构为:2、mixin.stylus考虑到将来可能要复用到h5项目中 所以这里写了一个 单位转换的方法【px2rem】,并没有使用存在平台差异的rpx,以后即便迁移到web 端,只需要处理【px2rem】的单位转换逻辑就好 // 多行显示省略号
no-wrap-more($col) display: -webkit-box -webkit-box-orient: vertical -webkit-line-clamp: $col overflow: hidden //rem转换 $px / 75 *1rem px2rem($px) 3、index.stylus4、引入在 app.vue 中引入 **如果要用到mixin.stylus中的方法,需要在页面的stylus文件中 单独引用 mixin.stylus 五 配置 config目录1、在src下 创建 config目录 目录结构为:2、tips.js考虑到将来可能要复用到h5项目中 所以这里将微信提供的提示与加载框封装成工具类,以后即便迁移到web 端,只需要删除tips.js的wx api就可以了。 可以在 main.js中引入,绑定到原型上 在页面中 this.$tips.alert("请输入手机号")调用 static success(title,duration = 500) {
setTimeout(() => { wx.showToast({ title: title,icon: "success",mask: true,duration: duration }); },300); if (duration > 0) { return new Promise((resolve,reject) => { setTimeout(() => { resolve(); },duration); }); } } /**
static toast(title,onHide,icon = "success") { // 隐藏结束回调 /**
/**
static share(title,url,desc) { static alert (text,ok) { /**
六、配置vuex1、在src下 创建 store目录 目录结构为: 2、main.js中引入store,并绑定到Vue构造函数的原型上,这样在每个vue的组件都可以通过this.$store访问store对象。 3、state.js 在数据源文件中定义变量: 4、mutation-types.js 在mutation-types.js中定义你的Mutation的名字 5、mutations.js 在mutations.js中写处理方法 export default matations
6、使用方法 Vue.use(Vuex);
export default new Vuex.Store({ 在页面中引用 7、将vuex中的数据持久化到本地 (使用vuex-persistedstate) 在 store index.js 引入 Vue.use(Vuex);
export default new Vuex.Store({ demo地址 : 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |