基础使用

pwa

发布订阅模式：有中间调度层
观察者模式
17316485341

1、小程序的生命周期
2、双线程的运行机制（官网有一张图）
链接
View thread + appService thread
notify /setData 对应周期，一个渲染周期内所需要做的事情

双线程运行机制，渲染层和逻辑层通过 native进行通讯

多次setData的时候，通信的次数是一次还是多次?

一次渲染周期内，多次setData会合并成一次，，一个事件循环，当前执行栈会合并一次。异步\setTimeout不算
jscore—>native—>webview

渲染周期，如何优化小程序数据通信，提升页面性能

减少setData的使用，合并多个setData
与页面渲染无关的数据不要放在data里
有些数据不在页面中显示，包含复杂数据结构或者超长字符串，则不应该使用setData来设置这些数据

有哪些地方可以放置页面渲染无关的数据

全局，this上，

为什么data设置成字符串，不显示也会影响页面性能

evaluateJavascript :检测长数据

wepy 如何做数据绑定优化的

wepy内部实现了一个脏数据的检查机制，函数执行完之后，进行data-check
newValue 和 oldValue做比较，如果有变化，就会加入到readyToSet队列中，最后统一做一个setData
同一时间自允许一个脏数据检查流程进行 ,用这个说标识this.$$phase

wepy中异步数据如何更新

  1. setTimeout(()=>{
  2.   this.label = 'label'
  3.   this.$apply();//额外做一步脏值检查
  4. })

App()是单例对象

文件分布

网络层，网络请求

双重登录态维护，维护第二层登录的登录态？拦截器

小程序和h5的交互

结构层—-mixin混合

wepy实现了同vue一样复用抽离的方式
默认式混合—-data\components

vue中的data是个函数：单独的实例，防止污染

wepy源码分析：预编译型框架

第一步，先拆解 .wpy文件，拆成 template,style,script 3部分，然后分别执行不同的compile,编译成适应各个平台的代码（原生，支付宝，百度小程序）
关注点 ，slot ,以及updateBind
入口： wepy-cli/src/complie.js

适配器

应用vue 代码转 Vue3？？？

数据同步代码实现

$$phase ：脏值检查标识
$apply : 应用更新（1、通过phase做状态检查，2.调用$digest做值统一更新）
$digest — 遍历originData,做脏值对比，如果值有更新，放到readyToSet。循环之后统一调用serData

工程化开发小程序

登录流程

术语

openId:用户在当前小程序下的唯一标识
unionid :微信开放平台下的唯一标识，比如说公众号跳转到小程序：getuserInfo中可以拿到
session_key:本次登录会话的密钥
以前的getuserInfo :拿到unionId ,拿到用户信息
现在的getuserInfo ：只能拿到用户的匿名信息，加密后的身份标识
现在需要使用getUserProfile,弹出个人信息授权弹框,每次调用此接口均需用户确认

静默登录

1、wx.login()获取到code ，还能获取到unionId
2、带上code去请求业务后台
3、业务后台根据code,appId,appSecret 去请求微信后台服务
4、微信后台返回session_key + openId，业务后台根据session_key + openId + code 返回小程序token
5、小程序拿到token,存入 session,后续请求带上 token
业务中checkSession，过期后，走静默登录

正常登录

账号密码登录

微信授权登录

1、点击微信授权登录，getPhoneNumber(),弹出是否授权手机号。

面试题与坑

组件

1、自定义tabbar 在页面下拉更新的时候，页面被下拉，tabbar也会跟着下拉

解决方案：提前沟通

2、require在小程序中不支持绝对路径，只能用相对路径去选取

解决方案

  2. App({
  3.   require:function(url){
  4.          return require(url)
  5.   }
  6. })
  8. //组件中使用时
  10. let app = getApp()
  11. app.require('utils/tool.js')
  13. //原理：利用require返回url时带上 /

3、组件引用的资源路径不能解析特殊字符或者汉字

解决方案：规范命名

4、{{}} 模板中不能执行特殊方法，只能简单处理四则运算。

vue中是利用的filter 管道符

  1.  //组件中定义filter
  2. filters: {
  3.   capitalize: function (value) {
  4.     if (!value) return ''
  5.     value = value.toString()
  6.     return value.charAt(0).toUpperCase() + value.slice(1)
  7.   },
  8.   capitalizeB :function(){
  9.   }  
  10. }
  13. {{ money | capitalize | capitalizeB }}
  15. //也可以在创建 Vue 实例之前全局定义过滤器
  17. Vue.filter('capitalize', function (value) {
  18.   if (!value) return ''
  19.   value = value.toString()
  20.   return value.charAt(0).toUpperCase() + value.slice(1)
  21. })
  23. new Vue({
  24.   // ...
  25. })
  27. //当全局过滤器和局部过滤器重名时，会采用局部过滤器。

小程序中利用 wxs
也可以直接 写在 wxml文件中，像这样

  1. <wxs module="tool">
  2.     module.exports = {
  3.         formatDist: function (m) {
  4.             return m > 1000 ? (m / 1000).toFixed(1) + 'km' : m + 'm';
  5.         },
  6.         formatAddress: function (str) {
  7.             if (!str) return '';
  8.             var arr = str.split('<br'); // split 不支持正则 /\<\w+\/?\>/
  9.             return arr[0];
  10.         }
  11.     }
  12. </wxs>
  14. //使用的时候
  16. <text>距离{{tool.formatDist(item.dist)}}</text>

5、.wxs文件中无法使用 new Date()

解决方案：使用getData()

6、setData 过程中需要注意对象覆盖

方案：

  1. this.setData({
  2.   a:{
  3.     b:3,
  4.     c:4
  5.   }
  6. })
  8. let {a }= this.data
  9. a.b = 5
  10. this.setData{a}
  12. //还可以使用wx-update-data 这个库

7、wx.rwquest不支持promise

解决方案：wx-promise-pro

手写封装一个promise化的接口
  1. function request(opt){
  2.   return new Promise((resolve,reject)=>{
  3.     wx.request({
  4.       ...opt,
  5.       success:res=>{
  6.         resolve(res)
  7.       },
  8.       fail:err=>{
  9.         reject(err)
  10.       }
  11.     })
  12.   })
  13. }
  15. //再抽象一点
  17. function promisefy(api){
  18.   return (opt = {})=>{
  19.     return new Promise((resolve,reject)=>{
  20.       api({
  21.         ...opt,
  22.         success:resolve,
  23.         fail:reject
  24.       })
  25.     })
  26.   }
  27. }
  28. promisefy(wx.request)(opt)

手写一个server ，模仿express封装一下ajax请求

8、IOS不支持2020-06-26这个格式的，必须要转成2020/06/26

这个是IOS兼容性问题。不是小程序的问题，h5中这个问题也是一样

9、promise 初始化时候的入参是什么，new Promise(executor() 且立即执行)

10、promise成功状态下的value:undefind, thenable , promise

11、promise失败状态下的reason

12、then 的参数 onFulfilled(value) ,onRejected(reason)

小程序实战

dataset考点

  • node属性名不能用 data开头，比如说dataxyz,会被当成 dataset处理

    云开发

    getApp

  • 可以通过getApp()来获取全局的app()

  • 如果在app()内部函数中，在调用APP之前用 getApp,直接使用this即可

  • 获取getApp()之后，可以拿到app的生命周期么？可以的，但是禁止操作

    getCurrentPage

  • getCurrentPage获取当前的page,不要修改页面栈，不要在app.onLaunch调用（page还没生成）

  • wx.navigateTo(),被打开的页面可以调用 this.getOpenEventChannel()来获取eventChannel对象，打开方可以在回调中拿到这个对象，完成页面通信？？

keep-live ：http长连接