如何使用vue进行微信小程序的搭建？

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

如何使用vue进行微信小程序的搭建？

作者 | , 编辑 | 夕颜

来源 | CSDN博客

标题图片| CSDN视觉中国下载

出品| CSDN（ID：）

前言

今天我们就来学习如何使用Vue构建微信小程序，感受一下使用Vue制作小程序的神奇之处。

生命周期

1.Vue生命周期

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

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

3.uni-app生命周期

1. 应用程序生命周期

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

2. 页面生命周期

具体内容请参见官网文档：uni-app生命周期(%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F)

项目建设

项目中使用的编辑器：微信开发工具、node环境、vue环境...

1. 创建项目

使用命令行：

vue create -p dcloudio/uni-preset-vue projectName

其中是项目名称，可以自定义。

由于使用了scss风格，所以需要安装sass-。

命令行：npm i sass-node-sass。 如果继续下载失败，建议使用淘宝镜像。

2、将项目导入微信小程序开发工具中

首先使用命令行：npm run dev:mp- 运行项目

3.用来写项目

第二步完成后，打开项目文件夹开始编写项目。

项目结构

关于 Vue，你需要了解什么？

详细内容请参见博客-->Vue()

本项目微信小程序开发你必须要知道的事

1、如何全局挂载数据？

1.使用Vue原型进行数据挂载

例如：

Vue.prototype.testData = "test"//输出onLoad{console.log(this.testData) //"test"}

2..

var app = getApp;console.log(app.globalData.helloFromApp); // 调用全局变量app.test; // 调用全局方法

2. image中的mode属性

在实现微信小程序时，肯定会处理一些图片的事件，比如缩略图、原图、显示样式等，都需要考虑。

3、如何模拟触摸屏事件？

大概的概念：

将两个触摸屏事件绑定到容器上

用户按下屏幕事件

A。 记录用户按下屏幕的时间。 Date.now时间戳返回从1970年-1-1到现在的毫秒数。

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

用户离开屏幕事件

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

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

根据两次时间计算判断用户在屏幕上的按下时间是否合法

根据两对坐标判断距离是否合法并确定滑动方向

4、微信小程序中如何实现轮播图片？

一些基础知识：

1.自动转盘

2. 指示点

3. 连接轮播

4.标签默认高度150px

5. 图片标签默认宽度为320px => 基本样式中重置为100%

默认高度 240 像素

6.计算图像的宽高比，图像的宽/高

7.将图像的比例写入标签样式

8.-item默认宽度和高度100%继承自父元素

更多相关知识可以查看官方文档-查看微信开放文档

5. 微信小程序中如何实现请求？

众所周知，在微信小程序中，其原生语言是不支持请求的。 同时uni-app的也不能轻易添加“请求”的效果，其返回值是一个数组。

封装思路

1.基于的封装

创建 .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.通过此提出请求。

每次请求获取页面数据时，请使用它。 直接请求数据，例如：

6. 如何下载文件到本地电脑？

1. 功能介绍

1. 大学 ()

如果要下载文件资源到本地，客户端直接发起HTTP GET请求，返回文件的本地临时路径。

各个小程序平台运行时，网络相关的API在使用前都需要配置域名白名单。

参数说明

注意：该文件的临时路径在应用程序当前启动过程中可以正常使用。 如果需要持久化如何使用vue进行微信小程序的搭建？，需要主动调用uni。 当应用程序下次启动时访问它。

返回参数说明

注意：网络请求的超时时间可以在.json中统一配置。

2.uni.um()

将图片保存到系统相册。

平台差异解释

参数说明

返回参数说明

注意

您可以使用用户授权 API 来确定用户是否已授予应用程序访问相册的权限。

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

具体属性和方法请阅读官方文档uni-app

2、如何实施？

项目实施过程中遇到的Bug和一些问题

页面不显示

检查pages.json是否添加了相关页面和配置。

关于flex布局和图像显示问题

这个问题发在论坛上：用uni-app创建微信小程序时的flex布局问题（）

.js中英转换

错误信息：

但这些文件可以在以下位置找到：

解决方案

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.更新.js版本

npm add moment@2.24.0

我亲自测试了第三种方法，发现第四种方法有效。

总结

使用vue编写微信小程序。 写法和开发Vue框架类似。 使用组件，mpvue会自动转换成源码来适配小程序。

优点：组件化、易于维护、可复用、节省开发成本。

数据绑定、事件处理、部分样式、使用 HTML 标签构建页面。

这样就*大限度地与Web应用开发保持一致，降低了前端人员转用小程序学习和理解成本，也为原本使用Vue开发Web应用移植到小程序平台提供了降低迁移成本的可能。

数据更新更简单，不需要使用原生方法。 还有自动构建，对于熟悉Vue的人来说很容易上手。

优化了小程序的很多缺点（不能使用npm、不能使用css预处理器、原生语法等）

缺点：插槽问题

原文链接：

☞一文浓缩 60 年，程序员不可不知的开源秘史！
☞CSDN总部落户长沙，共建中国开发者产业中心城市！
☞AI 修复 100 年前晚清影像喜提热搜，有穿越内味儿了！
☞CycleGan人脸转为漫画脸，牛掰的知识又增加了！| 附代码
☞触发死锁怎么办？MySQL 的死锁系列：锁的类型以及加锁原理了解一下！
☞带血的战士| 吴忌寒传

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等