mpvue-编写微信小程序总结


一、写在前面:

.....最近在写一个微信小程序项目,在看完官方微信小程序开发文档后,有一种直接想“放弃”的念头;

.....使用微信小程序原生框架可以快速,方便,简洁的搭建项目,同时微信提供了新的一套‘语义化’标记语言wxml,以及独立出来的wxss样式表,并且js的交互逻辑支持ES6的语法,包括使用Promise等;除去框架本身之外,小程序还提供了一些常用的组件,包括Picker,slider,canvas,form表单等,能极大的提高开发者的效率,丰富的API完全能满足工作需求,如果你在没有接触类似 VUE 等MVVM主流前端框架之前,微信小程序原生框架无疑是最佳选择;

......但是,使用过vue后,你会发现小程序原生框架的数据绑定方式非常“臃肿”,代码编写不优雅简洁,语义化标签以及丰富的属性设置会大大增加学习成本,另一方面微信小程序开发者工具的IDE表现也总是差强人意,反应迟钝,wxml,wxss,js之间来回切换不流畅,导致开发效率低下......

......由于以上种种,我开始寻找新的框架编写小程序项目,首先找到的框架是圈内较热门的wepy,其次就是最近才发布的mpvue;


简介

......wepy 是腾讯开源的一套语法接近vue.js,快速开发小程序的框架,开源的较早,网上有很多资源,也有一些大厂使用。可想而知,原生小程序框架在设计上还是有一定的缺陷

......mpvue也就是今天要介绍的主角,是美团开源的一套快速开发小程序的前端框架,__按官网说可以实现小程序与H5界面使用一套代码,mpvue 继承自 Vue.js。并且,其技术规范和语法特点与 Vue.js 保持一致。对毫无小程序开发经验的同学来说无疑是大大的福利。mpvue官网


二、优势比较

值得注意的是,mpvue提供vuex进行数据状态管理,能满足复杂应用状态管理需求,这是其他框架都不具备的!

mpvue-编写微信小程序总结

三、新建项目

  1. 通过 Vue.js 命令行工具 vue-cli,你只需在终端窗口输入几条简单命令,即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目
  2. 创建完之后,在命令行执行:

    npm run dev

    编译成功后,用微信开发者工具打开webpack打包后的dist文件,即可进行开发了;
  3. 项目文件结构:

    mpvue-编写微信小程序总结

小提示:

安装mpvue项目利用vue-cli脚手架工具,选择了对应的mpvue的模板,在安装过程中,cli脚手架工具会提醒您是否需要安装Vuex,,我建议您根据项目需求确认是否添加该配置,因为这里安装Vuex,工具根据vue模板会帮你自动搭建依赖关系并且转义后兼容小程序,如果您想在项目开发中添加Vux就要注意了,在安装过程中极有可能报错,由于mpvue开源时间较短,参考资料也很有限,为了避免不必要的麻烦,建议在搭建项目时就安装Vuex。

四、生命周期比较

vue生命周期

  • beforeCreate————————在实例初始化之后,数据观测事件配置之前被调用
  • created ————————在实例创建完成后被立即调用
  • beforeMount ————————在挂载开始之前被调用
  • mounted ————————el 被新创建的 vm.$el 替换挂载到实例上去之后调用该钩子
  • beforeUpdate
  • updated
  • activated ————————keep-alive 组件激活时调用。
  • deactivated
  • beforeDestroy
  • destroyed

    注意:vue的create,mounted等生命周期钩子函数只执行一次,当组件创建并被挂载到DOM上以后,就不会执行了;

小程序生命周期

app 部分:

  • onLaunch,初始化
  • onShow,当小程序启动,或从后台进入前台显示
  • onHide,当小程序从前台进入后台

page 部分:

  • onLoad,监听页面加载
  • onShow,监听页面显示
  • onReady,监听页面初次渲染完成
  • onHide,监听页面隐藏
  • onUnload,监听页面卸载
  • onPullDownRefresh,监听用户下拉动作
  • onReachBottom,页面上拉触底事件的处理函数
  • onShareAppMessage,用户点击右上角分享
  • onPageScroll,页面滚动
  • onTabItemTap, 当前是 tab 页时,点击 tab 时触发 (mpvue 0.0.16 支持)

这是生命周期的调用关系和顺序图。mpvue-编写微信小程序总结

五、使用总结

(1)生命周期钩子函数

mpvue团队建议开发者在mpvue中尽可能的不使用小程序的生命周期,实际工作中使用小程序的生命周期钩子函数也无大碍,有的程序员为了减少页面初始化时尽快的请求到服务器端的数据,故意将ajax请求写在onShow钩子函数里,而不是vue 的 mounted函数里;

mpvue-编写微信小程序总结

我们来看看这样一个需求,下图所示的页面

(2)路由

在mpvue中没有继续延用vue路由的写法,而是继承小程序的一套解决方案,在工作中我们经常通过路由来传递参数,比如下面代码所示:

//在index页面,我们想跳转到apply页面,并传递id参数

let id = 10
const url = '/pages/apply/main?id=' + id
wx.navigateTo({ url})

小程序方法获取id

// 在apply.vue页面中
onLoad (options) {
let id = options.id
}
//注意:必须是在onLoad钩子函数往后的生命周期中获取
onShow (options) {
let id = options.id
}
上一篇:mysql数据库导入导出 查询 修改表记录


下一篇:Linux核心命令使用方法