2023年7月2日发(作者：)

前端⾯试之微信⼩程序常见问题总结⼀、简单描述下微信⼩程序的相关⽂件类型1. 微信⼩程序项⽬结构主要有四个⽂件类型WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出页⾯的结构，内部主要是微信⾃⼰定义的⼀套组件WXSS (WeiXin Style Sheets)是⼀套样式语⾔，⽤于描述WXML 的组件样式js逻辑处理，⽹络请求json ⼩程序设置，如页⾯注册，页⾯标题及tabBar2. 主要⽂件 必须要有这个⽂件，如果没有这个⽂件，项⽬⽆法运⾏，因为微信框架把这个作为配置⽂件⼊⼝，整个⼩程序的全局配置。包括页⾯注册，⽹络设置，以及⼩程序的

window 背景⾊，配置导航条样式，配置默认标题 必须要有这个⽂件，没有也是会报错！但是这个⽂件创建⼀下就⾏ 什么都不需要写以后我们可以在这个⽂件中监听并处理⼩程序的⽣命周期函数、声明全局变量 可选⼆、 简述微信⼩程序原理1. 微信⼩程序采⽤

JavaScript、WXML、WXSS 三种技术进⾏开发,本质就是⼀个单页⾯应⽤，所有的页⾯渲染和事件处理，都在⼀个页⾯内进⾏，但⼜可以通过微信客户端调⽤原⽣的各种接⼝2. 微信的架构，是数据驱动的架构模式，它的

UI和数据是分离的，所有的页⾯更新，都需要通过对数据的更改来实现3. ⼩程序分为两个部分

webview和

appService 。其中

webview 主要⽤来展现

UI，appService有来处理业务逻辑、数据及接⼝调⽤。它们在两个进程中运⾏，通过系统层

JSBridge 实现通信，实现UI的渲染、事件的处理三、⼩程序的双向绑定和vue哪⾥不⼀样⼩程序直接

的属性是不可以同步到视图的，必须调⽤：a({//

这⾥设置})四、 ⼩程序的wxss和css有哪些不⼀样的地⽅WXSS和CSS类似，不过在

CSS 的基础上做了⼀些补充和修改尺⼨单位

rpx，rpx是响应式像素,可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为

750rpx。如在iPhone6 上，屏幕宽度为

375px，共有750个物理像素，则

750rpx = 375px = 750物理像素使⽤

@import标识符来导⼊外联样式。@import后跟需要导⼊的外联样式表的相对路径，⽤;表⽰语句结束/** **/@import './';.container{color: red;}五、⼩程序页⾯间有哪些传递数据的⽅法使⽤全局变量实现数据传递，在

⽂件中定义全局变量

globalData， 将需要存储的信息存放在⾥⾯// ({//

全局变量globalData: {userInfo: null}})使⽤的时候，直接使⽤getApp() 拿到存储的信息使⽤

teTo与

ctTo的时候，可以将部分数据放在

url⾥⾯，并在新页⾯

onLoad 的时候初始化//// teTo({url: '../pageD/pageD?name=raymond&gender=male',})// ctTo({url: '../pageD/pageD?name=raymond&gender=male',})// ...Page({onLoad: function(option){( + 'is' + )a({option: option})}})需要注意的问题：teTo和

ctTo不允许跳转到tab所包含的页⾯onLoad只执⾏⼀次使⽤本地缓存

Storage 相关六、⼩程序的⽣命周期函数onLoad页⾯加载时触发。⼀个页⾯只会调⽤⼀次，可以在

onLoad的参数中获取打开当前页⾯路径中的参数onShow()页⾯显⽰/切⼊前台时触发onReady() 页⾯初次渲染完成时触发。⼀个页⾯只会调⽤⼀次，代表页⾯已经准备妥当，可以和视图层进⾏交互onHide() 页⾯隐藏/切⼊后台时触发。 如

navigateTo 或底部

tab 切换到其他页⾯，⼩程序切⼊后台等onUnload() 页⾯卸载时触发。如

redirectTo或

navigateBack到其他页⾯时可以参考下⾯的这篇⽂章七、怎么封装微信⼩程序的数据请求1. promise 的封装const baseUrl = '';const http = ({ url = '', param = {}, ...other } = {}) => { ading({ title: '请求中，请耐⼼等待..' }); let timeStart = (); return new Promise((resolve, reject) => { t({ url: getUrl(url), data: param, header: { 'content-type': 'application/json' //

默认值 ,另⼀种是 "content-type": "application/x-www-form-urlencoded" }, ...other, complete: (res) => { ading(); (`耗时${() - timeStart}`); if (Code >= 200 && Code < 300) { resolve() } else { reject(res) } } }) })}const getUrl = (url) => { if (f('://') == -1) { url = baseUrl + url; } return url}// get⽅法const _get = (url, param = {}) => { return http({ url, param })}const _post = (url, param = {}) => { return http({ url, param, method: 'post' })}const _put = (url, param = {}) => { return http({ url, param, method: 'put' })}const _delete = (url, param = {}) => { return http({ url, param, param, method: 'put' })}s = { baseUrl, _get, _post, _put, _delete}2. 使⽤封装的请求const api = require('../../utils/')//

单个请求('list').then(res => { (res)}).catch(e => { (e)})//

⼀个页⾯多个请求([ ('list'), (`detail/${id}`)]).then(result => { (result)}).catch(e => { (e)})详细的可以参考下⾯的这篇⽂章⼋、 哪些⽅法可以⽤来提⾼微信⼩程序的应⽤速度1. 提⾼页⾯加载速度2. ⽤户⾏为预测3. 减少默认

data 的⼤⼩4. 组件化⽅案九、微信⼩程序的优劣势1. 优势：即⽤即⾛，不⽤安装，省流量，省安装时间，不占⽤桌⾯依托微信流量，天⽣推⼴传播优势开发成本⽐

App 低2. 缺点：⽤户留存，即⽤即⾛是优势，也存在⼀些问题⼊⼝相对传统

App 要深很多限制较多，页⾯⼤⼩不能超过2M。不能打开超过10个层级的页⾯⼗、怎么解决⼩程序的异步请求问题⼩程序⽀持⼤部分

ES6语法，所以解决思路是：在返回成功的回调⾥⾯处理逻辑Promise异步⼗⼀、⼩程序关联微信公众号如何确定⽤户的唯⼀性如果开发者拥有多个移动应⽤、⽹站应⽤、和公众帐号（包括⼩程序），可通过

unionid 来区分⽤户的唯⼀性，因为只要是同⼀个微信开放平台帐号下的移动应⽤、⽹站应⽤和公众帐号（包括⼩程序），⽤户的

unionid 是唯⼀的。换句话说，同⼀⽤户，对同⼀个微信开放平台下的不同应⽤，unionid是相同的⼗⼆、如何实现下拉刷新⾸先在全局

config中的

window 配置

enablePullDownRefresh在

Page中定义

onPullDownRefresh钩⼦函数,到达下拉刷新条件后，该钩⼦函数执⾏，发起请求⽅法请求返回后，调⽤

llDownRefresh 停⽌下拉刷新详细的可以参考下⾯的这篇⽂章⼗三、 bindtap和catchtap的区别是什么相同点：⾸先他们都是作为点击事件函数，就是点击时触发，在这个作⽤上他们是⼀样的，可以不做区分不同点：他们的不同点主要是bindtap是不会阻⽌冒泡事件的，catchtap是阻值冒泡的⼗四、简述下 teTo(), ctTo(), Tab(), teBack(), ch()的区别teTo()：保留当前页⾯，跳转到应⽤内的某个页⾯，但是不能跳到

tabBar 页⾯ctTo()：关闭当前页⾯，跳转到应⽤内的某个页⾯，但是不允许跳转到

tabBar 页⾯Tab()：跳转到

tabBar 页⾯，并关闭其他所有⾮

tabBar 页⾯teBack()关闭当前页⾯，返回上⼀页⾯或多级页⾯，可通过

getCurrentPages()获取当前的页⾯栈，决定需要返回⼏层ch()：关闭所有页⾯，打开到应⽤内的某个页⾯