2022最新微信小程序常见面试题总结

敲代码的TKP

已于 2022-07-05 16:22:23 修改

阅读量7.8k

点赞数 9

分类专栏：小程序文章标签：微信小程序小程序前端

于 2022-07-05 16:16:39 首次发布

TKP

本文链接：https://blog.csdn.net/TKP666/article/details/125621322

版权

小程序专栏收录该内容

18 篇文章 4 订阅

订阅专栏

1、微信小程序有几个文件

WXML（WeiXin Markup
Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
js逻辑处理，网络请求
json小程序设置，如页面注册，页面标题及tabBar

2、微信小程序怎样跟事件传值

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

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

wxss的图片引入需使用外链地址
没有 Body；样式可直接使用 import 导入

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

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

5、微信小程序与vue区别

生命周期不一样，微信小程序生命周期比较简单
数据绑定也不同，微信小程序数据绑定需要使用{{}}，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中声明的变量。

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

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

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

7、简述微信小程序原理

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

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

onLoad 页面加载时触发。一个页面只会调用一次，可以在onLoad 的参数中获取打开当前页面路径中的参数
onShow() 页面显示/切入前台时触发
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onHide() 页面隐藏/切入后台时触发。如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

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

1、提高页面加载速度
2、用户行为预测
3、减少默认 data 的大小
4、组件化方案

10、微信小程序的优劣势

优势：
1、无需下载，通过搜索和扫一扫就可以打开。
2、良好的用户体验：打开速度快。
3、开发成本要比App要低。
4、安卓上可以添加到桌面，与原生App差不多。
5、为用户提供良好的安全保障。小程序的发布，微信拥有一套严格的审查流程，不能通过审查的小程序是无法发布到线上的。
缺点：
1、限制较多。页面大小不能超过1M。不能打开超过5个层级的页面。
2、样式单一。小程序的部分组件已经是成型的了，样式不可以修改。例如：幻灯片、导航。
3、推广面窄，不能分享朋友圈，只能通过分享给朋友，附近小程序推广。其中附近小程序也受到微信的限制。
4、依托于微信，无法开发后台管理功能。

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

小程序支持大部分 ES6 语法
在返回成功的回调里面处理逻辑Promise异步

12、如何实现下拉刷新

首先在全局 config 中的 window配置 enablePullDownRefresh ，在 Page 中定义onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法请求返回后，调用wx.stopPullDownRefresh停止下拉刷新

13、bindtap和catchtap的区别是什么

相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的

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

1、使用全局变量实现数据传递。在 app.js 文件中定义全局变量 globalData，将需要存储的信息存放在里面
2、使用 wx.navigateTo与 wx.redirectTo 的时候，可以将部分数据放在 url
里面，并在新页面onLoad的时候初始化
3、使用本地缓存Storage 相关

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

基础事件（BaseEvent）

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

自定义事件（CustomEvent）

detail

触摸事件（TouchEvent）

touches
changedTouches

16、小程序对wx:if 和 hidden使用的理解？

wx:if有更高的切换消耗。
hidden 有更高的初始渲染消耗。
因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则wx:if 较好。

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

运行环境的不同

传统的HTML5的运行环境是浏览器，包括webview，而微信小程序的运行环境并非完整的浏览器，是微信开发团队基于浏览器内核完全重构的一个内置解析器，针对小程序专门做了优化，配合自己定义的开发语言标准，提升了小程序的性能。

开发成本的不同

只在微信中运行，所以不用再去顾虑浏览器兼容性，不用担心生产环境中出现不可预料的奇妙BUG
获取系统级权限的不同

18、app.json 是对当前小程序的全局配置，讲述三个配置各个项的含义？

pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的
tab字段—小程序全局顶部或底部tab

19、小程序onPageScroll方法的使用注意什么？

由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次。

20、小程序视图渲染结束回调？

使用setData(data, callback)，在callback回调方法中添加后续操作代码

21、小程序同步API和异步API使用时注意事项？

wx.setStorageSync是以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作。

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

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

23、如何封装微信小程序的数据请求的？

1、将所有的接口放在统一的js文件中并导出。
2、在app.js中创建封装请求数据的方法。
3、在子页面中调用封装的方法请求数据。

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

首先要引入最新版的jweixin-x.x.x.js，然后

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

25、webview的页面怎么跳转到小程序导航的页面？

答：小程序导航的页面可以通过switchTab，但默认情况是不会重新加载数据的。若需加载新数据，则在success属性中加入以下代码即可：

success: function (e) {
    var page = getCurrentPages().pop();
    if (page == undefined || page == null) return;
    page.onLoad();
}

webview的页面，则通过

wx.miniProgram.switchTab({
    url: '/pages/index/index'
})