小程序面试题

1. 小程序代码超2怎么办？

分包加载，在app.jsonsubPackages声明项目分包结构。

2. 小程序状态维护：采用session验证机制：

（1）通过wx.login获得凭证code
（2）通过wx.request()将code发往服务端，在服务端使用code去换取用户的唯一标识openid和会话密钥（session_key）
（3）生成3rd-session
（4）在客户端用storage来保存session id
（5）通过wx.checkSession（）来校验session_key是否过期

3. 小程序更新版本：

   （1）提示用户去更新
   （2）写在appjs的onlaunch事件中；
   a. wx.canIuse wx.getUpdatamanger oncheckforupdate检测是否有新的版本
   c.如果有的话调用applyUpdate应用版本并重启

4. 你是怎么封装微信小程序的数据请求的？

   1. 在根目录下创建utils目录及api.js文件和apiConfig.js文件；
   2. 在appConfig.js封装基础的get\post\put\upload等请求方法，设置请求体，带上token和异常处理等；
   3. 在api.js中引入apiConfig.js封装好的请求方法，根据页面数据请求的urls，设置对应的方法并导出；
   4. 在具体页面导入；

5. 小程序页面间有哪些传递数据的方法？

   1. 给html元素添加data-*属性来传递值，然后通过e.currentTarget.dataset或onload的param参数获取。注：data-名称不能有大写字母、不可以存放对象
   2. 在navigator中添加参数数值
   3. 使用全局变量实现数据传递
   4. 页面跳转或重定向时，使用url带参数传递数据
   5. 使用缓存传递参数

6. 请谈谈小程序的双向绑定和vue的异同？

   1. 大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！
   2. 定义方法：小程序使用 在app.js中定义即可，vue的方法通过写在method中进行定义。
   3. 调用data模型（赋值）的时候：- 小程序：this.data.item //调用 this.setData({item:1}) //赋值;;- vue: this.item //调用 this.item =1 //赋值

7. 请谈谈小程序的生命周期函数？

共7个
1. onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
2. onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
3. onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
4. onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
5. onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。
6. onPullDownRefresh() 下拉刷新的钩子函数 用户下拉刷新时会自动走到这个函数中
7. onReachBottom() 上翻到底的钩子函数

8. 简述微信小程序原理？

小程序的架构设计：
双线程模型
小程序的渲染层和逻辑层分别由2个线程管理：
渲染层：界面渲染相关的任务全都在 WebView 线程里执行。一个小程序存在多个界面，所以渲染层存在多个 WebView 线程。
逻辑层：采用 JsCore 线程运行JS脚本。
视图层和逻辑层通过系统层的 WeixinJsBridage 进行通信：逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。
（页面渲染的具体流程是：在渲染层，宿主环境会把 WXML 转化成对应的 JS 对象，在逻辑层发生数据变更的时候，我们需要通过宿主环境提供的 setData 方法把数据从逻辑层传递到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上，渲染出正确的UI界面）

参考博客：

微信小程序原理与架构设计

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

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

10. 小程序调用后台接口遇到哪些问题？

    1. 数据的大小限制，超过范围会直接导致整个小程序崩溃，除非重启小程序；
    2. 小程序不可以直接渲染文章内容这类型的html文本，显示需借助插件

11. 微信小程序如何实现下拉刷新？

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

12. bindtap和catchtap的区别？

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

13. 简述五个路由的区别

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

14. 怎么解决小程序页面栈问题

小程序的页面栈最大能存放十个页面，当页面栈中的页面等于10时，在使用navigateTo这种方式是不能再跳页的。
getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
参考博客：

页面栈跳转问题

15. 小程序如何更新页面中的值 ?

可以通过this.setData来进行改变

16. 如何实现登录数据的持久化 ?

可以通过wx.setStorageSync(‘键名’, 对应的值)来进行数据持久化

17. 微信支付的 流程是否可以简单说一下？

要开通的有微信支付功能，需要商户号，appid，appsecret,openid

参考博客：

微信小程序实现微信支付功能
微信小程序云开发–微信支付商户号，商户密钥等的获取
微信小程序获取openid

18. 如何自定义tabbar？

创建一个compent文件夹，里面创建一个tabbar页面，取消原有的tabbar页面。需要在app.json中输入compent:ture，在自定义的pages页面中写入进行选中效果显示

19. openid的作用：

    appid：小程序唯一凭证，即 AppID，每个小程序都有自己的一个appid
    openid：用户在同一个小程序下的唯一表示，即同一个用户在不同的小程序下的openid是不同的