微信小程序开发笔记

sTone87375
442 阅读6分钟

指南

小程序知识结构

重要概念

开发者管理后台

AppId

后台管理权限设计

openId

access_token

场景码

wx

小程序 API 全局对象，用于承载小程序能力相关 API。

小程序生命周期

页面生命周期

组件生命周期

渲染线程和逻辑线程的通信 以及适用场景

事件系统和event对象

eventBus

冷启动 和 热启动

dataset

组件中的properties和data的区别

wx:if VS hidden

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

WXML中import VS include

常用能力

账号体系？？-待补充

组件通信

组件生命周期

组件本身的生命周期

Component({
  lifetimes: {
    // 推荐使用lifetimes作为Component一级参数
    created: function() {
      /**
    	* 1. 此时组件刚被创建好
      * 2. this.data 此时是Component 构造器中定义的数据 data
      * 2. 此时还不能调用 setData
      * 3. 一般用途：只应该用于给组件 this 添加一些自定义属性字段。
      */
    },
    attached: function() {
      /**
        1. 在组件实例进入页面节点树时执行 
        2. this.data 已被初始化为组件的当前值
        3. 绝大多数初始化工作可以在这个时机进行
      */
    },
    detached: function() {
      /**
       1. 在组件实例被从页面节点树移除时执行
       2. 退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
      */ 
    },
  },

组件所在页面的生命周期

Component({
	// 通过pageLifetimes来感知并注册逻辑到父页面的生命周期中
  pageLifetimes: {
    show: function() {
      // 页面被展示
    },
    hide: function() {
      // 页面被隐藏
    },
    resize: function(size) {
      // 页面尺寸变化
    }
  }
})

自定义TabBar

待分类

  1. 渲染层的界面使用了**WebView **进行渲染；逻辑层采用JsCore线程运行JS脚本；
    1. 也就是视图还是用webview渲染出来的，和hybrid App一个技术
  2. WXS 运行在视图层（Webview），里面的逻辑毕竟能做的事件比较少，需要有一个机制和逻辑层（App Service）开发者的代码通信，
  3. 用于双向绑定的表达式有如下限制：
    1. 只能是一个单一字段的绑定
<input model:value="值为 {{value}}" />
<input model:value="{{ a + b }}" />
  1. 目前，尚不能 data 路径,下面这种表达式目前暂不支持。
<input model:value="{{ a.b }}" />
  1. **场景值：**场景值用来描述用户进入小程序的路径

app-service

  1. 逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。
    1. 开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。(打包出的这一份js文件，就是我们一般看到的appService.js，也就是它为构建后的产物)
  2. 整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 实例，获取App上的数据或调用开发者注册在 App 上的函数。
const appInstance = getApp()
console.log(appInstance.globalData) // I am global data
  1. 页面有2个运行场景：
    1. 前台
    2. 后台
  2. behaviors: 很像mixin的一个东西，共享一部分代码
  3. 这里要发布的 npm 包是特指专为小程序定制的 npm 包（下称小程序 npm 包）
  4. 启用初始渲染缓存，可以使视图层不需要等待逻辑层初始化完毕，而直接提前将页面初始 data 的渲染结果展示给用户，这可以使得页面对用户可见的时间大大提前
  5. 优化方案-初始化缓存
  6. 因为 WXML 节点标签名只能是小写字母、中划线和下划线的组合，所以自定义组件的标签名也只能包含这些字符。
  7. 页面本质上也是组件。可以用组件构造器Component来构造，url参数则可以通过属性访问到
  8. 插件本质上，是跨小程序的可以复用的功能体。不同的小程序可以使用同一插件，插件本身就是一个类小程序项目。
    1. 思考：我们可以把一些小程序完整的功能做成插件复用出来，并单独管理：例如：支付插件，
    2. 以后的复用粒度：组件化、插件化
    3. 插件接入流程
  9. 小程序中请求必须使用https
  10. 在微信开发者工具中，可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。此时，在微信开发者工具中及手机开启调试模式时，不会进行服务器域名的校验。
  11. 在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确。

命令行工具

behiviors

同名字段的覆盖和组合规则

组件和它引用的 behavior 中可以包含同名的字段，对这些字段的处理方法如下：

  • 如果有同名的属性 (properties) 或方法 (methods)：
    1. 若组件本身有这个属性或方法，则组件的属性或方法会覆盖 behavior 中的同名属性或方法；
    2. 若组件本身无这个属性或方法，则在组件的 behaviors 字段中定义靠后的 behavior 的属性或方法会覆盖靠前的同名属性或方法；
    3. 在 2 的基础上，若存在嵌套引用 behavior 的情况，则规则为：父 behavior 覆盖 子 behavior 中的同名属性或方法。
  • 如果有同名的数据字段 (data)：
    • 若同名的数据字段都是对象类型，会进行对象合并；
    • 其余情况会进行数据覆盖，覆盖规则为：组件 > 父 behavior > 子 behavior 、 靠后的 behavior > 靠前的 behavior。（优先级高的覆盖优先级低的，最大的为优先级最高）
  • 生命周期函数不会相互覆盖，而是在对应触发时机被逐个调用：
    • 对于不同的生命周期函数之间，遵循组件生命周期函数的执行顺序；
    • 对于同种生命周期函数，遵循如下规则：
      • behavior 优先于组件执行；
      • 子 behavior 优先于 父 behavior 执行；
      • 靠前的 behavior 优先于 靠后的 behavior 执行；
    • 如果同一个 behavior 被一个组件多次引用，它定义的生命周期函数只会被执行一次。

acess-token

access_token 是小程序全局唯一后台接口调用凭据，调用绝大多数后台接口时都需使用。开发者可以通过 getAccessToken 接口获取并进行妥善保存。
为了 access_token 的安全性，后端 API 不能直接在小程序内通过 wx.request 调用，即 api.weixin.qq.com 不能被配置为服务器域名。开发者应在后端服务器使用getAccessToken获取 access_token，并调用相关 API；

form

优化

  1. 纯数据字段
  2. 分包加载：
    • 整个小程序所有分包大小不超过 16M
    • 单个分包/主包大小不能超过 2M
    • 分包预下载
  3. 能力的插件化封装
  4. 周期性更新数据
  5. 数据预拉取

Others

  1.  内容审核一是要有内容安全的技术，二是要投入人工审核资源

？？

  1. 属性 和 data：
    1. 区别
    2. 职能区别
  2. slots

未看懂

  1. 自定义组件的扩展
avatar
文章
阅读
粉丝