完美使用mpvue搭建小程序框架 |
您所在的位置：网站首页 › 怎么用vue开发小程序 › 完美使用mpvue搭建小程序框架 |
|
mpvue
美团开源了mpvue这个项目，使得我们又多了一种用来开发小程序的框架选项。由于mpvue框架是完全基于Vue框架的（重写了其runtime和compiler），因此在用法上面是高度和Vue一致的（某些功能由于受限于小程序环境本身的原因而不能使用），这给使用过Vue开发Web应用的前端开发者提供了极低的切换门槛来开发小程序。 mpvueVue.js 小程序版, fork 自 vuejs/[email protected]，保留了 vue runtime 能力，添加了小程序平台的支持。 mpvue 是一个使用 Vue.js 开发小程序的前端框架，目前支持 微信小程序、百度智能小程序，头条小程序 和 支付宝小程序。 框架基于 Vue.js，修改了的运行时框架 runtime 和代码编译器 compiler 实现，使其可运行在小程序环境中，从而为小程序开发引入了 Vue.js 开发体验。 名称由来 mp：mini program 的缩写 mpvue：Vue.js in mini program 主要特性使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力： 彻底的组件化开发能力：提高代码复用性 完整的 Vue.js 开发体验 方便的 Vuex 数据管理方案：方便构建复杂应用 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload 支持使用 npm 外部依赖 使用 Vue.js 命令行工具 vue-cli 快速初始化项目 H5 代码转换编译成小程序目标代码的能力其它特性正在等着你去探索。 配套设施mpvue 作为小程序版本的 Vue.js，在框架 SDK 之外，完整的技术体系还包括如下设施。 mpvue-loader 提供 webpack 版本的加载器 mpvue-webpack-target webpack 构建目标 postcss-mpvue-wxss 样式代码转换预处理工具 px2rpx-loader 样式转化插件 mpvue-quickstart mpvue-quickstart mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具 其它通过官网提供的五分钟快速上手教程，可以发现它的开发过程和Vue保持高度一致，连使用的命令行工具也还是原先开发Web应用时所用的vue-cli： 搭建步骤 一、开发环境Node.js现代前端开发框架和环境都是需要 Node.js 的，如果没有的话，请先下载 nodejs 并安装。 安装完成后，打开你的命令行输入如下命令，验证安装是否成功： node --version v8.1.2 npm --version 5.0.3然后，我们需要执行以下命令，将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率： npm set registry https://registry.npm.taobao.org/但是我电脑上用的不是npm，而是yarn，因为yarn相比npm使用更方便，快速，安装yarn可以参考 Npm vs Yarn 之备忘详单， yarn官方文档 JavaScript 包管理工具 yarn 的使用 安装完成后，打开你的命令行输入如下命令，验证安装是否成功： yarn --version 1.3.2 二、开发环境vue-cli npm install vue-cli -g提示许可被拒绝， 想起来了昨天启动时的权限问题， 试探性在命令前面加上了sudo， 结果可行： sudo cnpm install --global vue-cli安装成功, 查询下版本： vue -V 2.9.2 三、开始创建项目 vue init mpvue/mpvue-quickstart mpvueTest 终端图片现在mpvue的模板代码已经生成，现在还不能运行，需要 cd到项目目录下 执行 yarn进行安装第三方库，安装完成之后，执行 yarn dev这样就可以运行起来了 四、搭建小程序的开发环境小程序自己有一个专门的微信开发者工具，最新版本下载地址。 这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。 微信开发者工具导入项目打开之后，就会看到我们新建的小程序页面 小程序页面 至此我们这个基本mpvue小程序框架已经搭建完成 但是这个只是最基本的框架，对于我们正在做项目还是不够的，需要在进行完善 五、加入常用第三方库需要引入一些项目需要的基本第三方库，下面是我们项目目前用到的库，打开项目的package.json，加入一下内容， "dependencies": { "mpvue": "^2.0.0", "vuex": "^3.0.1", "weapp-qrcode": "^0.9.0", "flyio": "^0.5.9", "install": "^0.12.2", "mp-weui": "^1.0.3", "mpvue-zanui": "^1.0.2", "common-mpvue": "^0.4.6", "mpvue-config-loader": "^0.1.3" },cd到项目目录下，执行一下命令 yarn这些第三方库下载到我们的项目中，然后打开项目的main.js引入一些第三方。 import Vue from 'vue' import App from './App' import store from '@/store'; import WeUI from 'mp-weui/packages'; Vue.use(WeUI); Vue.config.productionTip = false App.mpType = 'app' const app = new Vue({ store, ...App }); app.$mount(); 提醒tips1:还有一个我搭建时候需要的坑，就是新版本的mpvue，不能在main.js里面配置小程序的config，我们之前的项目都是在main.js里面进行配置，但是我昨天进行配置，发现不可以配置了，在网上寻找答案，最终发现不支持了在main.js里面配置，在项目的main.json里面进行配置 提醒tips2:还有就是之前项目的每个页面的配置也是在页面的main.js里面进行配置，现在这个也不支持了，需要在页面下面的main.json里面进行配置，如下所示 { "navigationBarTitleText": "页面标题", "enablePullDownRefresh": true } 六、加入常用方法在项目utils目录下的index.js加入一些常用的方法 // /** // * 获取storage // */ export function getCache(key) { var value = wx.getStorageSync(key) if (value) { return value } return "" } // /** // * 删除storage // */ export function removeCache(key) { wx.removeStorage(key); } /** * 存储storage */ export function setCache(key, value) { try { wx.setStorageSync(key, value) } catch (e) { } } /** 获取url参数 */ export function getUrlParam(path) { var result = {}, param = /([^?=&]+)=([^&]+)/gi, match; while ((match = param.exec(path)) != null) { result[match[1]] = match[2]; } return result; } /** 数组是否包含某个字符串 */ export const carrContainStr = (a, obj) => { for (var i = 0; i < a.length; i++) { if (a[i] == obj) { return i; } } return -1; } /** 克隆 */ export const clone = (obj) => { // Handle the 3 simple types, and null or undefined if (null == obj || "object" != typeof obj) return obj; // Handle Date if (obj instanceof Date) { var copy = new Date(); copy.setTime(obj.getTime()); return copy; } // Handle Array if (obj instanceof Array) { var copy = []; for (var i = 0, len = obj.length; i < len; ++i) { copy[i] = clone(obj[i]); } return copy; } // Handle Object if (obj instanceof Object) { var copy = {}; for (var attr in obj) { if (obj.hasOwnProperty(attr)) copy[attr] = clone(obj[attr]); } return copy; } throw new Error("Unable to copy obj! Its type isn't supported."); } /** 判断机型 */ export const isiOS = () => { var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 if (isiOS) { return true } return false; } 七、vuex这块我就不细说了，大家可以参考下面的进行在项目里进行配置 vuex官网 VueJS中学习使用Vuex详解 vuex的简单介绍 我对vuex的理解（二） 之 mapGetters取值和mapMutations的传参 八、分装网络请求可以看一下我的下一篇文档小程序中使用flyio封装网络请求 至此特别感谢一斤代码-------->一斤代码的简书，他写了很多mpvue小程序的文档，从搭建到使用，写的很详细，大家可以去学习观摩一下😆。 参考： mpvue官网 一斤代码 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |