承接国内外服务器租用托管、定制开发、网站代运营、网站seo优化托管接单、网站代更新,新老站点皆可!!咨询QQ:3787320601

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

管理员 2023-03-25 09:56:00 小程序 66 ℃ 0 评论 14481字 收藏

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


作者 | 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 生命周期(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. 如何摹拟触屏事件?

大致思路:

  1. 给容器绑定两个触屏事件 touchstart 和 touchend

  2. 用户按下屏幕事件

    a. 记录用户按下屏幕的时间 Date.now 时间戳 返回 1970 ⑴⑴ 到现在的毫秒数

    b. 记录用户按下屏幕的坐标 x 和 y

  3. 用户离开屏幕事件

    1. 记录用户离开屏幕的时间 Date.noew

    2. 记录用户离开屏幕的坐标 x 和 y

    3. 根据两个时间 运算 判断 用户按下屏幕时长会不会合法

    4. 根据两对坐标 判断距离会不会合法 判断 滑动的方向


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 返回参数说明


注意

  1. 可以通过用户授权API来判断用户会不会给利用授与相册的访问权限https://uniapp.dcloud.io/api/other/authorize

  2. 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⑴994《数据元和交换格式·信息交换·日期和时间表示法》与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 的死锁系列:锁的类型和加锁原理了解一下!

☞带血的战士| 吴忌寒传

文章来源:丸子建站

文章标题:哟,2020 年了,用 Vue 做一个自己的小程序吧! | 原力计划

https://www.wanzijz.com/view/3821.html

X

截屏,微信识别二维码

微信号:weimawl

(点击微信号复制,添加好友)

打开微信