mpvue:是由美团点评团队出品的小程序开发的一款基于vue的框架,从整个vue的核心代码上经过二次开发而形成的一个框架,相当于是给vue本身赋能,增加了开发微信小程序的能力。
使用mpvue开发小程序,你将在小程序技术体系的基础上获取到这样一些能力:
l彻底的组件化开发能力:提高代码
l完整的Vue。js开发体验
l方便的Vuex数据管理方案:方便构建复杂应用
l快捷的webpack构建机制:自定义构建策略,开发阶段hotReload
l支持使用npm外部依赖
l使用Vue。js命令行工具vue-cli快速初始化项目
l H5代码转换编译成小程序目标代码的能力
它的目标是:在未来最理想的状态下,可以一套代码可以直接跑在多端:网络,微信小程序,支付宝小程序,本地(借助weex)。不过由于各个端之间都存在一些比较明显的差异性,从产品的层面上讲,不建议这么做,这个框架的官方他们对它的期望的也只是开发和调试体验的一致
原生微信小程序,mpvue, WePY这三种开发小程序方式的比较
<强> 1,小程序账号配置
1)前往https://mp.weixin.qq.com/wxopen/waregister& # 63; action=step1根据指引填写信息和提交相应的资料,申请小程序帐号。在菜单”设置”——“开发设置”获取小程序的AppID。
2)在菜单”设置”——“开发设置”中配置服务器域名,必须是https开头的域名
<强> 2,安装开发工具
前往开发者工具下载页面,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看《开发者工具介绍》。
打开小程序开发者工具,用微信扫码登录开发者工具,准备开发小程序。
<强> 3,mpvue生成项目
#全局安装vue-cli
npm安装美元——全球vue-cli
#创建一个基于mpvue-quickstart模板的新项目
vue init mpvue美元/mpvue-quickstart我的项目
#安装依赖
$ cd我的项目
npm美元安装
#启动构建
美元npm运行dev
Npm运行dev运行成功后,本地目录下会生成一个dist文件,这个文件就是生成的小程序相关代码。
在小程序中新建项目,填写上一步获取的appid,便于后面可以在手机上预览,真机测试,小程序的文件目录就是本地项目目录的dist文件。
<强> 1,生命周期函数
除了vue本身的生命周期外,mpvue还兼容了小程序的生命周期,
应用部分:
onLaunch,初始化
昂秀,当小程序启动,或从后台进入前台显示
onHide,当小程序从前台进入后台
页面部分:
onLoad,监听页面加载
昂秀,监听页面显示
onReady,监听页面初次渲染完成
onHide,监听页面隐藏
onUnload,监听页面卸载
onPullDownRefresh,监听用户下拉动作
onReachBottom,页面上拉触底事件的处理函数
onShareAppMessage,用户点击右上角分享
onPageScroll,页面滚动
onTabItemTap,当前是标签页时,点击选项卡时触发(mpvue 0.0.16支持)
创建:这个钩子是有缺陷的,所有页面创建的函数会在项目加载的时候被一起调用,而且进入页面的时候不会在被调用,所以这个函数基本就不能使用了,用小程序的onLoad钩子代替
安装:你如果从页面B返回页面,页面一个的安装钩子不会被触发,因为页面没有被重新加载,如果有需要每次页面展示都要调用的逻辑,使用小程序的昂秀代替
<强> 2,mpvue转换的部分规则
1)微信小程序的页面的查询参数是通过> 埃尔:这参美元…风格。宽度=offsetWIdth——比;:
获取节点信息,
3)不支持部分复杂的JavaScript渲染表达式,我们会把模板中的{{}}双花括号的部分,直接编码到wxml文件中,由于微信小程序的能力限制(数据绑定),所以无法支持复杂的JavaScript表达式。
目前可以使用的有+ - * % & # 63;:!=====比;& lt;[],剩下的还待完善。
& lt; !——这种就不支持,建议写计算——在
