小程序基础知识点

框架

小程序框架系统分为两部分：视图层（View）和逻辑层（App Service），视图层有自己的描述语言 wxml 和 wxss，逻辑层基于 javascript 。
小程序在逻辑层与视图层之间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑

响应式的数据绑定

框架的核心是一个响应的数据绑定系统，它可以让数据与视图非常简单地保持同步。当需要修改的时候，只需要在逻辑层修改数据，视图层就会做相应的更新

页面管理

框架管理了整个小程序的页面路由，框架以栈的形式维护了当前的所有页面，可以做到页面间的无缝切换，并给以页面完整的生命周期。开发者需要做的只是将页面的数据、方法、生命周期函数注册到 框架 中，其他的一切复杂的操作都交由框架处理

• getCurrentPages()用于获取当前页面栈的实例，它会以数组的形式按照栈的顺序排列，tip:
  • 不要尝试修改页面栈，会导致路由以及页面状态错误
  • 不要在 App.onLaunch 中调用，这个时候page还没有生成
• 页面间跳转api：
  • navigateTo：打开新页面
  • redirectTo：重定向
  • navigateBack：返回上一级
  • switchTab：tab切换（可以且只能跳转到tab，是除reLaunch以外唯一可以跳转到tab的）
  • reLaunch：重新加载，可以打开任意页面

目录结构

小程序包含一组描述整体程序的 app 文件和多个描述各自页面的page，描述页面的四个文件必须具有相同的路径与文件名。
- app.json 文件用来对微信小程序进行全局配置，决定页面的路径(pages)、窗口表现(winidow)，设置网络超时事件、设置多tab
- App()必须在 app.js 中调用，必须调用且只能调用一次，不然会出现无法预期的后果（具体是啥我也不知道，官方文档里这么写的），App()中的声明周期函数：
+ onLaunch，小程序初始化完成时调用，只会运行一次
+ onShow，小程序启动触发，或者从后台进入前台时触发
+ onHide，从前台进入后台时触发
+ onError（不是生命周期），发生脚本错误，或api调用失败触发
+ onPageNotFound（不是生命周期），页面不存在时触发

逻辑层

逻辑层使用的是 javascript 引擎，将数据进行处理发送给视图层，也可以接收视图层的事件反馈。最后开发者写的所有代码最终将会打包成一份 javascript 文件，并在小程序启动的时候运行，直到小程序销毁。
小程序框架的逻辑层并非运行在浏览器中，因此 javascript 在 web 中一些能力都无法使用，如 window，document 等

模块化

可以将一些公共的代码抽离成为一个单独的js文件，作为一个模块。模块需要通过 module.exports 对外暴露接口。（调用时候注意，require 暂时不支持绝对路径）

API

• 事件监听 API： 约定，以 on 开头的 API 用来监听某个事件是否触发
• 同步 API： 约定，以 Sync 结尾的 API 都是同步 API，同步API 的执行结果可以通过函数返回值直接获取，如果执行错误会抛异常， try{}catch(e){console.error(e)}

WXS

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

自定义组件

自定义组件是将页面内的功能模块抽象成组件，以便在不同的页面中重复使用，tip：

• 需要在 json 文件中将 component 字段定义为true，这个文件即为一个组件文件，组件的 js 中不是定义 page 而是定义 component
• 使用自定义组件，需要在要使用的页面的 json 中引用声明，需要提供自定义组件的标签名和对应的自定义组件文件路径，可以定义多个，比如：
  { "usingComponents": { "component-tag-name1": "path/to/the/custom/component", "component-tag-name2": "path/to/the/custom/component" } }
• 在组件wxss中不应该使用ID选择器、属性选择器和标签名选择器
• slot：在组件的wxml中可以包含 slot 节点，用于承载组件使用者提供的wxml结构。默认情况下，一个组件的wxml中只能有一个slot。需要使用多slot时，可以在组件 js 中声明启用：options: { multipleSlots: true }，在页面中通过 引用，在组件页面中通过 接收
• 组件间通信？
• 关于组件样式：
  • 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器
  • 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况
  • 继承样式，如 font 、 color ，会从组件外继承到组件内
  • 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效
  • 组件中指定默认样式，使用 :host 选择器，比如 :host { color:#f00; }
• 组件的生命周期：
  created、attached、ready、moved、detached、error，2.2.3 版本以后可以在 lifetimes 里定义，之前可在 component 里定义；特殊生命周期： show、hide、resize，可在 pageLifetimes 里定义
• behaviors

其他重要知识点

• 销毁：只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁；也可以手动删除
• setData：setData函数用于将数据从逻辑层发送到视图层（异步方式），同时改变 this.data 的值（同步）；tip: 如果要改变数组或对象中某一项，比如array[2].info，需要进行预先定义，然后使用字符串类型的值，比如var arr = 'array[2].info'，然后就可以 this.setData({ arr: 'i am info' })，其他 tip:
  • 在目前版中直接使用 this.data 修改值是无效的，必须使用 this.setData 才能修改data中的值
  • data中仅支持可JSON化的数据
  • 单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据
  • 请不要把 data 中任何一项的 value 设为 undefined，否则这一项将不被设置并可能遗留一些潜在问题
• wx:if 和 hidden：wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。相比于使用 class 进行 hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
• 事件：事件是视图层到逻辑层的通讯方式，事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发条件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外的信息，比如id、dataset、touches
• 事件分为冒泡事件和非冒泡事件，bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。