小程序凭借免安装,即开即用,用完就走等优势,加之小程序基于微信坐拥10亿用户,使得许多商户入驻小程序,它将线上与线下结合极大地促进了新零售的消费模式。总之小程序的发展前景是很可观很值得看好。

目前小程序开发主要有三种方式,原生微信小程序、mpvue和wepy微信小程序开发框架等,下图是三个开发框架的对比

小程序开发框架

mpvue是美团点评开源的一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心,mpvue修改了Vue.js的runtime和compiler实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套Vue.js开发体验。开源当天收获六千七百个star。

mpvue使得同一套代码能同时运行在小程序和web端,能够实现多端复用,如果你已经有vue的开发经验,mpvue开发小程序是一个很不错的选择,无需学习原生的小程序语法就能快速上手。

下面将介绍如何使用mpvue快速开发一个微信小程序

开发环境:nodejs+vue-cli+微信开发者工具

vue-cli是vue提供的一个官方的脚手架,使用如下命令:vueinitmpvue/mpvue-quickstartmy-project快速创建一个基于mpvue-quickstart模板项目,进入my-project执行npminstall和npmrundev后,会生成一个dist目录,其中是小程序相关的代码,最后将my-project目录导入微信开发者工具,一个mpvue项目就启动了。

运行效果如下图所示:

小程序运行效果

项目代码结构如下图所示:

小程序项目结构代码

其中pages目录下面是小程序的页面,每个页面的目录结构都是类似的包含一个vue单文件组件和一个main.js文件,可以很方便的使用组件化的方式开发小程序。

Vue的生命周期和小程序的生命周期在mpvue中是兼容的,但是推荐使用vue生命周期,因为小程序的生命周期在其他端如web端是没有相关生命周期的,如小程序onLaunch可以用vue的created代替,但是有些生命周期是小程序独有的如onPullDownRefresh,这时只能使用小程序自带的生命周期函数。

下面是一个小程序页面的完整代码实例,在pags目录下面建立一个文件夹,包含一个welcome.vue和main.js文件。

微信小程序开发框架

运行效果如下图:

小程序开发最终结果图

评论

电子邮件地址不会被公开。