持续整理
前端
小程序代码构成
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 退出杀死进程等; 小程序更新机制