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

1.阐述一下微信公众平台账号的分类？

微信公众账号分为订阅号、服务号、小程序(含小游戏)、企业微信(原企业号)

2.阐述一下不同公众账号的特点？

订阅号：
为媒体和个人提供一种新的信息传播方式，主要功能是在微信侧给用户传达资讯。一天群发1次，显示在订阅号文件内，高级接口有限制
服务号：
为企业和组织提供更强大的业务服务与用户管理能力，主要偏向服务类交互。不适合个人。每月群发4次，能够使用高级接口。
企业微信：
企业的专业办公管理工具。与微信一致的沟通体验，提供丰富免费的办公应用，并与微信消息、小程序、微信支付等互通，助力企业高效办公和管理。
小程序：
小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

3.阐述一下微信小程序的优劣势？

●优点
1）开发成本跟H5差不多，相对来说开发成本比APP要低。
2）运行速度跟APP差不多，也能做出很多H5不做到的功能，例如GPS定位、录音、拍视频、重力感应等
3）主要的样式代码都封装在微信小程序里面，所以打开速度比普通的H5要快，接近原生APP。
4）对用户使用上来说，确实方便，要用的时候打开，不用的时候关掉，即用即走。这点比需要下载，还要占用手机内存空间的APP要好。
5）开发难度较低

●缺点
1）目前小程序文件不能超过2M的大小，限制了很多大型的小程序开发，所以，目前的很多小程序都是简化版的APP，功能简单，无法真正代替APP。
2）小程序暂不支持直接分享到朋友圈
3）小程序的内容发布需要经过腾讯官方审核，并且对行业，内容有限制，某些行业不能在小程序上线。 同时，需要审核也导致小程序不能即做即发布。
4）对个人开发者开发的服务项目限制很大
4.微信小程序开发过程中，涉及到的版本类型有哪些？
开发版本、审核版本、线上版本、体验版本

5.微信开发者工具主页面主要分为哪些部分？
开发者工具主界面，从上到下，从左到右，分别为：菜单栏、工具栏、模拟器、编辑器、调试器五大部分
6.微信小程序中，如何快速的创建 QuickStart 项目？
新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID（可以使用测试appid），给你的项目起一个好听的名字，最后，勾选 “创建 QuickStart 项目” （注意: 你要选择一个空的目录才会有这个选项），点击确定，你就得到了你的第一个小程序了
7.谈谈微信小程序主要目录和文件的作用？
· project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
· App.js 设置一些全局的基础数据等；
· App.json 底部tab, 标题栏和路由等设置；
· App.wxss 公共样式，引入iconfont等；
· pages 里面包含一个个具体的页面；
· index.json (配置当前页面标题和引入组件等)；
· index.wxml (页面结构)；
· index.wxss (页面样式表)；
· index.js (页面的逻辑，请求和数据处理等)；

8.全局配置文件是哪个？能进行哪些配置？

App.json
能够设置小程序页面路径、窗口表现、底部TabBar，以及网络超时等设置

9.在全局文件中配置tabBar时需要注意哪些？
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，

10.微信小程序中如何去注册小程序实例并且如何获取app实例
注册：
在app.js中调用，必须调用且只能调用一次。
语法：App(Object object) 注册小程序，接受一个object参数，其指定生命周期函数等
获取：
开发者可以在其他页面js文件通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

11.阐述一下页面js文件中，Page对象内，data属性的作用？
data 是页面第一次渲染使用的初始数据。页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。渲染层可以通过 WXML 对数据进行绑定。
12.列举出页面js文件中常用的生命周期函数？
①　onLoad(Object query)
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
参数 query 数据类型为object，值为打开当前页面路径中的参数

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

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

④　onPullDownRefresh()
监听用户下拉刷新事件
注意需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。

⑤　onReachBottom()
监听用户上拉触底事件。

13.微信小程序中如何实现基础的数据绑定？
wxml中的动态数据均来自于对应的js文件Page中的data。而我们微信小程序和vue.js语法类似，也是使用Mustache(也就是双花括号)语法，将变量包起来，进行变量解析

14.微信小程序数据绑定的时候，碰见关键字时，如何处理？
在wxml组件中，会经常涉及一些通过布尔值的值的不同，来动态改变组件的一些显示效果。此时wxml的布尔值，需要在双花括号内，同时也需要在双引号内。
true：boolean 类型的 true，代表真值。
false： boolean 类型的 false，代表假值。

15.微信小程序中，如何实现列表渲染，并且有哪些需要注意的？
我们在组件上可以使用wx:for来进行数据的列表渲染操作，即可使用变量中各项的数据重复渲染该组件。
默认数组/对象的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item，使用 wx:for-item 可以指定数组当前元素的变量名，使用 wx:for-index 可以指定数组当前下标的变量名

16.在小程序中，实现九九乘法表的效果？



{{i}} * {{j}} = {{i * j}}

17.阐述一下微信小程序列表渲染中wx：key的作用？
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供:
①　字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
②　保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

18.微信小程序block的含义？
并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。可以将 wx:for 用在标签上，以渲染一个包含多节点的结构块。
19.微信小程序中，如何实现条件渲染操作？用代码举例说明！
在小程序开发过程中，我们也会经常碰见分支操作，这里我们称为条件渲染，而在小程序中实现条件渲染，我们使用wx:if
如：
1
2
3
20.简单阐述一下wx:if 与Hidden的区别？

hidden是一个特殊的属性，通过值的真假不同，来判定当前组件显示与隐藏切换，和wx:if有些异曲同工之处，但是二者还是有不同之处:
①　因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
②　同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
③　相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
④　一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

21.微信小程序中如何定义模板及使用模板？
类似于vue.js一样，微信小程序也是存在模板语法的，WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义：
使用 name 属性，作为模板的名字。然后在内定义代码片段
使用：
使用 is 属性，声明需要使用的模板，然后将模板所需要的 data 传入

22.阐述一下import与include的不同之处？
import可以在该文件中使用目标文件定义的template
include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置。

23.wxss文件与css文件有哪些不同？
与 CSS 相比，WXSS 扩展的特性有：
①　尺寸单位 rpx
②　样式导入 @import “相对路径”;

24.微信小程序中，什么是事件？
①　事件是视图层到逻辑层的通讯方式。
②　事件可以将用户的行为反馈到逻辑层进行处理。
③　事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
④　事件对象可以携带额外信息，如 id, dataset, touches。

25.微信小程序中事件的分类？
事件分为冒泡事件和非冒泡事件。
冒泡事件：
与js中冒泡事件类似，当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：
当一个组件上的事件被触发后，该事件不会向父节点传递。
26.微信小程序如何去绑定事件？
事件绑定的写法同组件的属性，以 key、value 的形式。
①　key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
②　value 是一个字符串，需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错

27.微信小程序中bind与catch有什么不同？
●bind
bind事件绑定不会阻止冒泡事件向上冒泡

●catch
catch事件绑定可以阻止冒泡事件向上冒泡。

28.微信小程序中如何获取data内的数据，并且从新赋值，用代码说明？
Page({
//定义初始化数据
data: {
name: ”mary”,
message: ”ma”
}，
onready: function() {
//获取初始化数据
console.log(this.data.name)
//设置
This.setData({
Name:”jack”
})
}
})

29.组件的公共属性有哪些？
Id、clas、style、bind、catch、hidden、data-*

30.列举出至少10个常用的组件，并且说明含义？
view 视图容器
swiper 滑块视图容器
scroll-view 可滚动视图区域
Icon 图标
text 文本
progress 进度条
rich-text 富文本
button 按钮
checkbox 多项选择
radio 单项选择
input 输入框
switch 开关选择器

31.微信小程序如何进行模块操作？代码说明？
我们在创建一个模块时，需要创建一个单独的js文件即可。在当前js文件内，可以正常使用js语法。可以使用module.exports进行模块暴露，使用require进行模块引用

//common.js
let json = [{
name: “json”,
message: “数据格式”
}, {
name: “xml”,
message: “数据格式”
}]
module.exports.json = json;
//test.js
var common = require(‘common.js’)
console.log(common.json);

32.例举出常用的路由Api并说明其含义？
navigateTo
保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabBar 页面。使用 wx.navigateBack 可以返回到原页面。

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

redirectTo
关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabBar 页面。

switchTab
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

reLaunch
关闭所有页面，打开到应用内的某个页面

33.微信小程序常用的传值方式？
使用data-*
使用id
使用路由加参数的方式

34.微信小程序如何将数据进行本地存储并且如何获取？
存储：
wx.setStorage(object objetc)

获取：
wx.getStorage(object object)
35.小程序如何发起网络请求，并且需要注意什么？
wx.request(object object) 发起 HTTPS 网络请求
示例：

wx.request({
url: ‘test.php’, //仅为示例，并非真实的接口地址
data: {
Name:””
},
header: {
‘content-type’: ‘application/json’ // 默认值
},
success (res) {
console.log(res.data)
}
})

注意：请求的网络地址在开发过程中可以在开发者工具中进行不检测的设置，如果上线的话，一定要在小程序后台配置。
54. 小程序的生命周期函数
onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。
55 微信小程序架构原理
小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和appService两个部分；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
56. 小程序的双向绑定和vue的异同
大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！
57. wxml与标准的html的异同
wxml基于xml设计，标签只能在微信小程序中使用，不能使用html的标签
58. 微信小程序中的js运行环境和浏览器js的运行环境有什么不同？
微信小程序js运行环境是jsCore中，没有window和document对象

59 简单描述下微信小程序的相关文件类型
微信小程序项目结构主要有四个文件类型
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。内部主要是微信自己定义的一套组件
WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
js 逻辑处理，网络请求
json 小程序设置，如页面注册，页面标题及tabBar
主要文件
app.json 必须要有这个文件，如果没有这个文件，项目无法运行，因为微信框架把这个作为配置文件入口，整个小程序的全局配置。包括页面注册，网络设置，以及小程序的 window 背景色，配置导航条样式，配置默认标题
app.js 必须要有这个文件，没有也是会报错！但是这个文件创建一下就行 什么都不需要写以后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量
app.wxss 可选
60. 小程序的wxss和css有哪些不一样的地方
WXSS 和 CSS 类似，不过在 CSS 的基础上做了一些补充和修改
尺寸单位 rpx
rpx 是响应式像素,可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素
使用 @import 标识符来导入外联样式。@import 后跟需要导入的外联样式表的相对路径，用;表示语句结束
/** index.wxss **/
@import ‘./base.wxss’;.container{
color: red;
}
61. 小程序页面间有哪些传递数据的方法
使用全局变量实现数据传递
在 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 相关
62 怎么封装微信小程序的数据请求
在根目录下创建utils目录及api.js文件和apiConfig.js文件；
在apiConfig.js 封装基础的get, post 和 put， upload等请求方法，设置请求体，带上token和异常处理等；
在api中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls, 设置对应的方法并导出；
在具体的页面中导入；
63. 哪些方法可以用来提高微信小程序的应用速度
1、提高页面加载速度
2、用户行为预测
3、减少默认 data 的大小
4、组件化方案
64. 微信小程序的优劣势
优势
即用即走，不用安装，省流量，省安装时间，不占用桌面
依托微信流量，天生推广传播优势
开发成本比 App 低
缺点
用户留存，即用即走是优势，也存在一些问题
入口相对传统 App 要深很多
限制较多,页面大小不能超过2M。不能打开超过10个层级的页面
65. 怎么解决小程序的异步请求问题
小程序支持大部分 ES6 语法
在返回成功的回调里面处理逻辑
Promise 异步
66. 小程序关联微信公众号如何确定用户的唯一性
如果开发者拥有多个移动应用、网站应用、和公众帐号（包括小程序），可通过 unionid 来区分用户的唯一性，因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号（包括小程序），用户的 unionid 是唯一的。换句话说，同一用户，对同一个微信开放平台下的不同应用，unionid 是相同的
67. 如何实现下拉刷新
首先在全局 config 中的 window 配置 enablePullDownRefresh
在 Page 中定义 onPullDownRefresh 钩子函数,到达下拉刷新条件后，该钩子函数执行，发起请求方法
请求返回后，调用 wx.stopPullDownRefresh 停止下拉刷新
68. bindtap和catchtap的区别是什么
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的
69. 简述下 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()：关闭所有页面，打开到应用内的某个页面

70.请谈谈原生开发小程序、wepy、mpvue 的对比？
个人认为，如果是新项目，且没有旧的 h5 项目迁移，则考虑用小程序原生开发，好处是相比于第三方框架，坑少。
而如果有 老的 h5 项目是 vue 开发 或者 也有 h5 项目也需要小程序开发，则比较适合 wepy 或者 mpvue 来做迁移或者开发，近期看wepy几乎不更新了，所以推荐美团的mpvue。
而如果如果团队前端强大，自己做一套框架也没问题。