微信小程序常见知识点

原创于 2025-08-21 11:21:11 发布 · 794 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #前端

微信小程序专栏收录该内容

1 篇文章

订阅专栏

1、请谈谈微信小程序主要目录和文件的作用？

config.json：项目配置文件，用的最多的就是配置是否开启https校验
App.js：设置一些全局的基础数据等
App.json：底部tab，标题栏和路由等设置
App.wxss：公共样式，引入iconfont等
pages：里面包含一个个具体的页面
index.json：配置当前页面标题和引入组件
index.wxml：页面结构
index.wxss：页面样式表
index.js：页面的逻辑，请求和数据处理

小程序有几个文件?

WXML :微信自己定义的一套组件

WXSS : 用于描述WXML的组件样式

js : 逻辑处理

json :小程序页面配置

2、小程序怎么跟随事件传值

给 HTML 元素添加 data-*属性来传递我们需要的值，然后通过 e.currentTarget.dataset 或 onload的 param参数获取。但 data - 名称不能有大写字母和不可以存放对象

<button bindtap="get" data-name="测试"> 拿到传值</button>
get(e){
	console.log(e.currentTarget.dataset.name)
},

3、小程序WXSS与CSS 的区别,wxml与标准的html的异同

3.1、小程序WXSS与CSS 的区别

都是用来描述页面的样子
WXSS具有CSS大部分的特性，也做了一些扩充和修改
WXSS背景图片只能引入外链，不能使用本地图片
小程序样式使用@import 引入外联样式文件，地址为相对路径。
WXSS新增了尺寸单位，WXSS在底层支持新的尺寸单位为rpx ，rpx 是响应式像素,可以根据屏幕宽度进行自适应。
WXSS仅支持部分CSS选择器
WXSS提供全局样式与局部样式

3.2、wxml与标准的html的异同？

相同：

都是用来描述页面的结构
都由标签，属性等构成

不同：

标签名字不一样，且小程序标签更少，单一标签更多
多了一些 wx:if 这样的属性以及{{}} 这样的表达式
WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览
组件封装不同，WXML对组件进行了重新封装
小程序运行在JS Core内，没有DOM树和windiw对象，小程序中无法使用window对象和document对象。

4、小程序的双向绑定和Vue哪里不一样

小程序直接使用this.data.key = value 是不能更新到视图当中的。

必须使用this.setData({ key : value })来更新值。

小程序和Vue的区别？

遍历的时候：

小程序wx:for="list",而Vue是v-for="item in list"

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

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

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

生命周期不一样，微信小程序生命周期比较简单
数据绑定也不同，微信小程序数据绑定需要使用{{}}，vue 直接:就可以显示与隐藏元素，vue中，使用 v-if 和 v-show
控制元素的显示和隐藏，小程序中，使用wx-if 和hidden 控制元素的显示和隐藏
事件处理不同。小程序中，全用 bindtap(bind+event)，或者 catchtap(catch+event) 绑定事件,vue：使用 v-on:event 绑定事件，或者使用@event 绑定事件
数据双向绑定也不一样。在 vue中,只需要再表单元素上加上 v-model,然后再绑定 data中对应的一个值，当表单元素内容发生变化时，data中对应的值也会相应改变，这是 vue非常 nice 的一点。微信小程序必须获取到表单元素，改变的值，然后再把值赋给一个 data中声明的变量。

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

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

onShow : 页面显示/切入前台时触发调用。

onReady :页面初次渲染完成时触发,一个页面只会调用一-次。

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

onUnload : 页面卸载时触发。如redirectTo 或navigateBack 到其他页面时.

6、小程序怎么实现下拉刷新

两种方案

方案一:

通过在app.json 中，将I"enablePullDownRefresh": true, 开启全局下拉刷新。

或者通过在组件.json将“enablePullDownRefresh" :true,单组件下拉刷新。

方案二:

scroll-view :使用该滚动组件自定义刷新,通过bindscrolltoupper 属性，当滚动到顶部/左边，会触发scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。

7、bindtap和catchtap 区别

相同点: 都是点击事件

不同点: bindtap 不会阻止冒泡， catchtap 可以阻止冒泡。

8、小程序有哪些传递数据的方法

8.1. 使用全局变量

可以将数据存储在小程序的全局变量中，然后在小程序页面中读取。

在 app.js 中的 this.globalData = { } 中放入要存储的数据。
在组件.js 中，头部引入 const app = getApp(); 获取到全局变量
直接使用 app.globalData.key 来进行赋值和获取值。

8.2. 使用URL参数传递（路由）

wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后拼接 + 变量，然后在目标页面通过在 onLoad 周期中，通过参数来获取传递过来的值。

8.3. 使用本地缓存 Storage 相关

通过Storage API将数据存储在本地，然后在小程序页面中读取。

wx.setStorageSync('checkin', checkin);

9、小程序内的页面跳转

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

wx.navigateTo() : 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
wx.redirectTo() : 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
wx.switchTab() : 跳转到 TabBar 页面，并关闭其他所有非 tabBar 页面，路径后不能带参数
wx.navigateBack() : 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
wx.reLaunch() : 关闭所有页面，打开到应用的某个页面。

10、小程序 wx:if 和 hidden 的区别

wx:if 是遇 true 显示，hidden 是遇 false 显示。

wx:if 在隐藏的时候不渲染，而 hidden 在隐藏时仍然渲染，只是不呈现。

所以如果频繁切换的话，用 wx:if 将会消耗更多资源，因为每次呈现的时候他都会渲染，每次隐藏的时候，他都会销毁。

如果切换并不频繁的话，用 wx:if 相对来说较好些，因为它会避免初始就一下渲染那么多。

wx:if : 有更高的切换消耗。
hidden : 有更高的初始渲染消耗。

使用：频繁切换使用 hidden, 运行时条件变化使用 wx: if

11、app.json 全局配置文件描述

pages : 用于存放当前小程序的所有页面路径
window : 小程序所有页面的顶部背景颜色，文字颜色配置。
tabBar : 小程序底部的 Tab ,最多5个，最少2个。

12、如何封装小程序请求

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调， fail 失败回调 ) , 封装常用方法 POST , GET , DELETE , PUT .... 最后导出这些方法
然后新建一个 api.js 文件，导入封装好的方法，然后调取相应的方法，传递数据。

wx.request 封装

13、小程序运行机制

冷启动（重新开始）：用户首次打开或者小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即为冷启动
热启动：用户已经打开过小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需要将后台态的小程序切换到前台，这个过程就是热启动

14、简述微信小程序原理？

答：小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；

微信小程序采用JavaScript、WXML、WXSS三种技术进行开发，从技术讲和现有的前端开发差不多，但深入挖掘的话却又有所不同。

JavaScript：首先JavaScript的代码是运行在微信App中的，并不是运行在浏览器中，因此一些H5技术的应用，需要微信App提供对应的API支持，而这限制住了H5技术的应用，且其不能称为严格的H5，可以称其为伪H5，同理，微信提供的独有的某些API，H5也不支持或支持的不是特别好。

WXML：WXML微信自己基于XML语法开发的，因此开发时，只能使用微信提供的现有标签，HTML的标签是无法使用的。

WXSS：WXSS具有CSS的大部分特性，但并不是所有的都支持，而且支持哪些，不支持哪些并没有详细的文档。

微信的架构，是数据驱动的架构模式，它的 UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现
小程序分为两个部分 webview 和 appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

15、分析微信小程序的优劣势？

优势：

容易上手，基础组件库比较全，基本不需要考虑兼容问题
开发文档比较完善，开发社区比较活跃，支持插件式开发
良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多
开发成本比APP要低
为用户提供良好的保障（小程序发布，严格是审查流程）

劣势：

限制较多，体积小，不能超过 2M，不能打开超过 10 个层级的页面
样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航
推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广
依托与微信，无法开发后台管理功能
后台调试麻烦，因为api接口必须https请求且公网地址
真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢

16、微信小程序和H5的区别？

运行环境不同（小程序在微信运行，h5在浏览器运行）
开发成本不同（h5需要兼容不同的浏览器）
获取系统权限不同（系统级权限可以和小程序无缝衔接）
应用在生成环境的运行速度流程（h5需不断对项目优化来提高用户体验）

17、小程序与原生App那个好？

各有各自的优点，都又有缺点

小程序的优点：

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

缺点：

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

原生App优点

原生的相应速度快
对于有无网络操作时，譬如离线操作基本选用原生开发
需要调用系统硬件的功能（摄像头，拨号，短信蓝牙..）
在无网络或者弱网情况下体验好

原生App缺点

开发周期长，开发成本高，需要下载

18、小程序的发布流程（开发流程）

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

19、小程序页面之间有哪些（传值）传递数据的方法？

使用全局遍历实现数据传递
页面跳转或重定向时，使用url带参数传递数据

// A跳转
goB() {
  wx.navigateTo({
    url: '/pages/B/index?id=value',
  })
}

// B接收
onLoad: function (options) {
  console.log('id', options.id)
}

使用组件模板 template传递参数
使用缓存传递参数
使用数据库传递参数
给html元素添加data-属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取（data- 名称不能有大写字母，不可以存放对象）
设置id 的方法标识来传值，通过e.currentTarget.id获取设置的id值，然后通过设置全局对象的方式来传递数据
在navigator中添加参数数值

在navigator中添加需要跳转的路径,如果需要带参,则在路径后面添加所要传递的参数以及值。

在接收参数的页面JS中的data中定义要获取的值。

20、怎么解决微信小程序的异步请求问题？

微信小程序为了提高用户体验，提供的api大部分都是异步操作，除了数据缓存操作里面有一些同步操作。是提高了用户体验，但是在开发的时候，

就有点坑了，例如我要写一个公共方法，发起网络请求，去后台去一些数据，成功之后，再做一些操作，但是由于wx.request是异步请求，就会导致，网络请求还没结束，就会执行后面的代码，从而引起异常，怎么解决这种异步导致的问题呢，在ES6，有了Promise来解决异步问题。

这是ES6的语法，它解决了我们的问题。可能现在看起来，不如回调嵌套方便，这是因为我演示的代码很简单，很基础。当你的代码量很大的时候，promise绝对要优于回调嵌套的。而且可以对promise进行一些封装，更好的解决实际需求。

其实promise并不是最优雅的解决异步的方法。

在ES7中有了 async await 可以更加优雅的解决异步问题，并且是目前这个问题领域中的最优解。

但是现在的微信小程序的客户端目前是完全支持Promise的，并不直接支持async await，如果想用async await，还需要npm 依赖，分离js文件，require调用。

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

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

（2）基本配置

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

{
  "component": true
}

（3）使用组件

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

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

（4）接着在index.wxml中引用

（5）然后在index.js进行配置

（6）使用时直接执行this.toastdemo.showToast(‘弹框组件调用成功’,2000)就可以了

22、小程序如何显示用户头像与用户名

传统接口 wx.getUserInfo

后面新添加的一个开放接口wx.getUserProfile，也是用于获取用户头像和昵称

最新方法：open-data 标签，使用这个标签可以不用用户授权直接获取头像和用户名，可以在 button 中将 open-data 作为属性写进去，写个点击事件就直接获取到了。

<open-data type="userAvatarUrl"></open-data>

22.1. 使用 open-data 标签（简单但有限制）

open-data 标签是小程序官方提供的展示用户信息的组件，无需用户授权即可显示。

优点：

无需用户授权
使用简单

缺点：

样式自定义受限
无法获取到实际数据（仅用于显示）

22.2. 使用 wx.getUserProfile 或 wx.getUserInfo（推荐）

通过API获取用户信息，可以获取到真实数据并完全控制显示样式。

优点：

可以获取真实数据
完全自定义样式
灵活性高

缺点：

需要用户授权
需要处理授权拒绝的情况

23、小程序适配方案

因为小程序是以微信为平台运行的，可以同时运行在android与ios的设备上，所以不可避免的会遇到布局适配问题，特别是在iphone5上，因为屏幕尺寸小的缘故，也是适配问题最多的机型，下面就简单介绍几种适配方法。

rpx适配 rpx是小程序中的尺寸单位，它有以下特征：

小程序的屏幕宽固定为750rpx（即750个物理像素），在所有设备上都是如此 1rpx=（screenWidth / 750）px，其中screenWidth为手机屏幕的实际的宽度（单位px），例如iphone6的screenWidth=375px，则在iphone6中1rpx=0.5px 由上可知，在不同设备上rpx与px的转换是不相同的，但是宽度的rpx却是固定的，所以可以使用rpx作为单位，来设置布局的宽高。

vw、vh适配 vw和vh是css3中的新单位，是一种视窗单位，在小程序中也同样适用。

小程序中，窗口宽度固定为100vw，将窗口宽度平均分成100份，1份是1vw 小程序中，窗口高度固定为100vh ，将窗口高度平均分成100份，1份是1vh 所以，我们在小程序中也可以使用vw、vh作为尺寸单位使用在布局中进行布局，但是一般情况下，百分比+rpx就已经足够使用了,所以它们的出场机会很少。

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

1、提高页面加载速度

2、用户行为预测

3、减少默认 data 的大小

4、组件化方案

25、小程序简单介绍下三种事件对象的属性列表？

基础事件（BaseEvent）

type: 事件类型
timeStamp：事件生成时的时间戳
target：触发事件的组件的属性值集合
currentTarget：当前组件的一些属性集合

自定义事件（CustomEvent）

detail

触摸事件（TouchEvent）

touches
changedTouches

26、说说微信小程序的生命周期函数是什么

跟vue、react框架一样，微信小程序框架也存在生命周期，实质也是一堆会在特定时期执行的函数

小程序中，生命周期主要分成了三部分：

应用的生命周期
页面的生命周期
组件的生命周期

26.1、应用的生命周期

小程序的生命周期函数是在app.js里面调用的，通过App(Object)函数用来注册一个小程序，指定其小程序的生命周期回调

应⽤的⽣命周期执行过程：

⽤户⾸次打开⼩程序，触发 onLaunch（全局只触发⼀次）
⼩程序初始化完成后，触发onShow⽅法，监听⼩程序显示
⼩程序从前台进⼊后台，触发 onHide⽅法
⼩程序从后台进⼊前台显示，触发 onShow⽅法
⼩程序后台运⾏⼀定时间，或系统资源占⽤过⾼，会被销毁

26.2、页面的生命周期

页面生命周期函数就是当你每进入/切换到一个新的页面的时候，就会调用的生命周期函数，同样通过App(Object)函数用来注册一个页面

⻚⾯⽣命周期的执行过程：

⼩程序注册完成后，加载⻚⾯，触发onLoad⽅法
⻚⾯载⼊后触发onShow⽅法，显示⻚⾯
⾸次显示⻚⾯，会触发onReady⽅法，渲染⻚⾯元素和样式，⼀个⻚⾯只会调⽤⼀次
当⼩程序后台运⾏或跳转到其他⻚⾯时，触发onHide⽅法
当⼩程序有后台进⼊到前台运⾏或重新进⼊⻚⾯时，触发onShow⽅法
当使⽤重定向⽅法 wx.redirectTo() 或关闭当前⻚返回上⼀⻚wx.navigateBack()，触发onUnload

26.3、组件的生命周期

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发，通过Component(Object)进行注册组件

27、说说微信小程序的登录流程？

通过 wx.login() 获取到用户的code判断用户是否授权读取用户信息，调用wx.getUserInfo 读取用户数据
由于小程序后台授权域名无法授权微信的域名，所以需要自身后端调用微信服务器获取用户信息
通过 wx.request() 方法请求业务方服务器，后端把 appid , appsecret 和动态令牌 code 一起发送到微信服务器。 appid 和 appsecret 都是微信提供的，可以在管理员后台找到
微信服务器返回了 openid 及本次登录的会话密钥 session_key
后端从数据库中查找 openid ，如果没有查到记录，说明该用户没有注册，如果有记录，则继续往下走
session_key 是对用户数据进行加密签名的密钥。为了自身应用安全，session_key 不应该在网络上传输
然后生成 session并返回给小程序
小程序把 session 存到 storage 里面
下次请求时，先从 storage 里面读取，然后带给服务端
服务端对比 session 对应的记录，然后校验有效期