微信小程序面试题汇总

大家好，欢迎来到IT知识分享网。

面试题 1. 请简述微信小程序主要目录和文件的作用？

参考回答：

微信小程序主要目录和文件的作用： （1）project.config.json：项目配置文件，用的最多的就是配置是否开启https校验 （2）App.js：设置一些全局的基础数据等 （3）App.json：底部tab，标题栏和路由等设置 （4）App.wxss：公共样式，引入iconfont等 （5）pages：里面包含一个个具体的页面 （6）index.json：配置当前页面标题和引入组件 （7）index.wxml：页面结构 （8）index.wxss：页面样式表 （9）index.js：页面的逻辑，请求和数据处理 

面试题 2. 简述wxml与标准的Html的异同？

参考回答：

1.标签名称不同 HTML（div，span，img，a） WXML（2view，text，image，navigator） 2.属性节点不同 HTML :超链接 WXML : 3.WXML中提供了类似于Vue中的模板语法 数据绑定 列表渲染 条件渲染 WXML可以通过上述模板语法快速实现一些功能 

面试题 3. 请简述WXSS和CSS的异同？

参考回答：

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

面试题 4. 简述如何怎么封装微信小程序的数据请求的？

参考回答：

方式一： 1、在小程序的目录下新建一个 api 的文件夹 2：在 api 文件夹中新建一个 config.js 文件，用于存放公共的服务器地址，内容如下： const baseUrl = 'https://www.baidu.com/'; export { baseUrl } 3：在 api 文件夹中新建一个 request.js 文件，用于存放封装的api请求，内容如下： import { baseUrl } from './http.js' module.exports = { /* * url:请求的接口地址 * methodType:请求方式 * data: 要传递的参数 */ request : function(url, methodType, data){ let fullUrl = `${baseUrl}${url}` let token = wx.getStorageSync('token') ? wx.getStorageSync('token') : '' wx.showLoading({ title: "加载中" }); return new Promise((resolve,reject)=>{ wx.request({ url: fullUrl, method:methodType, data, header: { 'content-type': 'application/json', // 默认值 'x-api-key': token, }, success: (res) => { if (res.data.status == 200) { resolve(res.data) }else{ wx.showToast({ title: res.data.msg, icon:'none' }) reject(res.data.message) } }, fail: () => { wx.showToast({ title: '接口请求错误', icon:'none' }) reject('接口请求错误') }, complete: () => { setTimeout(() => { wx.hideLoading() }, 100) } }) }) } } 4：在 api 文件夹中新建一个 index.js 文件，用于存放api请求的地址，内容如下： import { request } from './request' module.exports = { // 获取企业列表 getCompanyList: (data) => request('/company/getlist', 'GET', data), } 5：在文件中使用，内容如下： // 引入 api 下的 index 文件 const $api = require('../../api/index') // 在方法中调用 goList(){ let data = { aaa: this.data.cardCur, bbb: this.data.notice, } $api.getCompanyList(data).then((res) => { console.log(res,'res'); }) }, 方式二： 前3步是一样的，区别就是封装请求的不同 封装所有请求 api/http.js //引入封装的reuest请求 const { request } = require('./request.js') //基于业务封装的接口 module.exports = { // 登录 getLogin: (data) => { return request('/*/*/*/login', 'POST', data); }, // 获取企业信息 getCompanyList: (data) => { return request('/*/*/*/Company', 'GET', data); }, } 使用 // 引入登录接口 import { getLogin } from '../../api/http.js' Page({ data: { username: '', pwd: '' }, onLoad() { let params = { username: this.data.username, pwd: this.data.pwd } // 登录 getLogin(params).then(res => { wx.setStorageSync('Cookie', res.cookies[0]) wx.switchTab({ url: '../index/index' }) }) }, // 退出登录 handleLogOut() { wx.clearStorageSync() wx.navigateTo({ url: '../login/login' }) }, }) 

面试题 5. 微信小程序的双向绑定和Vue区别 ？

参考回答：

小程序 直接使用this.data.key = value 是 不能更新到视图当中的。 必须使用 this.setData({ key ：value }) 来更新值。 

面试题 6. 简述微信小程序的生命周期函数 ？

参考回答：

onLoad : 页面加载时触发。一个页面只会调用一次，可以在 onLoad的参数中获取打开当前页面路径中的参数 onShow : 页面显示 / 切入前台时触发调用。 onReady : 页面初次渲染完成时触发,一个页面只会调用一次。 onHide : 页面隐藏 / 切入后台时触发，如 navigateTo 或底部 tab切换到其他页面，小程序切入后台等 onUnload : 页面卸载时触发。如 redirectTo或 navigateBack 到其他页面时 

面试题 7. 小程序页面之间有哪些（传值）传递数据的方法？

参考回答：

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

面试题 8. 简述微信小程序原理和架构 ？

参考回答：

小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和APPService两个部分，webview主要用来展示UI，appservice用来处理业务逻辑，数据及接口调用，它们在两个进程中进行，通过系统层JSBridge实现通信，实现UI的渲染，事件处理；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
javaScript的代码是运行在微信App中的，因此一些h5技术的应用需要微信APP提供对应的API支持
wxml 微信自己基于xml语法开发的，因此在开发时只能使用微信提供的现有标签，html的标签是无法使用的
wxss具有css的大部分特性，但并不是所有都支持，没有详细文档（wxss的图片引入需要使用外链地址，没有body，样式可以使用import导入）

面试题 9. 描述下微信小程序的相关文件类型 ?

参考回答：

wxml 模板文件，是框架设计的一套标签预言，结合基础组件，事件系统，可以构建出页面的结构 wxss 样式文件，是一套样式语言，用于描述WXML的组件样式 js脚本逻辑文件。逻辑处理网络请求 json配置文件，小程序设置，如页面注册，页面标题及tabBar app.json 整个小程序的全局配置，包括： pages:[所有页面路径] 网络设置（网络超时事件） 页面表现（页面注册） window：（背景色，导航样式，默认标题） 底部tab等 app.js 监听并处理小程序的生命周期函数，声明全局变量 app.wxss 全局配置的样式文件 

面试题 10. 简述微信小程序的优劣势？

参考回答：

优势： 容易上手，基础组件库比较全，基本不需要考虑兼容问题 开发文档比较完善，开发社区比较活跃，支持插件式开发 良好的用户体验，无需下载，通过搜索和扫一扫就可以打开，打开速度快，安卓上可以添加到桌面，与原生APP差不多 开发成本比APP要低 为用户提供良好的保障（小程序发布，严格是审查流程） 劣势： 限制较多，页面大小不能超过1M，不能打开超过5个层级的页面 样式单一，部分组件已经是成型的，样式不可修改，例如：幻灯片，导航 推广面窄，不能分享朋友圈，只能通过分享给朋友，附加小程序推广 依托与微信，无法开发后台管理功能 后台调试麻烦，因为api接口必须https请求且公网地址 真机测试，个别安卓和苹果表现迥异，例如安卓的定位功能加载很慢 

面试题 11. 简述微信小程序和H5的区别？

参考回答：

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

面试题 12. 小程序关联微信公众号如何确定用户的唯一性？

参考回答：

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

面试题 13. 小程序使用webview直接加载要注意那些事项？

参考回答：

必须要在小程序后台使用管理员添加业务域名 h5页面跳转至小程序的脚步必须是1.3.1以上 微信分享只可以是小程序的主名称，如要自定义分享内容，需小程序版本在1.7.1以上 h5的支付不可以是微信公众号的appid，必须是小程序的appid，而且用户的openid也必须是用户和小程序的 

面试题 14. 微信小程序调用后台接口遇到那些问题？

参考回答：

1.数据的大小有限制，超过范围会直接导致整个小程序崩溃，除非重启小程 序；
2.小程序不可以直接渲染文章内容页这类型的 html 文本内容，若需显示要借住插件，但插件渲染会导致页面加载变慢，所以最好在后台对文章内容的 html 进行过滤，后台直接处理批量替换 p 标签 div 标签为 view 标签，然后其它的标签让插件来做，减轻前端的时间

面试题 15. 微信小程序如何实现下拉刷新？

参考回答：

用view代替scroll-view，设置onPullDownRefresh函数实现 

面试题 16. 简述Webview中的页面怎么跳转回小程序

参考回答：

wx.miniProgram.navigateTo({ url:'pages/login/login'+'$params' }) //跳转到小程序导航页面 wx.miniProgram.switchTab({ url:'/pages/index/index' }) 

面试题 17. 简述微信小程序bindtap和catchtap的区别？

参考回答：

1、什么是事件 　　(1) 事件是视图层到逻辑层的通讯方式。 　　(2) 事件可以将用户的行为反馈到逻辑层进行处理。 　　(3) 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。 　　(4) 事件对象可以携带额外信息，如 id,dataset,touches 2、如何使用事件 　　(1) 简单来说就是将事件绑定到组件上面，bindtap和catchtap都属于点击事件，绑定了之后点击组件可以触发这个函数。 　　(2) 函数tapName会接受一个参数event，event里面存储了一些函数调用的上下文信息 　　(3) 标签元素 1 Click me! 　　(4) 绑定事件 Page( { tapName: function(event) { console.log(event) } } ) 3、bindtap和catchtap的区别 　　(1) 相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分。 　　(2) 不同点：他们的不同点主要是bindtap是冒泡的，catchtap是非冒泡的。 4、小程序中事件分为冒泡事件和非冒泡事件。 　　(1) 本文以冒泡事件tap（手指触摸后马上离开，也就是点击事件）为例子来区别bind和catch事件 　　(2) bindtap? 事件绑定不会阻止冒泡事件向上冒泡 　　(3) catchtap? 事件绑定可以阻止冒泡事件向上冒泡 

面试题 18. 微信小程序与原生App那个好？

参考回答：

小程序的优点： 基于微信平台开发，享受微信自带的流量，这个优点最大 无需安装，只要打开微信就能用，不占手机内存，体验好 开发周期段，一般最多一个月就可以上线完成 开发所需的资金少，所需资金是开发原生APP的一半不到 小程序名称是唯一的，在微信的搜索里权重很高 容易上手，只要之前有HTML+CSS+JS基础知识，写小程序基本没有大问题 基本不需要考虑兼容性问题，只要微信可以正常运行的机器，就可以运行小程序 发布，审核高效，基本上午发布审核，下午就审核通过，升级简单，支持灰度发布 开发文档完善，社区活跃 支持插件式开发，一些基本功能可以开发成插件，供多个小程序使用 缺点： 局限性很强（比如页面大小不能超过1M，不能打开超过5个层级的页面，样式单一，小程序的部分组件已经是成型的了，样式不能修改，比如幻灯片，导航）只能依赖于微信依托与微信，无法开发后台管理功能 不利于推广，推广面窄，不能分享朋友圈，只能分享给朋友，附近小程序推广，其中附加小程序也收到微信限制 后台调试麻烦，因为API接口必须https请求，且公网地址，也就是说后台代码必须发布到远程服务器上；当然我们可以修改host进行dns映射把远程服务器转到本地，或者开启tomcat远程调试；不管怎么说终归调试比较麻烦 前台测试有诸多坑，最头疼莫过于模拟器与真机显示不一致 js引用只能使用绝对路径，不能操作DOM 原生App优点： 原生的相应速度快 对于有无网络操作时，譬如离线操作基本选用原生开发 需要调用系统硬件的功能（摄像头，拨号，短信蓝牙…） 在无网络或者弱网情况下体验好 原生App缺点： 开发周期长，开发成本高，需要下载 

面试题 19. 简述微信小程序授权登录流程 ？

参考回答：

1、当用户进入微信小程序时，首先我们先判断用户是否授权过此小程序 2、如果没有授权，我们通过一个按钮来实现授权登录 3、通过bindgetuserinfo事件，我们可以获取到个人的信息、加密偏移数据、加密用户信息（e.detail获取） 4.用户可以授权登录，也可以取消授权 5、根据登录接口返回的code码，判断用户是否时新用户 6、当用户注册成功后，在调登录接口，保存token。在有些页面需要使用token 7、在步骤1中，当我们授权过时，我们要看token是否存在 8、当token存在时，我们直接执行逻辑代码 9、当token不存在时，我们就需要登录，登录后判断返回的code码，在根据code码判断用户是否是新用户。最后保存token 

面试题 20. 简述下 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() : 关闭所有页面，打开到应用的某个页面 

面试题 21. 简述微信小程序 wx:if 和 hidden 的区别 ？

参考回答：

wx:if : 有更高的切换消耗。 hidden : 有更高的初始渲染消耗。 使用 频繁切换使用 hidden, 运行时条件变化使用 wx: if 

面试题 22. 简述小程序app.json 全局配置文件描述 ？

参考回答：

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

面试题 23. 请用代码显示如何封装小程序请求 ？

参考回答：

封装 wx.request 请求传递需要的参数( url , data , method , success 成功回调 ， fail 失败回调 ) , 封装常用方法 POST , GET , DELETE , PUT .... 最后导出这些方法 然后新建一个 api.js 文件，导入封装好的方法，然后调取相应的方法，传递数据。 wx.request 封装 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) { wx.hideLoading(); //成功执行方法，参数值为res.data,直接将返回的数据传入 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("修改失败！！！") } ) 

面试题 24. 简述小程序什么时候会主动销毁？

参考回答：

小程序在进入后台之后，客户端会帮我们在一定时间内维持我们的一个状态，超过五分钟后，会被微信主动销毁. 官方也没有明确说明 什么时候销毁， 在不同机型表现也不一样， 2019年开发时：时间官方文档没有说明，但是经过询问一般指5分钟内 2020年开发时：时间官方文档没有说明，实测安卓没有固定时间，内存足够情况下，有时候一天了还在，有时候几分钟就没了 

面试题 25. 微信小程序的原生组件有哪些？

参考回答：

以微信小程序为例，可以分成容器组件、基础组件、表单组件、媒体组件、开放能力组件等 

面试题 26. 简述小程序的兼容问题有哪些？

参考回答：

遇到的如下： 1，ios下的zIndex层级问题，主要发生在iphone7和iphoneX下 绝对定位必须有一个共同的父元素。 2，左右边框不生效 当边框的宽度设置为奇数的时候，可能会不生效 解决方法：将宽度设置为偶数的时候，在ios下就可以解决 3，还有尽量不要用margin-bottom ，当元素是在整个页面的最底部的时候，在ios下可能margin-bottom会失效，所以建议，都使用padding-bottom new Date跨平台兼容性问题 在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。 因为IOS下面不能识别这种格式，需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。var iosDate= date.replace(/-/g, '/'); wx.getUserInfo()接口更改问题 微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权 

面试题 27. 微信小程序中如何进行接口请求？会不会跨域，为什么 ？

参考回答：

微信小程序有自带的api接口，wx.request(); 不会跨域，因为微信小程序不是浏览器，没有同源策略的约束； wx.request({ url: 'https://xxxxxxx.com/api', method: "POST", data: { pageNum: 1, pageSize: 10 }, header: { "content-type": "application/x-www-form-urlencoded" }, success: res => { console.log(res) } }) 

面试题 28. 简述小程序的常用命令有哪些 ？

参考回答：

引用数据 { 
  {}} 逻辑渲染 wx:if wx:elif wx:else hidden 列表渲染 wx:for wx:for-item wx:for-index wx:key，使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名。 驱动视图 this.setData({}) 事件绑定 bind 

面试题 29. 微信小程序中的数据渲染与浏览器中有什么不同 ？

参考回答：

浏览器中渲染是单线程的; 而在小程序中的运行环境分成渲染层和逻辑层， WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层 

面试题 30. 简述微信小程序中如何进行事件的定义，传参方式 ？

参考回答：

程序中使用bind关键字绑定事件，但小程序中不能在绑定事件的同时为事件处理函数传递参数，可以为组件提供 data-* 自定义属性传参，其中 * 代表的是参数的名字。 事件传参 接收传递到的参数： tapTap(e){ console.log(e.currentTarget.dataset.param) // 打印结果为：事件传参 } 

面试题 31. 微信小程序如何进行页面的跳转传参以及接收数据 ？

参考回答：

最常用的两个页面的跳转和传参方式：①wx.navigateTo ②navigator标签 wx.navigateTo( { url: `/pages/details?id=$ { xxx } ` } ); 跳转到新页面 1 跳转页接收参数： onLoad (options) { console.log(options) this.setData( { goodsId:options.id, goodsName:options.name } ) } 其他方式： wx.switchTab() 用来 跳转至tabBar页面，并关闭其他所有非 tabBar 页面 wx.redirectTo() 和 wx.navigateTo() 一样，都 跳转至非tabBar页面，但会关闭当前页面 wx.reLaunch() 也是 跳转至非tabBar页面，并且会关闭其他所有页面 wx.navigateBack() 用来返回上一页面或多级页面，并关闭当前页面。 wx.navigateBack( { delta: 2 //返回的页面数，1为返回上一页，如果delta大于现有页面数，则返回到首页。 } ) 

面试题 32. 微信小程序如何进行本地存储？

参考回答：

小程序提供了读写本地数据缓存的接口，通过 wx.getStorage/wx.getStorageSync读取本地缓存，通过 wx.setStorage/wx.setStorageSync写数据到缓存，其中带Sync后缀的接口表示是同步接口 // 同步存储 wx.setStorageSync('key', 'value') // 异步存储，并且开启加密存储 wx.setStorage({ key: "key", data: "value", encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true success() { wx.getStorage({ key: "key", encrypt: true, // 若开启加密存储，setStorage 和 getStorage 需要同时声明 encrypt 的值为 true success(res) { console.log(res.data) } }) } }) // 同步读取缓存 var value = wx.getStorageSync('key') // 异步读取缓存 wx.getStorage({ key: 'key', success (res) { console.log(res.data) } }) 小程序宿主环境会管理不同小程序的数据缓存，不同小程序的本地缓存空间是分开的，每个小程序的缓存空间上限为10MB，如果当前缓存已经达到10MB，再通过wx.setStorage写入缓存会触发fail回调。 小程序的本地缓存不仅仅通过小程序这个维度来隔离空间，考虑到同一个设备可以登录不同微信用户，宿主环境还对不同用户的缓存进行了隔离，避免用户间的数据隐私泄露。 由于本地缓存是存放在当前设备，用户换设备之后无法从另一个设备读取到当前设备数据，因此用户的关键信息不建议只存在本地缓存，应该把数据放到服务器端进行持久化存储 

面试题 33. 简述微信小程序如何实现数据驱动视图 ?

参考回答：

微信小程序中使用 setData 函数把变量渲染到视图层 注意： 直接修改this.data，而不调用this.setData()，是无法改变当前页面的状态的，会导致数据不一致 仅支持可以JSON化的数据 单次设置的数据不能超过1024KB，尽量避免一次设置过多的数据 不要把data中的任何一项的value设为undefined，否则这一项将不能被设置，可能会有潜在的问题 示例： Page({ data: { testOne: 1, testTwo: 2 }, onLoad: function() {}, onShow () { this.setData({ test02:8 }) console.log(this.data.testTwo) } }, }) 

面试题 34. 简述并列举微信小程序中常见的开放能力API ？

参考回答：

获取网络状态（2G/3G/4G/5G/WIFI…） Page({ // 点击“预览文档”的按钮，触发tap回调 tap: function() { wx.getNetworkType({ success: function(res) { // networkType字段的有效值： // wifi/2g/3g/4g/5g/unknown(Android下不常见的网络类型)/none(无网络) if (res.networkType == 'wifi') { // 从网络上下载文档 wx.downloadFile({ url:' https://lark-temp.oss-cn-hangzhou.aliyuncs.com/__temp//docx/bb5d8e7d-97bc-406b-be94-ca2b4724c0e6.docx?OSSAccessKeyId=LTAI4GKnqTWmz2X8mzA1Sjbv&Expires=&Signature=qUYOtNWZOaopjkEFbcKpvgmn%2B1U%3D', success: function (res) { // 下载成功之后进行预览文档 wx.openDocument({ filePath: res.tempFilePath }) } }) } else { wx.showToast({ title: '当前为非Wifi环境' }) } } }) } }) 扫码能力 Page({ // 点击“扫码订餐”的按钮，触发tapScan回调 tapScan: function() { // 调用wx.login获取微信登录凭证 wx.scanCode({ success: function(res) { var num = res.result // 获取到的num就是餐桌的编号 } }) } }) 分享能力（分享到朋友圈或个人聊天等） Page({ onShareAppMessage(){ // 我们要记录转发的记录 return { // 分享的标题 title:'网友热议', // 分享的封面， 默认为当前页面的截图 imageUrl:"/assets/icon/index.png", // 点击分享跳转的路径，默认是当前路径，也可以自定义配置，添加额外的跳转参数 path:"/pages/index/index?userId=10&entry=share" } }, // 省略了别的属性 ...}) wx.canIUse(string schema) 判断小程序的API、回调、参数、组件等是否在当前版本可用 wx.getSystemInfoSync() | wx.getSystemInfo() 获取系统信息 wx.getUserProfile(Object object) 获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo 

面试题 35. 简述微信小程序的父子传参和vue中的有什么区别？

参考回答：

父传子的不同点是：微信小程序在子组件中接受父组件传 用 propertites 进行接收，而不是 props properties: { msg:{ // type 要接收的数据的类型 type:String, // value 默认值 value:"" }, }, 子传父的不同点是：微信小程序在子组件中使用 triggerEvent 抛出自定义事件名，而不是 this.$emit() methods: { sendData() { console.log(this.data.msg) this.triggerEvent('eventName', '要传递的参数') } } 

面试题 36. 简述微信小程序中对behavior的理解 ？

参考回答：

behaviors 是用于组件间代码共享的特性，类似于一些编程语言中的 mixins 或 traits。 每个 behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每个组件可以引用多个 behavior ，behavior 也可以引用其它 behavior 。 组件引用时，在 behaviors 定义段中将它们逐个列出即可。 代码示例： // my-component.js var myBehavior = require('my-behavior') Component({ behaviors: [myBehavior], properties: { myProperty: { type: String } }, data: { myData: 'my-component-data' }, created: function () { console.log('[my-component] created') }, attached: function () { console.log('[my-component] attached') }, ready: function () { console.log('[my-component] ready') }, methods: { myMethod: function () { console.log('[my-component] log by myMethod') }, } }) 

面试题 37. 如何优化首次加载微信小程序的速度？

参考回答：

包体积优化 分包加载（优先采用，大幅降低主包体积）。 图片优化（1.使用tinypng压缩图片素材； 2.服务器端支持，可采用webp格式）。 组件化开发（易维护）。 减少文件个数及冗余数据。 请求优化 关键数据尽早请求(onLoad()阶段请求,次要数据可以通过事件触发再请求)；整合请求数据，降低请求次数。 采用cdn缓存静态的接口数据（如判断用户登录状态，未登录则请求缓存接口数据），cdn稳定且就近访问速度快（针对加载总时长波动大）。 缓存请求的接口数据。 首次渲染优化 图片懒加载（节省带宽）。 setData优化（不要一次性设置过多的数据等）。 DOM渲染优化（减少DOM节点） 

面试题 38. 微信小程序如何实现瀑布流效果？

参考回答：

思路：把屏幕分为左右两个容器，根据容器的高度决定下一个元素应该放在哪个容器内（高度相对较低的容器） 代码如下： // 处理数据 initList(list) { this.data.finish = false // 临界值 if (list.length == 0) { this.data.finish = true return } let item = list.shift() wx.getImageInfo({ src: item.coverImgUrl, success: (res) => { if (this.data.leftHeight <= this.data.rightHeight) { // 默认从左往右渲 this.data.leftList.push(item) this.data.leftHeight += res.height / res.width } else { this.data.rightList.push(item) this.data.rightHeight += res.height / res.width } this.setData({ leftList: this.data.leftList, rightList: this.data.rightList, }) }, complete: () => { this.initList(list) } }) 

面试题 39. 简述小程序视图渲染结束后如何回调 ？

参考回答：

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

面试题 40. 简述一下小程序中常见的界面跳转的方式，以及区别？

参考回答：

wx.navigateTo wx.navigateTo( { url: 'test?id=1', } ) 保留当前页面，只能打开非 tabBar 页面。 wx.redirectTo wx.redirectTo( { url: 'test?id=1' } ) 关闭卸载当前页面，只能打开非 tabBar 页面。 wx.switchTab wx.switchTab( { url: '/index' } ) 关闭所有非tabbar页面， 只能打开 tabBar 页面。 wx.reLaunch wx.reLaunch( { url: 'test?id=1' } ) 关闭卸载所有页面，可以打开任意页面。 wx.navigateBack wx.navigateBack( { delta: 2 //返回的页面数，如果 delta 大于现有页面数，则返回到首页。 } ) 返回前面的页面，可以指定返回多少页，如果用过redirectTo，那么被关闭的页面将返回不去