当前位置： 首页 > article >正文

微信小程序开发指南：从基础到进阶

article 2024/11/25 14:34:37

​🌈个人主页：前端青山
🔥系列专栏：微信小程序篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来微信小程序篇专栏内容:微信小程序开发指南：从基础到进阶

前言

随着移动互联网的快速发展，微信小程序因其便捷性和高效性受到了广大开发者的青睐。本文旨在为初学者和有一定经验的开发者提供一份全面的小程序开发指南，涵盖从小程序的基本概念、文件结构、数据请求封装、参数传递、生命周期函数、自定义组件、页面跳转、性能优化等多个方面，帮助读者快速掌握微信小程序的核心技术和最佳实践。

目录

前言

1、简单描述下微信小程序的相关文件类型

2、数据请求怎么封装

3、参数传递

4、生命周期函数

5、小程序的双向绑定和vue哪里不一样

6、如何自定义组件（弹窗）

7、小程序内的页面跳转

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

9、小程序的双向绑定和vue哪里不一样

10、小程序的优点和缺点

11、简述小程序原理

12、提高小程序的应用速度的方法

13、简述小程序原理

14、setData的回调函数

15、如何实现下拉刷新

16、bindtap和catchtap的区别是什么

17、微信小程序与H5的区别？

18、小程序关联微信公众号如何确定用户的唯一性？

19、webview中的页面怎么跳回小程序中

20、简述微信小程序原理

21、小程序的双向绑定和vue哪里不一样

22、小程序的wxss和css有哪些不一样的地方

23 小程序页面间有哪些传递数据的方法

24 小程序的生命周期函数

25、哪些方法可以用来提高微信小程序的应用速度

26、 微信小程序的优劣势

27 怎么解决小程序的异步请求问题

28如何实现下拉刷新

29 bindtap和catchtap的区别是什么

30 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别

结尾总结

1、简单描述下微信小程序的相关文件类型

  • WXML——模板文件

  • JSON——配置/设置文件，如标题,tabbar,页面注册

  • WXSS——样式文件，样式可直接用import导入

  • JS——脚本逻辑文件，逻辑处理，网络请求

  • app.json——配置文件入口，整个小程序的全局配置，网络超时时间、底部tab、页面路径，window字段是小程序所有页面的顶部背景颜色、文字颜色

  • app.js——可以没有内容，可以在里边监听生命周期函数、声明全局变量

  • app.wxss——全局配置样式文件

2、数据请求怎么封装

  • 将所有的接口放在统一的js文件中并导出（或者将请求地址、头、方法在一个js文件里统一定义为一个常量并导出）

  • 在app.js创建封装请求数据的方法

  • 在子页面中调用封装的方法请求数据

3、参数传递

  • 给HTML元素中添加data-*属性来传递需要的值，之后通过e.currentTarget.dataset或onload的param参数获取。注意不能有大写字母，不可以存放对象

  • 跳转页面时通过navigator传递需要的参数值

  • 设置id的方法标识，通过e.currentTarget.id获取设置的id值，然后通过设置全局变量的方法来传递数值

4、生命周期函数

  • onLoad——页面加载，调一次

  • onShow——页面显示，每次打开页面都调用

  • onReady——初次渲染完成，调一次

  • onHide——页面隐藏，当navigateTo或底部tab切换时调用

  • onUnload——页面卸载，当redirectTo或navigateBack时调用

5、小程序的双向绑定和vue哪里不一样

  • 小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData({})

6、如何自定义组件（弹窗）

  • 先创建一个components文件夹，用来存放所有自定义组件的，目录结构依然是js,wxml,json,wxss

基本配置：

  • .json——进行自定义组件声明

{
  "component": true
}

使用组件：

  • 假如在index.wxml中使用这个自定义的组件，首先在index.json中进行声明

{  
  "usingComponents": {  
      "toastdemo": "/components/toastdemo/toastdemo"  
  }  
}

  • 接着在index.wxml中引用

  • 然后在index.js进行配置

  • 使用时直接执行this.toastdemo.showToast('弹框组件调用成功',2000)就可以了

7、小程序内的页面跳转

  • wx.navigateTo——保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面（参数必须为字符串）

  • wx.redirectTo——关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

  • wx.switchTab——跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数

  • wx.navigateBack——关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

  • wx.reLaunch——关闭所有页面，打开到应用内的某个页面

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

  • 循环遍历：小程序是wx:for="list"，vue是v-for="inforin list"

  • 调用data模型：小程序是this.data.unifo，vue是this.unifo

  • 给模型赋值：小程序是this.setData({unifo:1})，vue是直接this.unifo=1

9、小程序的双向绑定和vue哪里不一样

  • 小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData({})

10、小程序的优点和缺点

小程序的优点

  • 无需下载

  • 打开速度快

  • 开发成本低

  • 为用户提供良好的安全保障。发布有一套严格的审查流程，不能通过审查的程序无法发布上线

  • 服务请求快

小程序的缺点

  • 依托微信，不能开发后台管理功能

  • 大小限制不能超过2M，不能打开超过5个层级的页面

11、简述小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理。

12、提高小程序的应用速度的方法

  • 减少默认data的大小

  • 组件化方案，公用的如弹框等写个自定义的组件，然后调用

13、简述小程序原理

小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理

14、setData的回调函数

微信小程序的setData实现是和react的setData实现类似的，所以它也是一个异步函数，并且有回调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要用到setData后 data里的数据的步骤，请写入setData的回调函数中，如下示例：

this.setData({
  a: this.data.a++
  },()=>{
})

15、如何实现下拉刷新

  • 先在app.json或page.json中配置enablePullDownRefresh:true

  • page里用onPullDownRefresh函数，在下拉刷新时执行

  • 在下拉函数执行时发起数据请求，请求返回后，调用wx.stopPullDownRefresh停止下拉刷新的状态

16、bindtap和catchtap的区别是什么

  • bindtap不会阻止冒泡事件，catchtap阻止冒泡

17、微信小程序与H5的区别？

①运行环境不同（小程序在微信运行，h5在浏览器运行）；

②开发成本不同（h5需要兼容不同的浏览器）；

③获取系统权限不同（系统级权限可以和小程序无缝衔接）；

④应用在生产环境的运行流畅度（h5需不断对项目优化来提高用户体验）

18、小程序关联微信公众号如何确定用户的唯一性？

使用wx.getUserInfo方法 withCredentials为true时，可获取encryptedData，里面有union_id.后端需要进行对称解密。

19、webview中的页面怎么跳回小程序中

  • 先在管理后台配置域名白名单，

  • 然后引入jweixin-1.3.2.js（https://res.wx.qq.com/open/js/jweixin-1.3.0.js）

wx.miniProgram.navigateTo({url: '/pages/login/login'+'$params'})
wx.miniProgram.navigateTo({url: '/path/to/page'})

20、简述微信小程序原理

微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现 小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

21、小程序的双向绑定和vue哪里不一样

小程序直接 this.data 的属性是不可以同步到视图的，必须调用：

this.setData({
    // 这里设置
})

22、小程序的wxss和css有哪些不一样的地方

WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改

  • 尺寸单位 rpx

rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素

  • 使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束

/** index.wxss **/

@import './base.wxss';
​
.container{
    color: red;
}

23 小程序页面间有哪些传递数据的方法

  • 使用全局变量实现数据传递

在 app.js 文件中定义全局变量 globalData， 将需要存储的信息存放在里面

// app.js
​

App({
     // 全局变量
  globalData: {
    userInfo: null
  }
})

使用的时候，直接使用 getApp() 拿到存储的信息

  • 使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化

//pageA.js
​
// Navigate


wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})
​
// Redirect


wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})
​// pageB.js
...

Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

需要注意的问题：

wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面

onLoad 只执行一次

  • 使用本地缓存 Storage 相关

24 小程序的生命周期函数

  • onLoad 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数

  • onShow() 页面显示/切入前台时触发

  • onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

  • onHide() 页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等

  • onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

25、哪些方法可以用来提高微信小程序的应用速度

1、提高页面加载速度

2、用户行为预测

3、减少默认 data 的大小

4、组件化方案

26、 微信小程序的优劣势

优势

  • 即用即走，不用安装，省流量，省安装时间，不占用桌面

  • 依托微信流量，天生推广传播优势

  • 开发成本比 App 低

缺点

  • 用户留存，即用即走是优势，也存在一些问题

  • 入口相对传统 App 要深很多

  • 限制较多,页面大小不能超过2M。不能打开超过10个层级的页面

27 怎么解决小程序的异步请求问题

小程序支持大部分 ES6 语法

  • 在返回成功的回调里面处理逻辑

  • Promise 异步

28如何实现下拉刷新

  • 首先在全局 config 中的 window 配置 enablePullDownRefresh

  • 在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法

  • 请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新

29 bindtap和catchtap的区别是什么

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分

不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

30 简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()的区别</h5>

  • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面

  • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

  • wx.switchTab()：跳转到 abBar 页面，并关闭其他所有非 tabBar 页面

  • wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层

  • wx.reLaunch()：关闭所有页面，打开到应用内的某个页面

结尾总结

通过本文的详细介绍，相信读者已经对微信小程序有了较为全面的了解。从小程序的基础文件类型到复杂的自定义组件，再到页面跳转和性能优化，每一步都至关重要。希望本文能够帮助读者在实际开发中更加得心应手，提升开发效率和用户体验。未来，随着微信小程序生态的不断完善，更多的创新功能和技术将会涌现，期待各位开发者能够在这一领域取得更大的成就。


http://www.kler.cn/a/408718.html

相关文章：

  • Docker1：认识docker、在Linux中安装docker
  • SpringBoot+SpringCloud面试题整理附答案
  • 深度学习之目标检测的常用标注工具
  • c++ unordered_set和unordered_map
  • Spring Boot与MyBatis-Plus的高效集成
  • docker镜像源配置、换源、dockerhub国内镜像最新可用加速源（仓库）
  • 在Windows环境下打包Qt C++项目为独立可执行文件的完整指南
  • 传智杯 3-初赛：终端
  • 关于springboot中使用AOP方式记录日志的思路和灵感
  • Python/GoLang/Java 多环境管理工具 pyenv/goenv/jenv
  • 16：（标准库）ADC三：使用外部触发启动ADC/模拟看门狗
  • CTF之密码学（Polybius密码）
  • 241124_基于MindSpore学习GPT2
  • C++ std::unique_ptr的使用及源码分析
  • 【Spring源码核心篇-03】精通spring的aop的底层原理和源码实现
  • c++（入门）
  • 群核科技首次公开“双核技术引擎”，发布多模态CAD大模型
  • 从零开始：使用 Spring Boot 开发图书管理系统
  • pip 与当前python环境版本不匹配, pyenv, pipenv, conda
  • 速盾：海外服务器使用CDN加速有什么优势？
  • [Python3学习笔记-基础语法] Python3 基础语法
  • Excel如何批量导入图片
  • UE5中T_noise 纹理的概述
  • 前端把dom页面转为pdf文件下载和弹窗预览
  • C语言蓝桥杯组题目
  • transformer.js（一）：这个前端大模型运行框架的可运行环境、使用方式、代码示例以及适合与不适合的场景