# 小程序知识总结

小程序知识总结

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

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

# mpvue基本原理

小程序负责视图层展示
所有业务逻辑收敛到 Vue.js 中
Vue.js 数据变更后同步到小程序

Vue.js 实例与小程序 Page 实例建立关联

小程序和 Vue.js 生命周期建立映射关系，能在小程序生命周期中触发 Vue.js 生命周期

小程序事件建立代理机制，在事件代理函数中触发与之对应的 Vue.js 组件事件响应

vue与小程序的数据同步

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

双向绑定：vue默认支持双向绑定，微信小程序需要借助data,需要使用 setData。
取值：vue中，通过 this.reason取值。小程序中，通过 this.data.reason 取值。
定义方法：小程序使用在app.js中定义即可，vue的方法通过写在method中进行定义。

# 小程序应用和页面的生命周期：

小程序应用生命周期：onLaunch，onShow，onHide，onError

首次进入小程序，从 cdn 或者小程序本地拿到代码包注入到运行环境，微信客户端会给我们逻辑层app.js的app实例来派发 onLaunch 事件，在逻辑层，app.js的 app 构造器的参数里面的onLaunch方法就会被调用。当用户使用home件或者点击右上角小程序关闭按钮，来关闭小程序时，小程序没有被直接销毁的，这时app构造器的参数里面的 onHide 方法就会被调用，当我们再次打开小程序时，微信唤起小程序，onShow 方法就会被调用，当小程序脚本发现错误时，或api调用失败时，会调用 onError。

小程序页面的生命周期：

onLoad // 页面创建时执行
onShow // 页面出现在前台执行
onReady // 页面首次渲染完毕时执行
onHide // 页面从前台变为后台时执行
onUnload // 页面销毁时执行
onPullDownRefresh // 触发下拉刷新时执行
onReachBottom // 页面触底时执行
onPageScroll // 页面滚动时执行
onResize // 页面尺寸变化时执行
onTabItemTap // tab点击时执行

组件声明周期

created // 在组件实例刚刚被创建时执行
attached // 在组件实例进入页面节点树时执行
ready // 在组件在视图层布局完成后执行
moved // 在组件实例被移动到节点树的另一个位置时执行
detached // 在组件实例被从页面节点移除时执行
error // 每当组件方法抛出错误时执行

# 小程序路由跳转方式和区别

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

# 通用用户信息获取，登录，鉴权等流程

以项目中使用微信官方地址编辑举例

首先编写一个一个按钮，如果是获取用户信息则必须绑定 open-type属性
选择地址页面加载时生命周期钩子判断本地缓存是否有地址信息，若有直接绑定缓存数据
点击按钮：首先判断用户授权信息状态，如果已经授权，则直接调用 wx.chooseAddress 调起地址选择面板，然后绑定地址数据；如果未授权则触发授权confirm弹框，点击确定后再次调起地址选择面板

1. 组件加载时判断有无缓存

  lifetimes:{
    attached(){
      const address = Address.getLoaclAdd()
      if(address){
        this.setData({
          hasChosen:true,
          address
        })
        this.triggerEvent("address",{
          address
        })
      }
    }

  }

2. 编写按钮点击事件
 
 async addAddresss(){
       // 首先获取用户授权状态
        const AuthorizedState = await this.hasAuthorizedAddress()
        // 判断是否是deny 说明没有经过过授权
        if(AuthorizedState === AuthorizedStatus.DENY){
          // 未授权需要展示授权dialog
          this.setData({
            showDialog:true
          })
        }
        // 已授权直接调起面板
        this.getUserAddress()
    },
// 获取用户授权状态
    async hasAuthorizedAddress(){
      const setting = await promisic(wx.getSetting)()
      // 拿到结果
      const address = setting.authSetting ['scope.address']
      if(address === undefined){
        return AuthorizedStatus.UNAUTHORIZED
      }
      if(address === true){
        return AuthorizedStatus.AUTHORIZED
      }
      if(address === false){
        return AuthorizedStatus.DENY
      }
    },

// 调起面板
    async getUserAddress(){
      let res 
      try{
        res = await promisic(wx.chooseAddress)()

      }catch(e){
        //TODO handle the exception
        console.log(e)
      }
      if(res){
        this.setData({
          hasChosen:true,
          address:res
        })
        Address.serLocalAdd(res)
        this.triggerEvent("address",{
          address:res
        })
      }

    }

# 小程序如何对接JWT

首先需要明确一点，小程序是不需要微信密码登录的，因为这一点验证已经在微信登录做了。我们要做的就是去验证该用户到底有没有授权使用这个小程序，使用JWT的的作用也是为了保护用户的一些隐私功能。

具体的实现流程：

全局 app.js onlaunch时，首先校验当前token是否过期。这一步其实包含两个步骤

如果本地缓存没有token，则去获取最新的token
有缓存，则调用校验方法，如果过期则获取最新的token

每次获取服务器最新token的步骤：1. 通过 wx.login() 获取code码 2. 根据code码获取最新的token

# wx:key 的作用

列表数据发生改变重新出发页面渲染的时候，列表中的项目可以保持自身状态，比如在input组件里，输入了内容页面渲染之后，不希望input 内容发生改变，用此属性，在页面重新渲染的时候，确保带有 key 的组件会重新排序，而不是重新渲染，从而提高页面渲染性能的效率

# 理解rpx

虽然 wxss 支持 rem，但是我们知道 rem 是根据html根元素的 fontSize 大小来适配的，wxss 不能直接操作html的样式属性，所以rem适配方案就失效了。rpx应运而生，规定屏幕宽度为750rpx，从而我们可以根据屏幕宽度来自适应，rpx和rem实现方式是相似的，而且rpx最终转换为rem

# 小程序更新机制

小程序在冷启动的时候遇到版本更新，小程序会异步加载，帮我们下载最新版本的代码包，并同时使用微信本地版本的代码包启动，也就是说最新的代码包，将在小程序下次启动才去加载。如果偏要使用最新版本的代码包，我们可以使用api来处理,wx.getUpdateManager

# 小程序运行环境(小程序原理)

ios: 内核：JavaScriptCore 视图渲染：WKWebView
Android: 内核：V8 视图渲染：XWeb
开发工具: 内核：NW.js 视图渲染：Chromium webview

← 常见面试题算法基础 →