微信小程序相关

目录

一、WXML与HTML的异同

二、WXSS和CSS的异同

三、微信小程序主要目录和文件的作用

四、小程序的双向绑定和vue的异同

五、微信小程序有哪些传值(传递数据)方法

六、小程序的生命周期函数

APP生命周期

Page生命周期

Component生命周期

七、小程序的原理

八、小程序的特点和优势

九、小程序与H5的区别

十、小程序和Vue写法的区别

十一、哪些方法可以提高小程序的应用速度

十二、小程序与原生App对比

十三、常用API

1. 页面跳转：

2. 网络请求：

3. 用户信息：

4. 设备信息：

5. 界面交互：

6. 媒体文件：

7. 支付：

8. 缓存：

十四、小程序的发布流程（开发流程）

常见问题

一、WXML与HTML的异同

同：

  1. 都是页面渲染语言，都使用类似的标签和属性描述网页的结构和内容
  2. 结构化文档：都支持将文档分为不同的元素和部分
  3. 样式与行为分离

异：

  1. 平台：WXML主要用于微信小程序开发，是微信小程序的一部分；HTML主要用于Web开发，用于构建网页
  2. 标签和属性：WXML是针对微信小程序，如`<view>`、`<text>`等标签，wx:if、wx:for等属性；HTML包含用于构建网页的通用标签和属性，如`<div>`、`<span>`、`<p>`等
  3. 小程序没有DOM树和window对象
  4. 标签名字不一样，且小程序标签更少，单一标签更多

二、WXSS和CSS的异同

WXSS（微信小程序样式表）和CSS（层叠样式表）

同：

  1. 样式定义：都定义页面元素的样式，包括字体、颜色、大小、布局
  2. 选择器：都使用选择器，例如标签选择器、类选择器、ID选择器等
  3. 属性和值：都使用类似的属性和值。如，`color`属性用于定义文本颜色，`font-size`属性用于定义字体大小等

异：

  1. 平台：WXSS主要用于微信小程序开发；CSS主要用于Web开发
  2. 单位：WXSS支持rpx；CSS使用px、em、rem。rpx是微信小程序中专门为适配不同屏幕尺寸而设计的单位，比px更加灵活
  3. WXSS仅支持部分CSS选择器，如，不支持::after伪元素
  4. WXSS提供全局样式与局部样式

三、微信小程序主要目录和文件的作用

1. app.json：全局配置文件，包括页面路径、窗口样式、导航栏样式、网络超时时间等。它定义了小程序的整体结构和行为

2. app.js：全局逻辑文件，如小程序的生命周期函数、全局数据等。可以定义App()函数，用于注册小程序的生命周期函数和全局数据

3. app.wxss：全局样式文件

4. pages目录：存放各个页面。每个页面通常包括一个.wxml文件（页面结构）、一个.js文件（页面逻辑）、一个.wxss文件（页面样式）和一个.json文件（页面配置）

5. utils目录：存放工具函数和公共代码。可以存放一些常用的函数、网络请求封装等

6. images目录：存放图片资源。

7. app.acss：对于使用了支付宝小程序的开发者，该文件用于定义小程序的全局样式，与app.wxss功能类似，但是针对支付宝小程序。

四、小程序的双向绑定和vue的异同

同：

1. 都是实现数据的双向绑定，即数据的改变可以自动更新到视图，视图的改变也可以自动更新到数据

2. 简化开发：简化开发流程，减少手动操作DOM的需求，提高开发效率

异：

1. 实现方式：在小程序通常需要手动监听数据变化，手动更新视图；Vue双向绑定是框架内置的特性，无需手动处理，框架会自动进行数据监听和更新视图

2. 响应式系统：小程序需要通过setData()方法手动更新数据；Vue通过数据劫持和依赖追踪实现数据的监听和更新

3. 语法：小程序 value="{{data}}" bindinput="setData"；Vue是v-model="data"

4. 生命周期：小程序页面手动编写，手动调用；Vue由框架自动调用

5. 跨平台：小程序主要用于微信平台；Vue用于Web开发、移动端开发等多种平台。

五、微信小程序有哪些传值(传递数据)方法

1. URL 参数传递：在页面路径后面添加参数进行传值，例如：/pages/index/index?id=1&name=abc，在目标页面的 onLoad 生命周期中可以通过 options 参数获取传递的值

2. Storage 存储：使用 wx.setStorageSync 或 wx.setStorage 方法将数据存储到本地缓存中，在目标页面中使用 wx.getStorageSync 或 wx.getStorage 方法获取数据

3. 全局数据传递：数据存储在 App 实例中的 globalData 属性中，在目标页面中使用 getApp().globalData 获取数据

4. 事件传递：通过触发事件来传递数据，例如在子组件中触发一个自定义事件，并通过事件对象传递数据，在父组件中监听该事件并获取传递的数据

5. 页面栈传递：使用小程序提供的页面栈来传递数据，通过 getCurrentPages 方法获取页面栈的实例，使用 data 属性存储数据，在目标页面中使用 options 获取数据

在跳转的时候，还可以通过传递参数来实现数据的传递，一般有以下两种方式：

1. Query 参数传递：适用于传递简单的参数，如页面之间的关联 ID、状态等。

在通过wx.navigateTo()或wx.redirectTo()等方法跳转页面时，可以在目标页面的路径后面附加查询参数，如：

wx.navigateTo({url: '/pages/detail/detail?id=123&name=test'
})

目标页面可以通过onLoad生命周期函数的 options 参数获取到传递的查询参数，如：

onLoad: function(options) {console.log(options.id); // 输出 123console.log(options.name); // 输出 test
}

2. 页面栈传递：适用于传递复杂的数据对象或者在页面关闭后需要回传数据的情况

在跳转时，通过 wx.navigateTo({ url: 'pages/detail/detail', query: { id: 123 } }) 将参数传递到目标页面，然后在目标页面中，通过 getCurrentPages()[getCurrentPages().length - 1].options 获取参数，如 var id = getCurrentPages()[getCurrentPages().length - 1].options.id。

六、小程序的生命周期函数

APP生命周期

  • onLaunch(options)：小程序初始化时调用，可以获取打开小程序的场景值、query参数等

  • onShow(options)：小程序启动或从后台进入前台时调用，可以获取打开小程序的场景值、query参数等

Page生命周期

Component生命周期

  • onLoad(options)：页面加载时调用，可以获取上个页面传递的参数等

  • onShow()：页面显示时调用

  • onReady()：页面初次渲染完成时调用

  • onHide()：页面隐藏时调用

  • onUnload()：页面卸载时调用

  • created()：组件实例刚刚被创建时调用，可以在这个函数中定义组件的数据和方法等

  • attached()：组件被添加到页面中时调用

  • ready()：组件初次渲染完成时调用

  • moved()：组件被移动到另外一个节点时调用

  • detached()：组件被从页面中移除时调用

七、小程序的原理

1. 运行环境：是微信客户端内置的一个轻量级的JavaScript引擎，用于解析和执行小程序的代码。这个JavaScript引擎提供了一系列的API，使得小程序能够与微信客户端进行交互

2. 开发工具：提供了专门的开发工具

3. 框架支持：类似于前端框架的开发模式，类似于HTML、CSS和JavaScript的语法和组件系统

4. 渲染机制：类似于Web开发的渲染方式，使用了类似于HTML的WXML（微信小程序标记语言）来描述页面的结构，使用了类似于CSS的WXSS（微信小程序样式表）来定义页面的样式，使用了类似于JavaScript的逻辑语法来实现页面的逻辑功能

5. 数据通信：可以通过网络请求和微信客户端进行数据通信。开发者可以使用微信提供的API来发送HTTP请求，获取和上传数据。同时，微信小程序还提供了一些特定的API，如获取用户信息、支付等，方便开发者与微信平台进行交互。

6. 安全机制：如，代码会经过微信平台的审核；网络请求受到跨域和HTTPS的限制；用户身份验证和权限管理。

八、小程序的特点和优势

快速启动、低内存、无需安装、跨平台支持、强大的生态系统

九、小程序与H5的区别

1. 开发语言和框架：WXML和WXSS，微信开发者工具；HTML、CSS和JavaScript，使用网页浏览器进行开发和调试。

2. 执行环境和性能：微信客户端，可以直接使用微信客户端提供的能力，如地理位置、支付等；在浏览器中运行，受限于浏览器的性能和能力

3. 可访问性：只能在微信客户端中访问；通过浏览器访问

4.可扩展性：微信小程序功能和扩展性受到限制。必须符合微信小程序的规范和限制，经过微信审核才能发布；H5则更加灵活，可以随意扩展和定制，没有限制

5. 开发成本不同：H5需要兼容不同的浏览器

十、小程序和Vue写法的区别

  1. 开发模式：小程序需要使用微信开发者工具进行开发和调试；Vue可以在浏览器中使用webpack等工具进行开发和调试。

  2. 语法：小程序使用WXML和WXSS语言；Vue使用HTML、CSS和JavaScript

  3. 组件化：都支持组件化的开发方式。小程序的组件化主要是通过Component方法进行定义和注册；Vue通过Vue.component方法进行定义和注册。在使用组件时，小程序需要使用组件的名称进行调用；Vue通过组件的标签名称进行调用

  4. 状态管理：小程序使用的是原生的数据绑定方式，即通过setData方法进行数据的修改和更新；Vue使用的是Vue.js提供的响应式数据绑定和Vuex状态管理机制

如：

遍历：小程序wx:for="list"；Vue是v-for="item in list"

调用data模型（赋值）的时候：

小程序：this.data.item // 调用，this.setDate({item:1})//赋值

Vue：this.item //调用，this.item=1 //赋值

十一、哪些方法可以提高小程序的应用速度

  • 提高页面的加载速度：预加载页面或组件，分包加载
  • 减少网络请求和数据传输：减少默认的data的大小
  • 优化代码逻辑和性能：节流和防抖，异步编程和Promise，避免复杂计算
  • 优化渲染性能：减少页面层级和组件数量

十二、小程序与原生App对比

小程序的优点：

  1. 基于微信平台开发，享受微信自带的流量，这个优点最大
  2. 无需安装，不占手机内存，体验好
  3. 开发周期段，一般最多一个月就可以上线完成
  4. 开发所需的资金少，是开发原生APP的一半不到
  5. 小程序名称是唯一的，在微信的搜索里权重很高
  6. 容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题
  7. 基本不需要考虑兼容性问题
  8. 发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布
  9. 开发文档完善，社区活跃
  10. 支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用

缺点：

  1. 局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能
  2. 不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制
  3. 后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦
  4. 前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致
  5. js引用只能使用绝对路径，不能操作DOM

原生App优点：

  1. 响应速度快
  2. 调用系统硬件的功能（摄像头，拨号，短信蓝牙..）
  3. 在弱网，无网络，离线操作情况下体验好

原生App缺点：

  1. 开发周期长
  2. 开发成本高
  3. 需要下载

十三、常用API

1. 页面跳转：

   - `wx.navigateTo()`：保留当前页面，跳转到应用内的某个页面
   - `wx.redirectTo()`：关闭当前页面，跳转到应用内的某个页面
   - `wx.switchTab()`：跳转到应用内的某个 TabBar 页面，并关闭其他所有非 TabBar 页面
   - `wx.navigateBack()`：关闭当前页面，返回上一页面或多级页面
   - `wx.reLaunch()`：关闭所有页面，打开到应用内的某个页面

2. 网络请求：

   - `wx.request()`：发起网络请求
   - `wx.uploadFile()`：上传文件
   - `wx.downloadFile()`：下载文件
   - `wx.connectSocket()`：创建一个 WebSocket 连接

这些API都是异步操作，需要传入一个 Object 类型的参数，其中包括请求的 URL、请求的参数、请求的方法、请求的头部信息等，如

wx.request({url: 'https://www.example.com/api',method: 'GET',data: {key1: value1,key2: value2},header: {'content-type': 'application/json' // 默认值},success(res) {console.log(res.data)},fail(res) {console.log('请求失败', res)}
})
3. 用户信息：

   - `wx.getUserInfo()`：获取用户信息
   - `wx.login()`：登录
   - `wx.checkSession()`：检查登录态是否过期

4. 设备信息：

   - `wx.getSystemInfo()`：获取系统信息
   - `wx.getNetworkType()`：获取网络类型
   - `wx.getLocation()`：获取地理位置信息

5. 界面交互：

   - `wx.showToast()`：显示消息提示框
   - `wx.showModal()`：显示模态对话框
   - `wx.showLoading()`：显示 loading 提示框
   - `wx.showActionSheet()`：显示操作菜单

6. 媒体文件：

   - `wx.chooseImage()`：从相册选择图片或拍照
   - `wx.previewImage()`：预览图片
   - `wx.saveImageToPhotosAlbum()`：保存图片到系统相册

7. 支付：

   - `wx.requestPayment()`：发起微信支付请求

8. 缓存：

   - `wx.setStorageSync()`：将数据存储在本地缓存中（同步）
   - `wx.getStorageSync()`：从本地缓存中获取数据（同步）

详细的 API 文档可以参考微信小程序官方文档

十四、小程序的发布流程（开发流程）

参考：https://www.cnblogs.com/ssrstm/p/6855572.html

  1. 注册微信小程序账号
  2. 获取微信小程序的AppID
  3. 下载微信小程序开发者工具
  4. 创建demo项目
  5. 去微信公众号配置域名
  6. 手机浏览
  7. 代码上传
  8. 提交审核
  9. 小程序发布

常见问题

  1. bindtap不会阻止事件冒泡，catchatap会阻止，事件不会在父元素上继续传递
  2. rpx：小程序的尺寸单位，规定屏幕为750rpx，可适配不同分辨率屏幕
  3. 本地资源无法通过wxss获取：background-image：可以使用网络图片，或者base64，或者使用标签
  4. wx.navigateTo无法打开页面：一个应用同时只能打开5个页面，请避免多层级的交互方式，或使用wx.redirectTo
  5. tabBar设置不显示：1.tabBar的数量少于2项或超过5项都不会显示。2.tabBar写法错误导致不会显示。3.tabBar没有写pagePath字段（程序启动后显示的第一个页面）

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/814109.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

STC89C52学习笔记（十一）

STC89C52学习笔记（十一）

STC89C52学习笔记&#xff08;十一&#xff09; 综述&#xff1a;本文讲述了直流电机以及PWM调速。 一、直流电机 1、特点 &#xff08;1&#xff09;直流电机能将电能转化位机械能。 &#xff08;2&#xff09;直流电机有两个电极&#xff0c;电极正接时&#xff0c;电机…
阅读更多...
【核心完整复现】基于目标级联法的微网群多主体分布式优化调度

【核心完整复现】基于目标级联法的微网群多主体分布式优化调度

1 主要内容 之前发布了华电学报的复现程序《基于目标级联法的微网群多主体分布式优化调度》&#xff0c;具体链接为【防骗版】基于目标级联法的微网群多主体分布式优化调度&#xff0c;虽然对模型及结果进行了复现&#xff0c;但是部分模型细节和参数并没有完全实现&#xff0…
阅读更多...
【leetcode面试经典150题】47. 最长连续序列（C++）

【leetcode面试经典150题】47. 最长连续序列（C++）

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…
阅读更多...
2024长三角快递物流高质量创新发展论坛

2024长三角快递物流高质量创新发展论坛

2024长三角快递物流供应链与技术装备展览会&#xff08;杭州&#xff09; 2024年7月8-10日 | 杭州国际博览中心 指导单位&#xff1a;浙江省邮政管理局 中国快递协会 主办单位&#xff1a;浙江省快递行业协会 联合主办&#xff1a;上海市快递协会 江苏省快递协会 安徽省快递…
阅读更多...
Ajax跨域请求

Ajax跨域请求

解决 AJAX 跨域请求的方法有几种。跨域请求指的是通过 AJAX 在不同域名、端口或协议下进行的请求&#xff0c;由于浏览器的安全策略限制&#xff0c;这些请求可能会被阻止。以下是一些常见的解决方法&#xff1a; 1、使用服务器代理 在你的服务器上创建一个代理&#xff0c;将…
阅读更多...
ubuntu22下使用vscode调试redis7源码环境搭建

ubuntu22下使用vscode调试redis7源码环境搭建

ubuntu22下使用vscode调试redis7源码环境搭建 ##vscode launch.json配置文件 {// 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。// 欲了解更多信息&#xff0c;请访问: https://go.microsoft.com/fwlink/?linkid830387"version": "0.2.0&…
阅读更多...
【DL水记】循环神经网络RNN的前世今生，Transformer的崛起，Mamba模型

【DL水记】循环神经网络RNN的前世今生，Transformer的崛起，Mamba模型

文章目录 RNN网络简介传统RNN网络结构RNN的分类 长-短期记忆网络 (LSTM)GRU网络横空出世的Transformer网络Self-AttentionVisionTransformer Mamba模型Reference: RNN网络简介 “当人类接触新事物时&#xff0c;他们不会从头开始思考。就像你在阅读这篇文章时&#xff0c;你会根…
阅读更多...
目标检测笔记

目标检测笔记

目标检测笔记 one-stage和two-stage目标检测算法Two-Stage 目标检测算法One-Stage 目标检测算法既然Faster R-CNN使得候选区域生成和目标检测可以在同一个网络中端到端训练&#xff0c;为什么它还是属于Two-stage算法&#xff1f; 目标检测模型&#xff0c;训练中的正负样本是什…
阅读更多...
根据ELK官网指引部署ELK- ECK-Elastic-​ Kibana​-Learn-ELK-(一)

根据ELK官网指引部署ELK- ECK-Elastic-​ Kibana​-Learn-ELK-(一)

**Attention: 1、You need open the ELK official website and step by step to deploy . 2、If you copy my command ,you must check them if it not match your environment . 一、official website Elastic documentation | Elastic Check there. 二、 ECK简介…
阅读更多...
常用接口测试工具/免费api

常用接口测试工具/免费api

一 接口编辑文档 常用的接口文档编写apipost 二 免费接口测试 api 1. thecat 含有&#xff1a; The Cat API - Cat as a Service The Cat API 2. public-apis 进入页面往下拉 三 常用接口测试工具 postman 四 常用接口性能测试工具 Jmeter&#xff0c;loadrunner
阅读更多...
FRDM-MCXN947开发板之RGB灯

FRDM-MCXN947开发板之RGB灯

一、背景 RGB LED&#xff1a;通过红、绿、蓝三种颜色组合发光的LED&#xff0c;可以理解由三个不同发光属性的LED组成&#xff0c;这个是LCD平板显示原理的基础&#xff0c;一个LED相当于屏幕上面的一个像素 FRDM-MCXN947集成了一块RGB LED&#xff0c;它由三个GPIO口驱动&am…
阅读更多...
2024 Guitar Pro 8.1.2-27 (x64) win/mac中文激活版破解版

2024 Guitar Pro 8.1.2-27 (x64) win/mac中文激活版破解版

吉他爱好者必备神器&#xff1a;Guitar Pro v8.1.1 Build 17深度解析 随着数字音乐制作和学习的日益普及&#xff0c;越来越多的吉他爱好者开始寻找能够帮助他们提升技能、创作音乐的专业工具。在众多吉他制作软件中&#xff0c;Guitar Pro因其强大的功能和易用的界面备受推崇…
阅读更多...
Docker Image (镜像) 常见命令

Docker Image (镜像) 常见命令

Docker Image (镜像) 常用命令 docker images 功能&#xff1a;列出本地所有的镜像。如果镜像 ID 相同&#xff0c;但是 Tag 标签不同&#xff0c;也会被当作不同的条目被列出来。 语法&#xff1a; docker images [options] [REPOSITORY[:TAG]] 别名&#xff1a; docker ima…
阅读更多...
如何对图像进行聚类

如何对图像进行聚类

文章来源&#xff1a;https://medium.com/voxel51/how-to-cluster-images-6e09bdff7361 2024 年 4 月 10 日 使用 FiftyOne、Scikit-learn和特征嵌入 在 2024 年深度学习的计算密集型环境中&#xff0c;集群一词最常出现在讨论 GPU 集群时--高度优化的矩阵乘法机器的大规模集…
阅读更多...
Mac下安装NVM,NVM安装Node(附带NPM)

Mac下安装NVM,NVM安装Node(附带NPM)

1、理解NVM、node、NPM 什么是NVM&#xff1f; NVM: Node.js Version Manager&#xff0c;用来管理 node 的版本。 什么是 Node.js? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js使用了一个事件驱动、非阻塞式I/O的模型&#xff08; Node.js的特性&…
阅读更多...
海洋信息管理系统：守护蓝色星球，促进海洋经济新发展

海洋信息管理系统：守护蓝色星球，促进海洋经济新发展

海洋&#xff0c;覆盖地球表面超过七成的广阔水域&#xff0c;是生命之源&#xff0c;也是经济发展的重要空间。然而&#xff0c;随着人类活动的增加&#xff0c;海洋生态环境面临严峻挑战&#xff0c;海洋资源的可持续利用成为全球关注的焦点。在这样的背景下&#xff0c;构建…
阅读更多...
数字IC/FPGA——亚稳态及跨时钟域

数字IC/FPGA——亚稳态及跨时钟域

什么是亚稳态亚稳态会造成什么平均故障间隔时间如何解决亚稳态同步时钟和异步时钟单bit电平信号如何跨时钟域单bit脉冲信号如何跨时钟域多bit信号如何跨时钟域 目录 一、亚稳态1.基本概念2.危害3.平均故障时间4.解决亚稳态的方法 二、跨时钟域1.同步电路和异步电路&#xff08;…
阅读更多...
Redis 是如何实现消息队列的？

Redis 是如何实现消息队列的？

队列的三个需求 消息队列在存取消息时&#xff0c;必须要满足三个需求&#xff0c;分别是消息保序、处理重复的消息和保证消息可靠性 需求一&#xff1a;消息保序。消费者仍然需要按照生产者发送消息的顺序来处理消息&#xff0c;避免后发送的消息被先处理了 需求二&#xf…
阅读更多...
链表linked list: 将新节点链接到链表的末尾

链表linked list: 将新节点链接到链表的末尾

// 在链表中插入新节点 // 这段代码定义了一个名为 insert 的函数&#xff0c;用于在链表中插入新节点。让我解释一下这段代码的逻辑&#xff1a; // 函数接受两个参数&#xff1a;指向链表头节点的引用 head 和要插入的新节点的值 value。 // 首先&#xff0c;它创建了一个新的…
阅读更多...
RNN知识体系构筑：详尽阐述其理论基础、技术架构及其在处理序列数据挑战中的创新应用

RNN知识体系构筑：详尽阐述其理论基础、技术架构及其在处理序列数据挑战中的创新应用

一、为什么需要RNN 尽管神经网络被视为一种强大且理论上能够近似任何连续函数的模型&#xff0c;尤其当训练数据充足时&#xff0c;它们能够在输入空间中的某个点( x )映射到输出空间的特定值( y )&#xff0c;然而&#xff0c;这并不能完全解释为何在众多应用场景中&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023