哟，2020 年了，用 Vue 做一个自己的小程序吧！| 原力计划

哟，2020 年了，用 Vue 做一个自己的小程序吧！| 原力计划

• 来源:网络
• 更新日期:2020-05-11

摘要：今天，我们来学习一下如何使用 vue 进行微信小程序的搭建，感受一下使用 Vue 做小程序的魔力。

前言

今天，我们来学习一下如何使用 vue 进行微信小程序的搭建，感受一下使用 Vue 做小程序的魔力。

生命周期

1. Vue 的生命周期

什么是 Vue 生命周期？简单来说，Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载 Dom →渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。Vue 生命周期的作用，在于它的生命周期中有多个事件钩子，让我们在控制整个 Vue 实例的过程时更容易形成好的逻辑。

2. 微信小程序页面生命周期

3. uni-app 生命周期

1. 应用生命周期

当使用 uni-app 进行项目的创建的时候，会在入口文件 App.vue 中自动生成应用生命周期的大致结构：

2. 页面生命周期

具体内容可看官网文档 ：uni-app 生命周期（https://uniapp.dcloud.io/frame?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（https://blog.csdn.net/Ms_yjk/article/details/104748084）

关于此项目微信小程序开发，你必须知道的知识

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 )

保存图片到系统相册。

平台差异说明

注意

可以通过用户授权 API 来判断用户是否给应用授予相册的访问权限 https://uniapp.dcloud.io/api/other/authorize

H5 没有 API 可触发保存到相册行为，下载图片时浏览器会询问图片存放地址。

具体的一些属性和方法可阅读官方文档 uni-app

2. 如何实现？

项目实现中，本人遇到的 bug 和一些注意问题

页面不显示

查看 pages.json 是否添加了相关的页面以及配置。

关于 flex 布局，图片显示的问题

论坛发布过这个问题：uni-app 创建微信小程序 flex 布局问题（https://bbs.csdn.net/topics/396522643）

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 问题

原文链接：

https://blog.csdn.net/ms_yjk/article/details/105921002

更多精彩推荐

一文浓缩 60 年，程序员不可不知的开源秘史！

CSDN 总部落户长沙，共建中国开发者产业中心城市！

AI 修复 100 年前晚清影像喜提热搜，有穿越内味儿了！

CycleGan 人脸转为漫画脸，牛掰的知识又增加了！| 附代码

触发死锁怎么办？MySQL 的死锁系列：锁的类型以及加锁原理了解一下！

带血的战士 | 吴忌寒传

你点的每个 " 在看 "，我都认真当成了喜欢