作者|_less_，责编|夕颜
出品|CSDN（ID：CSDNnews）
前言
今天，我们来学习一下如何使用vue进行微信小程序的搭建，感受一下使用Vue做小程序的魔力。
生命周期
1.Vue的生命周期
什么是Vue生命周期？简单来说，Vue实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为Vue的生命周期。Vue生命周期的作用，在于它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
2.微信小程序页面生命周期
3.uni-app生命周期
1.应用生命周期
当使用uni-app进行项目的创建的时候，会在入口文件中自动生成应用生命周期的大致结构：
2.页面生命周期
具体内容可看官网文档：uni-app生命周期（）
项目搭建
项目使用的编辑器：VSCode,微信开发者工具，node环境，vue环境…
1.创建项目
使用命令行：
vuecreate-pdcloudio/uni-preset-vueprojectName
其中projectName是项目名称，可自定义。
由于使用的是scss样式，需要安装sass-loader插件
命令行：npmisass-loadernode-sass，如果一直下载不成功，建议使用淘宝镜像。
2.在微信小程序开发工具导入项目
首先使用命令行：npmrundev:mp-weixin，运行项目
3.使用VSCode进行项目编写
当第二步完成之后，将项目文件夹在VSCode中打开，即可进行项目的编写。
项目结构
关于Vue知识，你需要了解哪些？
具体可看博客--VueKnowledge（）
关于此项目微信小程序开发，你必须知道的知识
1.如何将数据挂载在全局？
1.使用Vue原型进行数据挂载
例如:
="test"//输出onLoad{()//"test"}2.
varapp=getApp;();//调用全局变量;//调用全局方法
2.image中的mode属性
在实现微信小程序时，肯定会处理图片的一些事件，缩略图，原图，显示样式等等都是需要考虑的。
3.如何模拟触屏事件？
大致思路:
给容器绑定两个触屏事件touchstart和touch
用户按下屏幕事件
a.记录用户按下屏幕的时间时间戳返回1970-1-1到现在的毫秒数
b.记录用户按下屏幕的坐标x和y
用户离开屏幕事件
记录用户离开屏幕的时间
记录用户离开屏幕的坐标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进行封装
创建文件：
//ES6exportdefault(params)={
//加载中({title:"Loading"})
returnnewPromise((resolve,reject)={({params,success(res){resolve();},fail(err){reject(err)},complete{}})})}2.将其挂载在Vue的原型上
3.通过的方式进行请求
每次进行获取页面数据请求中，直接使用进行请求数据，例如：
6.如何下载文件到本地?
1.函数介绍
1.(OBJECT)
下载文件资源到本地，客户端直接发起一个HTTPGET请求，返回文件的本地临时路径。
在各个小程序平台运行时，网络相关的API在使用前需要配置域名白名单。
OBJECT参数说明
注：文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用，才能在应用下次启动时访问得到。
success返回参数说明
注意：网络请求的超时时间可以统一在中配置networkTimeout。
2.(OBJECT)
保存图片到系统相册。
平台差异说明
OBJECT参数说明
success返回参数说明
注意
可以通过用户授权API来判断用户是否给应用授予相册的访问权限
H5没有API可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。
具体的一些属性和方法可阅读官方文档uni-app
2.如何实现？
项目实现中，本人遇到的bug和一些注意问题
页面不显示
查看是否添加了相关的页面以及配置。
关于flex布局，图片显示的问题
论坛发布过这个问题：uni-app创建微信小程序flex布局问题（）
中英文转换
报错信息：
但是在node_modules中可以找到文件：
解决方法
1.
importmomentfrom'moment'('zh-cn')2.
importmomentfrom'moment'import'moment/locale/zh-cn'
3.
('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){lethour=h;if(hour===12){hour=0;}if(meridiem==='凌晨'||meridiem==='早上'||meridiem==='上午'){returnhour;}elseif(meridiem==='下午'||meridiem==='晚上'){returnhour+12;}else{//'中午'returnhour=11?hour:hour+12;}},meridiem:function(hour,minute,isLower){consthm=hour*100+minute;if(hm600){return'凌晨';}elseif(hm900){return'早上';}elseif(hm1130){return'上午';}elseif(hm1230){return'中午';}elseif(hm1800){return'下午';}else{return'晚上';}},calar:{sameDay:function{===0?'[今天]Ah[点整]':'[今天]LT';},nextDay:function{===0?'[明天]Ah[点整]':'[明天]LT';},lastDay:function{===0?'[昨天]Ah[点整]':'[昨天]LT';},nextWeek:function{letstartOfWeek,prefix;startOfWeek=('week');prefix=(startOfWeek,'days')=7?'[下]':'[本]';===0?prefix+'dddAh点整':prefix+'dddAh点mm';},lastWeek:function{letstartOfWeek,prefix;startOfWeek=('week');prefix=?'[上]':'[本]';===0?prefix+'dddAh点整':prefix+'dddAh点mm';},sameElse:'LL'},ordinalParse:/\d{1,2}(日|月|周)/,ordinal:function(number,period){switch(period){case'd':case'D':case'DDD':returnnumber+'日';case'M':returnnumber+'月';case'w':case'W':returnnumber+'周';default:returnnumber;}},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/T7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO8601:1988等效dow:1,//Mondayisthefirstdayoftheweek.doy:4//TheweekthatcontainsJan4thisthefirstweekoftheyear.}});4.更新版本
npmaddmoment@2.24.0
亲测第三种，第四种方法有效。
总结
使用vue进行微信小程序的编写，写法也类似Vue框架开发Web网页一样，使用组件，mpvue会自动转化成源生代码适应于小程序。
优点：组件化，易于维护，可以重复使用，节省开发成本。
数据绑定，事件处理，Scoped局部样式，使用HTML标签构建页面。
这样最大化的保持和网页应用开发一致，减少了前端人员切换到小程序的学习理解成本，也为原先使用Vue开发的网页应用移植到小程序平台提供了降低迁移成本的可能。
数据方面更新更为简易，不需要使用原生的SetData方法。还有WebPack自动构建，熟悉Vue的人易于上手。
优化了很多小程序的不足点（不能使用npm，不能使用css预处理器，原生是callback语法等等）
缺点：slot问题
☞一文浓缩60年，程序员不可不知的开源秘史！
☞CSDN总部落户长沙，共建中国开发者产业中心城市！
☞AI修复100年前晚清影像喜提热搜，有穿越内味儿了！
☞CycleGan人脸转为漫画脸，牛掰的知识又增加了！|附代码
☞触发死锁怎么办？MySQL的死锁系列：锁的类型以及加锁原理了解一下！
☞带血的战士|吴忌寒传
