微信小程序官方文档复习

持续整理

前端

小程序代码构成

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退出杀死进程等; 小程序更新机制