作者 | End_less_，责编 | 夕颜
来源 | CSDN博客
头图 | CSDN 下载自视觉中国
出品 | CSDN（ID：CSDNnews）
前言
今天，我们来学习一下如何使用vue进行微信小程序的搭建，感受一下使用Vue做小程序的魔力。
生命周期
1. Vue的生命周期
什么是Vue生命周期？简单来说，Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。Vue生命周期的作用，在于它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
2. 微信小程序页面生命周期
3. uni-app生命周期
1. 应用生命周期
当使用uni-app进行项目的创建的时候，会在入口文件App.vue中自动生成应用生命周期的大致结构：
2. 页面生命周期
具体内容可看官网文档 ：uni-app 生命周期（?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F）
项目搭建
项目使用的编辑器：VSCode,微信开发者工具，node环境，vue环境…
1. 创建项目
使用命令行：
vue create -p dcloudio/uni-preset-vue projectName
其中 projectName是项目名称，可自定义。
由于使用的是scss样式，需要安装sass-loader插件
命令行：npm i sass-loader node-sass，如果一直下载不成功，建议使用淘宝镜像。
2. 在微信小程序开发工具导入项目
首先使用命令行：npm run dev:mp-weixin，运行项目
3. 使用VSCode进行项目编写
当第二步完成之后，将项目文件夹在VSCode中打开，即可进行项目的编写。
项目结构
关于Vue知识，你需要了解哪些？
具体可看博客 --> Vue Knowledge（）
关于此项目微信小程序开发，你必须知道的知识
1. 如何将数据挂载在全局？
1.使用Vue原型进行数据挂载
例如:
Vue.prototype.testData = "test"//输出onLoad{console.log(this.testData) //"test"}
2.getApp.globalData
var app = getApp;console.log(app.globalData.helloFromApp); // 调用全局变量app.test; // 调用全局方法
2. image中的mode属性
在实现微信小程序时，肯定会处理图片的一些事件，缩略图，原图，显示样式等等都是需要考虑的。
3. 如何模拟触屏事件？
大致思路:
给容器绑定两个触屏事件 touchstart 和 touchend
用户按下屏幕事件
a. 记录用户按下屏幕的时间 Date.now 时间戳 返回 1970 -1-1 到现在的毫秒数
b. 记录用户按下屏幕的坐标 x 和 y
用户离开屏幕事件
记录用户离开屏幕的时间 Date.noew
记录用户离开屏幕的坐标 x 和 y
根据两个时间 运算 判断 用户按下屏幕时长是否合法
根据两对坐标 判断距离是否合法 判断 滑动的方向
4. 微信小程序轮播图如何实现？
一些基础知识：
1. 自动轮播 autoplay
2. 指示器 indicator-dots
3. 衔接轮播 circular
4. swiper标签 默认的高度是150px
5. image标签默认的宽度320px => 基本样式中重置了100%
默认的高度240px
6. 要计算图片的宽度和高度的比例 图片的宽度/高度
7. 把图片的比例也写到swiper标签样式中去
8. swiper-item 默认宽高是继承父元素的100%
更多相关知识可以在官方文档中进行查看 scroll-view 微信开放文档
5. 如何在微信小程序中实现Promise请求？
众所周知，在微信小程序中，其原生语言是不支持promise请求的。同时，uni-app的请求不能够方便的添加 “请求中” 效果，并且其返回值是一个数组。
封装思路
1.基于原生的promise进行封装
创建request.js文件：
//ES6export default (params) => {
// 加载中 uni.showLoading({ title: "Loading..." })
return new Promise((resolve, reject) => { wx.request({ ...params, success (res) { resolve(res.data); }, fail (err) { reject(err) }, complete { uni.hideLoading } }) })}
2.将其挂载在Vue的原型上
3.通过this.request的方式进行请求
每次进行获取页面数据请求中，直接使用this.request进行请求数据，例如：
6. 如何下载文件到本地?
1.函数介绍
1. uni.downloadFile(OBJECT)
下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
OBJECT 参数说明
注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用uni.saveFile，才能在应用下次启动时访问得到。
success 返回参数说明
注意：网络请求的超时时间可以统一在 manifest.json 中配置 networkTimeout。
2. uni.saveImageToPhotosAlbum(OBJECT)
保存图片到系统相册。
平台差异说明
OBJECT 参数说明
success 返回参数说明
注意
可以通过用户授权API来判断用户是否给应用授予相册的访问权限
H5没有API可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。
具体的一些属性和方法可阅读官方文档 uni-app
2.如何实现？
项目实现中，本人遇到的bug和一些注意问题
页面不显示
查看pages.json是否添加了相关的页面以及配置。
关于flex布局，图片显示的问题
论坛发布过这个问题：uni-app创建微信小程序 flex布局问题（）
moment.js 中英文转换
报错信息：
但是在node_modules中可以找到文件：
解决方法
1.
import moment from 'moment'moment.locale('zh-cn')
2.
import moment from 'moment'import 'moment/locale/zh-cn'
3.
moment.locale('zh-cn', { months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'), monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'), weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'), weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'), weekdaysMin: '日_一_二_三_四_五_六'.split('_'), longDateFormat: { LT: 'Ah点mm分', LTS: 'Ah点m分s秒', L: 'YYYY-MM-DD', LL: 'YYYY年MMMD日', LLL: 'YYYY年MMMD日Ah点mm分', LLLL: 'YYYY年MMMD日ddddAh点mm分', l: 'YYYY-MM-DD', ll: 'YYYY年MMMD日', lll: 'YYYY年MMMD日Ah点mm分', llll: 'YYYY年MMMD日ddddAh点mm分' }, meridiemParse: /凌晨|早上|上午|中午|下午|晚上/, meridiemHour: function (h, meridiem) { let hour = h; if (hour === 12) { hour = 0; } if (meridiem === '凌晨' || meridiem === '早上' || meridiem === '上午') { return hour; } else if (meridiem === '下午' || meridiem === '晚上') { return hour + 12; } else { // '中午' return hour >= 11 ? hour : hour + 12; } }, meridiem: function (hour, minute, isLower) { const hm = hour * 100 + minute; if (hm < 600) { return '凌晨'; } else if (hm < 900) { return '早上'; } else if (hm < 1130) { return '上午'; } else if (hm < 1230) { return '中午'; } else if (hm < 1800) { return '下午'; } else { return '晚上'; } }, calendar: { sameDay: function { return this.minutes === 0 ? '[今天]Ah[点整]' : '[今天]LT'; }, nextDay: function { return this.minutes === 0 ? '[明天]Ah[点整]' : '[明天]LT'; }, lastDay: function { return this.minutes === 0 ? '[昨天]Ah[点整]' : '[昨天]LT'; }, nextWeek: function { let startOfWeek, prefix; startOfWeek = moment.startOf('week'); prefix = this.diff(startOfWeek, 'days') >= 7 ? '[下]' : '[本]'; return this.minutes === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm'; }, lastWeek: function { let startOfWeek, prefix; startOfWeek = moment.startOf('week'); prefix = this.unix < startOfWeek.unix ? '[上]' : '[本]'; return this.minutes === 0 ? prefix + 'dddAh点整' : prefix + 'dddAh点mm'; }, sameElse: 'LL' }, ordinalParse: /\d{1,2}(日|月|周)/, ordinal: function (number, period) { switch (period) { case 'd': case 'D': case 'DDD': return number + '日'; case 'M': return number + '月'; case 'w': case 'W': return number + '周'; default: return number; } }, relativeTime: { future: '%s内', past: '%s前', s: '几秒', m: '1 分钟', mm: '%d 分钟', h: '1 小时', hh: '%d 小时', d: '1 天', dd: '%d 天', M: '1 个月', MM: '%d 个月', y: '1 年', yy: '%d 年' }, week: { // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效 dow: 1, // Monday is the first day of the week. doy: 4 // The week that contains Jan 4th is the first week of the year. } });
4. 更新moment.js版本
npm add moment@2.24.0
亲测第三种，第四种方法有效。
总结
使用vue进行微信小程序的编写，写法也类似Vue框架开发Web网页一样，使用组件，mpvue会自动转化成源生代码适应于小程序。
优点：组件化，易于维护，可以重复使用，节省开发成本。
数据绑定，事件处理，Scoped局部样式，使用HTML标签构建页面。
这样最大化的保持和网页应用开发一致，减少了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了降低迁移成本的可能。
数据方面更新更为简易，不需要使用原生的SetData方法。还有WebPack自动构建，熟悉Vue的人易于上手。
优化了很多小程序的不足点（不能使用npm，不能使用css预处理器，原生是callback语法等等）
缺点：slot问题
原文链接：
?一文浓缩 60 年，程序员不可不知的开源秘史！
?CSDN总部落户长沙，共建中国开发者产业中心城市！
?AI 修复 100 年前晚清影像喜提热搜，有穿越内味儿了！
?CycleGan人脸转为漫画脸，牛掰的知识又增加了！| 附代码
?触发死锁怎么办？MySQL 的死锁系列：锁的类型以及加锁原理了解一下！
?带血的战士| 吴忌寒传
许多做产品的同学经常会有这样的疑问：计划开发的移动端产品到底是用 H5 好还是用小程序好？甚至很多开发同学也搞不清楚这两者在具体使用中的优劣。那么相信读完此篇，便可让你对二者之优劣利弊了然于胸，再也不必纠结。
大体上讲，H5和小程序并不具备什么可比性。只是很多移动端的场景下，这两种选择都能实现产品的大部分功能，加之其各领风骚好几年，就更难抉择了。
我们经常说的 H5 是一种不标准的叫法，可以理解为只是一种技术，大家说得最多的 H5 主要是指用在移动端的网页，其实 PC 电脑版也一样可以使用 H5 技术。而小程序，这里特指微信小程序，是在微信 APP 基础上支持的一种应用形式，完全依赖于微信 APP 环境。
以上，是大概念上的区分，下面，我们就来详细对比一下其他方面。
一、运行环境
这里的 H5 既然是网页，那么依赖的外壳主要是浏览器，因此只要有浏览器，就可以使用。比如手机内置的浏览器，APP 的 web-view 组件，以及小程序提供的 web-view 组件，都可以打开 H5 页面。
注意，小程序的 web-view 可以打开 H5，但并不是小程序“跳转”到了 H5 页面，这个 H5 还是小程序的外壳内，仍然有很多限制。
前面说了，小程序只能依赖微信客户端，也就是说只能在微信里打开。那么，如果你的产品需要通过短信通知用户带上访问地址，就无法用小程序实现了。而 H5 页面，则可以在短信正文中直接用手机内置浏览器打开。
但是，微信本身是跨平台的，因此无论是安卓上的微信，苹果上的微信，都是可以使用小程序的。甚至 QQ 浏览器也支持了部分小程序的入驻。
二、系统权限
这里的系统权限，可以理解为隐私级别比较高的，如通讯录，或能调用硬件的，比如蓝牙功能等。从这个角度看，H5 本身可以说几乎是没有什么系统权限的。虽然也有摄像头之类的接口，但是重度依赖浏览器能力，兼容性有限。
而小程序，由于依赖微信客户端本身，所以微信小程序团队将客户端的很多能力开放给了小程序环境，当然，前提是你给微信也授权了相关的能力，比如允许访问麦克风，允许访问相册等。
所以，如果你的产品重度依赖这些能力，那小程序一定是不二之选，因为 H5 很难做到这些，对于很多小程序提供的能力，H5 是根本没有可能实现的。
三、能力限制
前面提到了系统权限层面的差异，其实也是一种能力限制。除此之外，还有一些能力是微信本身的策略限制的，比如 H5 在微信里可以直接分享朋友圈，而小程序目前就只能转发好友或群。对于朋友圈，就只能生成带小程序码的图片发到朋友圈。
而对于好友或群，小程序又提供了卡片式的分享界面，看起来很高端，信息也多，并且能追踪用户行为。这一点，H5 又无法做到。
再比如支付能力，小程序只支持微信支付，而 H5 里可以选择使用其他支付平台提供的支付方式。
四、用户体验
分享卡片看上去比普通的 H5 链接分享体验要好；而朋友圈的 H5 分享形式，和图片识别小程序码的形式到底哪个好也不好说。不过，如果你的产品被判定有违规行为，那么 H5 的链接是很容易匹配屏蔽的，可以直接导致分享 H5 页面只能自己可见，别人看不到。
但是，小程序的分享图虽然不太可能封禁，但小程序是微信的呀，那还不是分分钟就关掉。所以在抗风险方面，二者各有千秋。如果是 H5，那就多准备几个域名；如果是小程序，就直接多上线几个小程序，保证封禁时损失降到最低。
除了形式上的体验差异，性能上也是有差异的。小程序基于微信客户端实现，对解析进行了优化，并且一旦首次打开小程序，可以直接缓存很多资源。因此，在使用小程序时可以明显感觉很流畅，接近原生 APP 的体验。
而 H5 本质上还是网页，跟之前在 PC 上浏览网页没区别，每次要请求各种图片样式资源，在浏览器内核里渲染，因此体验会差一些。
五、访问入口
在访问入口这个点上，H5 的核心竞争力就是能在微信之外玩，不依赖微信本身。而小程序的优势，就是有 50+ 微信提供的场景入口，并且聊天界面顶部的“最近使用”和“我的小程序”这个入口，相对 H5 来说是有绝对优势的。
用户关闭之后，H5 页面如果想继续访问，可能会通过收藏入口，或者转发给“文件传输助手”等聊天界面保存，还可以缩小到图标稍后阅读等等。本质上还是跟 PC 时代的浏览器收藏夹差不多，需要有个地方把 H5 的链接地址保存下来，方便下次访问。如果没有保存，下次就很难找到了。
至于微信内的搜索，是可以同时搜索 H5 和小程序的，可以根据 H5 的名字和内容、小程序的名字和介绍来搜索。这里 H5 有个天然优势就是，只要你的链接在各大搜索引擎提交过，那么使用其他的搜索引擎也能搜出这个 H5，比如百度搜索。
六、用户触达
H5 本身是没有用户触达能力的，如果用户关掉了页面，页面就再也没有办法主动触达该用户了。因此，传统的营销方式都是采用邮件营销或短信营销等来触达用户。
后来，我们有了微信服务号，就多了服务号模板消息的触达方式。不管是哪种方式，都是想方设法把链接地址推送给用户，用户点击时再通过手机内置浏览器或微信内置浏览器访问页面。
而小程序天然支持模板消息，虽然有一周的推送时间限制，但是常规的业务已经足够了。只要用户使用你的小程序，你就可以通过某种操作收集 formid，然后即可在一周之内的任意时间触达用户。
七、开发成本
对于简单功能，H5 和小程序的开发成本是差不多的，开发模式和语言风格也类似。而对于前面说到的系统能力，可能就只有小程序才能实现，H5 根本做不了。此外，小程序自成体系，因此也有一些现成的组件可以使用，如果刚好覆盖了你的产品功能就能提升效率。
虽然 H5 也有很多框架组件可以用，但由于过于庞杂，有选择成本，且技术栈和 UI 五花八门，可能还有融合和修改的成本。而小程序组件的 UI 大部分已经确定，只有很少的部分可以修改，所以一旦认定使用小程序，这部分成本会低很多。
总体上来讲，我觉得还是可以认为小程序的开发成本更低一些。
八、迭代周期
开发成本低，未必迭代周期就短。对于 H5 我们可以随时发布上线，不用受任何牵制。而小程序的特点，就是每次提交版本都要经过微信方面的审核，且审核时间的长短很随机，着急上线的项目就很无奈了。
至于其他速度，取决于开发人员技能熟练程度，系统复杂度，对基础能力的依赖等，就不好估算了。
九、外部限制
由于小程序依赖微信平台，因此微信平台要对内容安全等事项负责，比如你想搞个有 UGC 的产品，用 H5 可能还可以趁着监管宽松无证裸奔一阵，或者说做大了再补证。
而小程序，就很可能完全不能过审，根本上不了线。比如试听类，社交类，都有对应的资质，而这个资质还可能很难获得。
类似的，H5 页面可以不用搞 HTTPS，有个网站就能玩，甚至用工具做个小活动也都可以玩。但是小程序，从后端开始就有限制，要求域名备案+HTTPS，一定程度上也是一点成本。
此外，小程序对文件大小也有限制，虽然现在已经支持分包加载，但是在文件大小方面，H5 本身是没有什么限制的。只是实际开发的时候，要照顾用户的体验，不能让页面打开太慢。
综上所述，H5 和小程序在不同的场景下各有千秋，具体使用哪一种要看你看重哪些能力。H5 和小程序都是实现产品的工具，选择工具最擅长的能力，其他方面再想办法来弥补即可。最后，再附上完整表格一份，看你是否已经明了二者的差异：
如果你还有其他疑问，欢迎留言与我交流。
作者：姬小光，微信公众号“姬小光（ID：hi-laser）”
本文由 @姬小光 原创发布于人人都是产品经理。未经许可，禁止转载。