百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2025-01-29 16:47 45 浏览

作者 | 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 -1-1 到现在的毫秒数

    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-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 的死锁系列：锁的类型以及加锁原理了解一下！
?带血的战士| 吴忌寒传

相关推荐

驱动网卡（怎么从新驱动网卡）
驱动网卡（怎么从新驱动网卡）

网卡一般是指为电脑主机提供有线无线网络功能的适配器。而网卡驱动指的就是电脑连接识别这些网卡型号的桥梁。网卡只有打上了网卡驱动才能正常使用。并不是说所有的网卡一插到电脑上面就能进行数据传输了，他都需要里面芯片组的驱动文件才能支持他进行数据传输...

2026-01-30 00:37 liuian

win10更新助手装系统（微软win10更新助手）

1、点击首页“系统升级”的按钮，给出弹框，告诉用户需要上传IMEI码才能使用升级服务。同时给出同意和取消按钮。华为手机助手2、点击同意，则进入到“系统升级”功能华为手机助手华为手机助手3、在检测界面，...

windows11专业版密钥最新（windows11专业版激活码永久）

 Windows11专业版的正版密钥，我们是对windows的激活所必备的工具。该密钥我们可以通过微软商城或者通过计算机的硬件供应商去购买获得。获得了windows11专业版的正版密钥后，我...

手机删过的软件恢复（手机删除过的软件怎么恢复）
手机删过的软件恢复（手机删除过的软件怎么恢复）

操作步骤：1、首先，我们需要先打开手机。然后在许多图标中找到带有[文件管理]文本的图标，然后单击“文件管理”进入页面。2、进入页面后，我们将在顶部看到一行文本：手机，最新信息，文档，视频，图片，音乐，收藏，最后是我们正在寻找的[更多]，单击...

2026-01-29 23:55 liuian

一键ghost手动备份系统步骤（一键ghost 备份）

　　步骤1、首先把装有一键GHOST装系统的U盘插在电脑上，然后打开电脑马上按F2或DEL键入BIOS界面，然后就选择BOOT打USDHDD模式选择好，然后按F10键保存，电脑就会马上重启。　　步骤...

怎么创建局域网（怎么创建局域网打游戏）

　　1、购买路由器一台。进入路由器把dhcp功能打开　　2、购买一台交换机。从路由器lan端口拉出一条网线查到交换机的任意一个端口上。　　3、两台以上电脑。从交换机任意端口拉出网线插到电脑上（电脑设置...

精灵驱动器官方下载（精灵驱动手机版下载）

是的。驱动精灵是一款集驱动管理和硬件检测于一体的、专业级的驱动管理和维护工具。驱动精灵为用户提供驱动备份、恢复、安装、删除、在线更新等实用功能。1、全新驱动精灵2012引擎，大幅提升硬件和驱动辨识能力...

一键还原系统步骤（一键还原系统有哪些）

1、首先需要下载安装一下Windows一键还原程序，在安装程序窗口中，点击“下一步”，弹出“用户许可协议”窗口，选择“我同意该许可协议的条款”，并点击“下一步”。　　2、在弹出的“准备安装”窗口中，可...

电脑加速器哪个好（电脑加速器哪款好）

我认为pp加速器最好用，飞速土豆太懒，急速酷六根本不工作。pp加速器什么网页都加速，太任劳任怨了！以上是个人观点，具体性能请自己试。ps：我家电脑性能很好。迅游加速盒子是可以加速电脑的。因为有过之...

任何u盘都可以做启动盘吗（u盘必须做成启动盘才能装系统吗）

是的，需要注意，U盘的大小要在4G以上，最好是8G以上，因为启动盘里面需要装系统，内存小的话，不能用来安装系统。内存卡或者U盘或者移动硬盘都可以用来做启动盘安装系统。普通的U盘就可以，不过最好U盘...

u盘怎么恢复文件（u盘文件恢复的方法）

开360安全卫士，点击上面的“功能大全”。点击文件恢复然后点击“数据”下的“文件恢复”功能。选择驱动接着选择需要恢复的驱动，选择接入的U盘。点击开始扫描选好就点击中间的“开始扫描”，开始扫描U盘数据。...

系统虚拟内存太低怎么办（系统虚拟内存占用过高什么原因）

1.检查系统虚拟内存使用情况，如果发现有大量的空闲内存，可以尝试释放一些不必要的进程，以释放内存空间。2.如果系统虚拟内存使用率较高，可以尝试增加系统虚拟内存的大小，以便更多的应用程序可以使用更多...

剪贴板权限设置方法（剪贴板访问权限）
剪贴板权限设置方法（剪贴板访问权限）

1、首先打开iphone手机，触碰并按住单词或图像直到显示选择选项。2、其次，然后选取“拷贝”或“剪贴板”。3、勾选需要的“权限”，最后选择开启，即可完成苹果剪贴板权限设置。仅参考1.打开苹果手机设置按钮,点击【通用】。2.点击【键盘】,再...

2026-01-29 21:37 liuian

平板系统重装大师（平板重装win系统）

如果你的平板开不了机，但可以连接上电脑，那就能好办，楼主下载安装个平板刷机王到你的个人电脑上，然后连接你的平板，平板刷机王会自动识别你的平板，平板刷机王上有你平板的我刷机包，楼主点击下载一个，下载完成...

联想官网售后服务网点（联想官网售后服务热线）

联想3c服务中心是联想旗下的官方售后，是基于互联网O2O模式开发的全新服务平台。可以为终端用户提供多品牌手机、电脑以及其他3C类产品的维修、保养和保险服务。根据客户需求层次，联想服务针对个人及家庭客户...

一周热门
最近发表
标签列表