持续整理

前端

小程序代码构成

JSON 配置

app.json 全局配置
page.json 页面配置
project.config.json sitemap 配置

WXML 模板

• 小程序的 WXML 用的标签 (组件) 是 view, button, text 等等
• wx:if

WXSS 样式

• 新的尺寸单位 rpx
• app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效

JS 逻辑交互

• 事件
• this.setData wx.XXXX()

WXS

小程序宿主环境

• 页面管理(路由, 生命周期 …), 基础组件, API

协同工作和发布

• 小程序管理后台, 开发者权限, 体验版小程序, 发布上线, 小程序审核规范, 小程序码, 运营数据

小程序框架 - 主要文档 1

场景值

逻辑层

注册实例

• getApp 和 getCurrentPages 获取对应实例 注意调用局限, 还有实例的数据结构
• 注册小程序(也就是 app.js 中的 App({}) ); 注册页面(也就是 app.js 中的 Page({}) )

使用 Component 构造器构造页面. Component 构造器的主要区别是：方法需要放在 methods: {} 里面.
这种创建类似 自定义组件，可使用 behaviors 等高级特性。Component 构造器

生命周期

平时开发要结合 wx.XXX 等 API 的异步, 业务接口的异步的情况

页面路由

页面栈 getCurrentPages()
<navigator open-type=”navigateTo”/>、wx.switchTab 等 注意底部菜单的二次切换、reLaunch 页面先清空页面栈的操作体验、

模块化、文件作用域

模块只有通过 module.exports 或者 exports 才能对外暴露接口
使用小程序的 npm 管理功能
wxMini 在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响

API

事件监听 API、同步 API、异步 API、

• 约定以 on 开头 的 API 用来监听某个事件是否触发，wx.onSocketOpen

• 约定以 Sync 结尾 的 API 都是同步 API，如 wx.setStorageSync，wx.getSystemInfoSync 等。此外，也有一些其他的同步 API，- 如 wx.createWorker，wx.getBackgroundAudioManage

try {wx.setStorageSync('key', 'value')
} catch (e) {console.error(e)
}

• 大多数 API 都是异步 API，如 wx.request，wx.login 等

视图层

WXML: 数据绑定、列表渲染、条件渲染、模板、引用

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性.
不能和 hidden 一起使用

wx:for="{{array}}" , wx:for-item="item" ,  wx:for-index="index" ,  wx:key="*this"  默认值, 保留字 

wx:for="array" === wx:for="{{['a','r','r','a','y']}}"
wx:for="{{[1,2,3]}}"  ===   wx:for="{{[1,2,3] +' '}}"
wx:for="3"  ===  wx:for="{{[3]}}"
wx:for="{{3}}" === wx:for="{{[1,2,3]}}"

wx:if vs hidden

<view wx:if="{{view =='WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view =='APP'}}"> APP </view>
<view wx:else="{{view =='MINA'}}"> MINA </view>

模板 template

定义模板 name 属性 , 使用模板 is 属性 (可以动态引入)
模板的作用域只能使用 data 传入的数据 以及模板定义文件中定义的 <wxs />, Page 的 Fn可以直接调用.

---

• 引用 import 和 include

mport 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

假设: include 是非 <template/> 包裹抽离的文件

WXS 小程序脚本语言 - 支持部分 js 语法

导出 ` module.exports = xxx `  
wxs 模块均为单例 多个页面，多个地方，多次引用，使用的都是同一个 wxs 模块对象 
引用其他 wxs 文件模块 ` require ` 函数 相对路径

<wxs module="diy_name"></wxs>
<wxs src="./../comm.wxs" module="diy_name"></wxs>

事件系统

以 bind 或 catch 开头，然后跟上事件的类型. catch 事件绑定可以阻止冒泡事件向上冒泡
在非原生组件中，bind 和 catch 后可以紧跟一个冒号，其含义不变，如 bind:tap、catch:touchstart
基础库版本 2.8.1 起，原生组件也支持 bind 后紧跟冒号的写法

事件的捕获阶段, 事件对象 , mark , 使用 WXS 函数响应事件

基础组件

注意：所有组件与属性都是小写，以连字符 - 连接

获取界面上的节点信息

wx.createSelectorQuery() ; WXML 节点布局相交状态 ;

响应显示区域变化

略

动画

CSS 渐变 ; CSS 动画 ; wx.createAnimation ;
WXS 响应事件 的方式可以通过使用 WXS 来响应事件的方法来动态调整节点的 style 属性
将页面的 setData 改为 自定义组件 中的 setData 来提升性能

自定义组件

插件

小程序运行时

小程序进程小时 5 分钟, ios 退出杀死进程等; 小程序更新机制