微信小程序面试题(最新)
1. 简述微信小程序的运行机制
热启动 ：假如⽤户已经打开了某个⼩程序，在⼀定时间内再次打开⼩程序的话，这个时候我们就不再需要重新启动了，这需要把我们的后台打开的⼩程序切换到前台来使⽤。
冷启动：⽤户⾸次打开⼩程序或被微信主动销毁再次打开的情况，此时⼩程序需要重新加载启动。
2. 分析一下小程序的优劣势
优势
无需下载，通过搜索和扫一扫就可以打开
良好的用户体验：打开速度快 开发成本比App要低
安卓上可以添加到桌面，与原生App差不多
为用户提供良好的安全保障。
劣势：
限制较多。
样式单一。
推广面窄，不能分享朋友圈，
依托于微信，无法开发后台管理功能
3. 简单描述下微信小程序的相关文件类型
微信小程序项目结构主要有四个文件类型,如下：
- WXML可以构建出页面的结构
2.WXSS 是一套样式语言，用于描述 WXML 的组件样式
3.js逻辑处理，网络请求
4.json小程序配置文件
5.app.json作为配置文件入口，整个小程序的全局配置。
6.app.js必须要有这个文件，没有也是会报错
7.app.wxss全局页面样式设置，在app.wxss中设置的样式可以在小程序的所有页面生效
4. 请谈谈小程序的生命周期函数(应用 页面的 )
onLoad()：页面加载时触发
onShow()：页面显示/切入前台时触发
onReady()：页面初次渲染完成时触发
onHide()：页面隐藏/切入后台时触发
onUnload()：页面卸载时触发
onPullDownRefresh()：下拉刷新的钩子函数
onReachBottom()：上翻到底的钩子函数
5. 请谈谈小程序的组件生命周期函数
created()：组件实例刚刚被创建好时触发。
attached()：在组件完全初始化完毕、进入页面节点树后触发。
detached() 组件离开页面节点树后触发。
6. 微信小程序中的路由及其区别
// wx.navigateTo()：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
// wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
// wx.switchTab()：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
// wx.navigateBack()关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层
// wx.reLaunch()：关闭所有页面，打开到应用内的某个页面
7. 说出小程序当中常用的UI组件
视图容器组件：view、swiper、swiper-item
基础内容组件：text、icon、rich-text
表单组件：button、form checkbox、input
导航组件：navigator
媒体组件：image、
8. 谈一谈你对wxs的理解
概念：wxs（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构
特点：
没有兼容性
与JavaScript不同
隔离性
不能作为事件回调
ios设备上比javascript运行快
wxs遵循CommonJs模块化规范
支持的数据类型：
number：数值类型
string：字符串类型
boolean：布尔类型
object：对象类型
function：函数类型
array：数组类型
date：日期类型
regexp：正则
9. 简述一下wx:if和hidden的区别
1.`wx:if `动态创建或销毁对应的UI结构
2.`wx:if `条件为 false，什么也不做;为true时，才开始局部渲染
3.`hidden `简单的控制组件的显示与隐藏
4.`wx:if `有更高的切换消耗而 `hidden `有更高的初始渲染消耗。频繁切换的情况下，用 `hidden `更好，运行时条件不大可能改变则 `wx:if` 较好。
10. 说出小程序中父子组件通信的三种方式
属性绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容的数据
事件绑定：用于子组件向父组件传递数据，可以传递任意数据
获取组件实例：父组件还可以通过this.selectComponent() 获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法
11.什么是分包加载，如何使用分包加载
1.概念 减少首屏加载时间，用户在使用时按需进行加载
2.使用
1. 在app.json中配置项目分包结构
2. 配置`subpackages`属性
subpackages: {
"root": "分包的根目录",
"pages": [""] // 需要按需加载的包所在路径
}
12. 小程序中如何自定义组件
在根目录新建一个components文件夹，然后在这个文件夹下放置自定义的组件，需要用到某个自定义组件时，就在它里面的json文件中配置 "component": true
在父组件的json文件中的usingComponents中导入这个组件
usingComponents: {
"自定义组件名": "自定义组件所在路径"
}
13. 小程序中如何自定义tabBar
在 app.json 中的 tabBar 项指定 custom 字段
在所有 tab 页的 json 里声明 usingComponents 项，或者在 app.json 中全局开启
在代码根目录下创建custom-tab-bar文件夹，里面放自定义的tabBar文件
编写tabBar代码
14. ⼩程序WXSS与CSS 的区别
wxss 背景图⽚只能引⼊外链，不能使⽤本地图⽚
⼩程序样式使⽤ @import 引⼊ 外联样式⽂件，地址为相对路径。
尺⼨单位为 rpx , rpx 是响应式像素,可以根据屏幕宽度进⾏⾃适应。
15. ⼩程序的双向绑定和Vue哪⾥不⼀样?
⼩程序 直接使⽤this.data.key = value 是 不能更新到视图当中的。必须使⽤ this.setData({ key ：value }) 来更新值
16. 在wepy中如何将异步API promise化
下载模块@wepy/use-promisify
npm i @wepy/use-promisify
在app.wpy中引入该模块
import promisify from '@wepy/use-promisify'
在app.wpy中，将promisify方法挂载到wepy上
wepy.use(promisify)
使用
wepy.wx.request('url地址')
17. ⼩程序怎么实现下拉刷新
两种⽅案
⽅案 ⼀ ：
通过在 app.json 中， 将 "enablePullDownRefresh": true, 开启全局下拉刷新。
或者通过在 组件 .json ， 将 "enablePullDownRefresh": true, 单组件下拉刷新。
⽅案⼆：
scroll-view ：使⽤该滚动组件 ⾃定义刷新，通过 bindscrolltoupper 属性， 当滚动到顶部/左边，会触发 scrolltoupper事件，所以我们可以利⽤这个属性，来实现下拉刷新功能。
18. 使用wepy框架初始化项目的步骤
下载项目模板
npm i standard 项目名(mypro)
进入到项目目录
cd mypro
下载依赖
npm i
运行项目
npm run dev
19. bindtap和catchtap区别
相同点： 都是点击事件
不同点： bindtap 不会阻⽌冒泡， catchtap 可以阻⽌冒泡。
20. ⼩程序怎么跟随事件传值
在 ⻚⾯标签上通过 绑定 dataset-key = value ， 然后绑定点击通过e.currentTarget.dataset.key 来获取标签上绑定的值
get(e){ console.log(e.currentTarget.dataset.name) },
21. uni-app的配置文件、入口文件、主组件、页面管理部分
pages.json 配置文件
main.js 入口文件
App.vue 主组件
pages 页面管理部分
22. 如何封装⼩程序请求
封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常⽤⽅法 POST , GET , DELETE , PUT .... 最后导出这些⽅法然后新建⼀个 api.js ⽂件，导⼊封装好的⽅法，然后调取相应的⽅法，传递数据。
封装：
var app = getApp(); //获取⼩程序全局唯⼀app实例
var host = '******************'; //接⼝地址
//POST请求
function post(url, data, success,fail)
{
request(url, postData, "POST", doSuccess, doFail);
}
//GET请求
function get(url, data, success, fail)
{
request(url, postData, "GET", doSuccess, doFail);
}
function request(url, data, method, success, fail)
{
wx.showLoading({ title: "正在加载中...", })
wx.request({
url: host + url, //请求地址
method: method, //请求⽅法
header: { //请求头
"Content-Type": "application/json;charset=UTF-8"
},
data: data, //请求参数
dataType: 'json', //返回数据格式
responseType: 'text', //响应的数据类型
success: function(res) { //成功执⾏⽅法，参数值为res.data,直接将返回的数据传⼊
wx.hideLoading();
success(res.data);
},
fail: function() { //失败执⾏⽅法 fail(); },
})
}
module.exports = { postRequest: post, getRequest: get,}
组件使⽤ 封装好的请求：
var http = require('../../utils/request.js'); //相对路径
var params = {//请求参数 id:this.data.userId}
http.postRequest("user/delUser", params, function(res) { console.log("修改成功！"); }, function(res) { console.log("修改失败！！！")})
总结：
在src目录中新建一个utils目录，在目录中新建一个request.js,在request.js中首先获取整个小程序的实例来保证能调用wx所有方法，定义get和post等请求的方法，然后在get或者post请求的方法中设置wx.showToast()，然后通过wx.request来实现get或者post请求，在success中，关闭loading，然后通过回调的形式返回拿到的数据
调用：
首先要导入包
var http=require("../utils/request.js")
在方法中通过http.get方法（参数，回调）来调用
23. uniapp获取地理位置的API是什么？
nui.getLocation()
24. ⼩程序有哪些传递数据的⽅法
使⽤全局变量在 app.js 中的 this.globalData = { } 中放⼊要存储的数据。在 组件.js 中， 头部 引⼊ const app = getApp(); 获取到全局变量直接使⽤ app.globalData.key 来进⾏赋值和获取值。
使⽤ 路由wx.navigateTo 和 wx.redirectTo 时，可以通过在 url 后 拼接 + 变量， 然后在 ⽬标⻚⾯ 通过在 onLoad 周期中，通过参数来获取传递过来的值。
使用本地存储
25. 分别说出vue、小程序、uni-app中的本地存储数据和接受数据是什么
vue：
存储：localstorage.setItem
接收：localstorage.getItem
微信小程序：
存储：wx.setStorage/wx.setStorageSync
接收：wx.getStorage/wx.getStorageSync
uni-app：
存储：uni.setStorage
接收：uni.getStorage。
26. app.json全局配置⽂件描述
pages : ⽤于存放当前⼩程序的所有⻚⾯路径
window : ⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊配置。
tabBar : ⼩程序底部的 Tab ,最多5个，最少2个。
27. uni-app如何监听页面滚动
使用onPageScroll监听
28. 如何让图片宽度不变，高度自动变化，保持原图片宽高比不变
给image标签添加 mode='widthFix'
29. ⼩程序什么时候会主动销毁？
⼩程序在进⼊后台之后，客户端会帮我们在⼀定时间内维持我们的⼀个状态，超过五分钟后，会被微信主动销毁.官⽅也没有明确说明 什么时候销毁， 在不同机型表现也不⼀样，2019年开发时：时间官⽅⽂档没有说明，但是经过询问⼀般指5分钟内2020年开发时：时间官⽅⽂档没有说明，实测安卓没有固定时间，内存⾜够情况下，有时候⼀天了还在，有时候⼏分钟就没了
30. uniapp进行条件编译的两种方法？小程序端和H5的代表值是什么？
条件编译的两种方法
#ifdef
#ifndef
小程序端和H5的代表值
H5：H5
MP-WEIXIN：微信小程序
31. 哪些方法可以用来提高微信小程序的应用速度
1、提高页面加载速度
2、用户行为预测
3、减少默认 data 的大小
4、组件化方案
32. 小程序关联微信公众号如何确定用户的唯一性
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的
33. 小程序怎样进行本地存储的读、写、删、清？请写出同步及异步两种类型
同步：（1）wx.setStorageSync(); //存储值
（2）wx.removeStorageSync(); // 移除指定的值
（3）wx.getStorageSync(); // 获取值
（4）wx.getStorageInfoSync(); // 获取当前 storage 中所有的 key
（5）wx.clearStorageSync(); // 清除所有的key
异步：（1）wx.setStorage(); //存储值
（2）wx.removeStorage(); // 移除指定的值
（3）wx.getStorage(); // 获取值
（4）wx.getStorageInfo(); // 获取当前 storage 中所有的 key
（5）wx.clearStorage(); // 清除所有的key
34. 小程序中获取openid的方法？
通过login获取code，再根据code获取openid
35. 小程序for循环中的key值有什么用
保持列表中项目的特征和状态;
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
36. 微信小程序如何跳转到外部小程序
wx.navigateToMiniProgram(Object object)
37. 小程序微信支付API？以及参数有哪些
wx.requestPayment(Object object)
38. 小程序和Vue写法的区别
①遍历的时候：小程序wx:for = "lists",而Vue是v-for = "item in lists"
②调用data模型（赋值）的时候：
小程序：this.data.item //调用
this.setData({item:1}) //赋值
vue: this.item //调用
this.item =1 //赋值
39. 小程序还有哪些功能？
客服功能，录音，视频，音频，地图，定位，拍照，动画，canvas
40. uniapp的配置文件、入口文件、主组件、页面管理部分
pages.json 配置文件 main.js 入口文件 App.vue 主组件 pages 页面管理部分
41. uniapp上传文件时用到api是什么 格式是什么？
uni.uploadFile({
url: '要上传的地址',
fileType:'image',
filePath:'图片路径',
name:'文件对应的key',
success: function(res){
console.log(res)
},
})
42. rpx、px、em、rem、%、vh、vw的区别是什么？
rpx 相当于把屏幕宽度分为750份，1份就是1rpx px 绝对单位，页面按精确像素展示 em 相对单位，相对于它的父节点字体进行计算 rem 相对单位，相对根节点html的字体大小来计算 % 一般来说就是相对于父元素 vh 视窗高度，1vh等于视窗高度的1% vw 视窗宽度，1vw等于视窗宽度的1%
43. uni-app的优缺点
优点: a. 一套代码可以生成多端 b. 学习成本低,语法是vue的,组件是小程序的 c. 拓展能力强 d. 使用HBuilderX开发,支持vue语法 e. 突破了系统对H5条用原生能力的限制 缺点: a. 问世时间短,很多地方不完善 b. 社区不大 c. 官方对问题的反馈不及时 d. 在Android平台上比微信小程序和iOS差 e. 文件命名受限
44. 简述小程序的原理
小程序分为两个部分webview和appService，webview用来展现UI，appService用来处理业务逻辑、数据及接口调用，它们在两个进程中运行，通过系统层JSBridge实现通信，完成UI渲染、事件处理。
45. setData的回调函数
微信小程序的setData实现是和react的setData实现类似的，所以它也是一个异步函数，并且有回调函数的参数，当然平时小量数据我们可能并没有感觉到它的异步，但是为了确保逻辑的正确执行，在需要用到setData后 data里的数据的步骤，请写入setData的回调函数中，如下示例：
this.setData({
a: this.data.a++
},()=>{
})
46. 请写出小程序的完整开发流程
1.申请账号并完善信息
2.下载安装开发工具
3.开发小程序
4.上传代码
5.提交审核
6.发布
47. 简述下app.json文件
必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的window背景色，配置导航条样式，配置默认标题。
48. 使用webview直接加载要注意哪些事项
一、必须要在小程序后台使用管理员添加业务域名；二、h5页面跳转至小程序的脚本必须是1.3.1以上；三、微信分享只可以都是小程序的主名称了，如果要自定义分享的内容，需小程序版本在1.7.1以上；四、h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的。
49. 简述小程序订阅号服务号的区别
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。
订阅号是腾讯在微信平台上推出的一个功能，普通用户可以像订阅报纸一样，每日获得所关注的订阅公众号推送的消息。申请订阅号的用户则可以每日推送一些消息给关注的用户。
服务号给企业和组织提供更强大的业务服务与用户管理能力，帮助企业快速实现全新的公众号服务平台。
50. 请写出预览图片的api
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
51. 请写出选择地址的api
wx.chooseAddress({
success (res) {
console.log(res.userName)
console.log(res.postalCode)
console.log(res.provinceName)
console.log(res.cityName)
console.log(res.countyName)
console.log(res.detailInfo)
console.log(res.nationalCode)
console.log(res.telNumber)
}
})
52. 请写出设置导航栏标题的办法
全局 app.json配置 navigationBarTitleText： “”
单个页面json配置 navigationBarTitleText： “”
wx.setNavigationBarTitle({
title: '当前页面'
})
53. 没有授权小程序用户信息的情况下，小程序如何展示用户头像和昵称
54. 小程序设置tabbar徽标的api
wx.setTabBarBadge({
index: 0,
text: '1'
})
55. 小程序是双向数据绑定吗？怎么更新data
不是， 用setData（）更新
56. 小程序转发的方式
通过用户点击右上角 ... 转发
通过 button组件，将open-type属性设置为 share
57. 小程序获取场景值的方法？
let options = wx.getLanchOptionsSync()
58. 小程序onPageScroll方法的使用注意什么
由于此方法调用频繁，不需要时，可以去掉，不要保留空方法，并且使用onPageScroll时，尽量避免使用setData()，尽量减少setData()的使用频次
59. 小程序同步API和异步API使用时注意事项
像wx.setStorageSync这种以Sync结尾的API为同步API，使用时使用try-catch来查看异常，如果判定API为异步，可以在其回调方法success、fail、complete中进行下一步操作
60. 小程序组件有监听属性吗，简述一下
有，observers;可以监听 data或者properties内的数据的变化
observers: {
num(newVal,oldVal){
}
}