微信小程序知识整理

iskeepingon
845 阅读3分钟

前言

微信小程序出现几年了，没有做过任何总结，有时候，被问到一些知识点，也得查，记不住，害，这里记录一下。

小程序登录流程

  1. 微信小程序调用wx.login获取code
  2. 微信小程序通过wx.request发送code到开发者服务器
  3. 开发者服务器发送appid、appsecret、code到微信接口服务器，微信接口服务器返回session_key、openid
  4. 开发者服务器自定义登录态与openid、session_key关联，返回自定义登录态给微信小程序

参考文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

静默登录流程

当接口返回的为未登录或者token为空时，触发授权登录，当接口返回的为未注册时，跳到注册页面

组件自定义

  1. 组件的输入参数，通过properties传入
  2. 组件的输出，通过bind:事件名的方式设置回调监听，通过triggerEvent(事件名, payload)触发执行回调
  3. 组件中动态的、可变的内容，通过输入参数传入

小程序启动

  • 冷启动：如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动，即冷启动。
  • 热启动：如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态，这个过程就是热启动。

小程序代码包更新

冷启动时，会触发检查代码包是否更新；可是热启动的时候，我们怎么检查代码包是否更新呢？

分包

  • 打包原则
    • 声明 subpackages 后，将按 subpackages 配置路径进行打包，subpackages 配置路径外的目录将被打包到 app（主包） 中
    • app（主包）也可以有自己的 pages（即最外层的 pages 字段）
    • subpackage 的根目录不能是另外一个 subpackage 内的子目录
    • tabBar 页面必须在 app（主包）内
  • 引用原则
    • packageA 无法 require packageB JS 文件，但可以 require app、自己 package 内的 JS 文件
    • packageA 无法 import packageB 的 template，但可以 require app、自己 package 内的 template
    • packageA 无法使用 packageB 的资源，但可以使用 app、自己 package 内的资源
  • 分包类型 打包原则和引用原则均适用普通分包和独立分包
    • 普通分包
    • 独立分包
      1. 独立分包中不能依赖主包和其他分包中的内容，包括js文件、template、wxss、自定义组件、插件等。主包中的app.wxss对独立分包无效，应避免在独立分包页面中使用 app.wxss 中的样式；
      2. App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为；
      3. 独立分包中暂时不支持使用插件。

小程序授权流程

使用wx.getSetting获取用户授权设置，如果对应的权限没有申请过，则使用wx.authorize发起授权申请，用户同意之后直接调用对应的api，如果拒绝，则告知用户拒绝授权就使用不了什么服务之类的提示，如果申请过，则看授权是否可用，如果可用就直接调用对应的api，如果不可用，则引导用户去打开授权设置。

注意

  1. wx.authorize({scope: "scope.userInfo"})，不会弹出授权窗口，请使用
<button open-type="getUserInfo"/>
  1. 需要授权 scope.userLocation、scope.userLocationBackground 时必须配置地理位置用途说明。

getCurrentPages

通过这个api可以获取到上一个页面或者上几个页面的页面实例，然后操作对应页面的内容

路由

wx.switchTab、wx.reLaunch、wx.redirectTo、wx.navigateTo、wx.navigateBack、EventChannel

本地存储api异常处理

wx.setStorageSync等方法可能会抛异常，因此使用try catch处理一下异常，参考文档https://developers.weixin.qq.com/community/develop/doc/000cc45307c098461d19f967056009

cover-view的垂直方向的滚动设置问题

只可以设置overflow-y: scroll，设置成其他不生效，参考文档https://developers.weixin.qq.com/community/develop/doc/000c26cf018d48a4f8a83f7f756000

谢谢阅读！

需要加微信交流，可留言！

avatar
文章
阅读
粉丝