《小程序01：介绍和使用》

《微信官方文档：小程序API》

一、小程序：框架介绍

（二）小程序代码结构简介

pages：注册微信小程序所有页面
tabBar：指定tab栏的表现
networkTimeout:设置各个网络请求的超时时间
debug:通过debug打印调试信息
navigationStyle:

navigationBarBackgroudColor：导航栏背景颜色
navigationBarTextStyle：导航栏的文字样式
navigationBarTitleText：导航栏的标题颜色
barBackgroudColor：窗体背景色
barBackgroudTextStyle：窗体下拉时的样式
enablePullDownRefresh：微信小程序全局下拉和刷新的表现

disableScroll: 页面是否开启滚动

（三）小程序开发框架

3.1：wxml的4种操作方式

微信小程序wxml共有四种绑定方式，分别是“数据绑定、列表渲染、 条件渲染、模块引用”

1、数据绑定

将js中的数据，绑定到view标签中

wxml框架的属性共分为6种

2、列表渲染

使用for循环进行列表渲染

3、条件渲染

使用if-elif-else进行条件渲染

4、模块引用

is、import、includey引用的区别？

3.2：wxss的4种操作方式

1、width元素高度、height元素高度、position元素定位方式、color元素中文本颜色、border元素边框
2、wxss样式的4中呈现方式：尺寸单位rpx、样式导入、内联样式、选择器

1、尺寸单位rpx

主要根据屏幕的分辨率，就可以知道一块区域有多少个像素

2、样式导入

通过属性设置，来引用样式，样式引入是有顺序的从上到下、从左到右

3、内联样式

一般我们将静态样式卸载标签中的style内联样式中

4、选择器

3.3：js和wxs的简单介绍

wxs的定义和引用的操作方法

wxs的注释的几种方式

3.4：小程序mina框架

3.5：小程序运行机制的启动和加载

1、小程序的启动
热启动：用户打开过小程序，后面又打一次，在未被销毁的时候打开，小程序秩序渲染前端就可以。
冷启动：（1）首次打开小程序；（2）小程序后台被销毁，如果短时间内未使用，则会被销毁，再次打开相当于首次打开

2、小程序的加载

3.6：小程序的路由

3.7：小程序事件流

1、时间的捕获是从组件的最外层依次进入组件里面，时间冒泡从内往外（时间的捕获、冒泡阶段，都会去获取“回调函数”进行事件处理）

2、捕获事件和冒泡事件说明：
touchstart：手指按下屏幕
touchmove：手指按下屏幕移动事件
touchcancel：手指按下屏幕来电停下或打断事件
touchend：手指离开屏幕的事件
tap：手指点击屏幕的操作
longpress、longtap：手指按下屏幕超过350毫秒事件（press之后会进行tap操作）

3、案例说明（todo待更新）

（四）API使用和介绍

4.1：事件监听API

以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。
这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

代码示例

wx.onCompassChange(function (res) {
  console.log(res.direction)
})

4.2：同步API

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

代码示例

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

4.3：异步API

大多数 API 都是异步 API，如 wx.request，wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数
Object 参数说明

参数名	类型	必填	说明
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）
其他	Any	-	接口定义的其他参数

代码示例

// callback 形式调用
wx.login({
  success(res) {
    console.log(res.code)
  },
  fail(res) {
    console.log(res.code)
  },
  complete(res) {
    console.log(res.code)
  }
}) 

4.4：异步API 返回 Promise

异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise，否则仍按回调方式执行，无返回值。
代码示例

// callback 形式调用`在这里插入代码片`
wx.chooseImage({
  success(res) {
    console.log('res:', res)
  }
})

// promise 形式调用
wx.chooseImage().then(res => console.log('res: ', res))

4.5：云开发API

云开发调用的API前面有个cloud关键字
代码示例

wx.cloud.callFunction({
  // 云函数名称
  name: 'cloudFunc',
  // 传给云函数的参数
  data: {
    a: 1,
    b: 2,
  },
  success: function(res) {
    console.log(res.result) // 示例
  },
  fail: console.error
})

// 此外，云函数同样支持promise形式调用