17666030540

网站建设 APP开发 小程序

KNOWLEDGE/知识

分享你我感悟

您当前位置>主页 > 知识 > 小程序 >

5分钟学会小程序开发

发表时间:2020-05-17 18:36

文章来源:快明科技

浏览次数:

“小程序是一个不需要下载安装就可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或者搜一下即可打开应用。

也体现了用完即走的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载 ”

——张小龙


这是张小龙用小程序内测时发在朋友圈的一段话对小程序进行了定义。


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


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

/

微信小程序

mpvue

wepy

语法规范

小程序

开发规范

Vuejs

开发规范

类vue

开发规范

标签集合

小程序

标签

Html标签

小程序标签

小程序标签

样式规范

wxss

sass,less

postcss

sass,less

slyus

组件化

无组件化

机制

vue.js

组件规范

自定义组件规范

多端复用

不可复用

支持

替换为h5

支持

替换为h5

自动构建

本身无

自动构建

Webpack

构建

框架内置自动构建

上手成本

全新学习

熟悉Vuejs

即可

Vuejs和wepy

集中

数据管理

不支持

使用vuex

实现

不支持


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


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



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


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


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


运行效果如下图所示:


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


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


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

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

运行效果如下图:

更多内容请参考官方文档:http://mpvue.com/mpvue/



12

往期精彩

· 

· 

· 

· 

本文由快明科技整理发布,如需转载请联系852657156@qq.com

相关案例查看更多