微信小程序

一、小程序代码构成

1.JSON 配置

（1）小程序配置 app.json

• app.json： 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等（类似manifest）。
• project.config.json： 工具配置 工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置
• page.json 页面配置：独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

2、WXML 模板

WXML 充当的HTML 的角色。但是小程序的 WXML 用的标签是 view, button, text 等等。 把渲染与逻辑分离，即不让JS直接操控DOM，只需管理状态

3、WXSS样式

WXSS 用来决定 WXML 的组件应该怎么显示。WXSS 具有 CSS 大部分特性。

二、运行环境

小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程（这啥？）运行JS脚本。一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发

程序与页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。

紧接着通过 app.json 的 pages 字段就可以知道你当前小程序的所有页面路径:

 {
    "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ]
}

这个配置说明在项目定义了两个页面，分别位于 pages/index/index 和 pages/logs/logs。而写在 pages 字段的第一个页面就是这个小程序的首页。

于是微信客户端就把首页的代码装载进来，通过小程序底层的一些机制，就可以渲染出这个首页。

小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
    onLaunch: function () {
     // 小程序启动之后 触发
    }
   })

整个小程序只有一个 App 实例，是全部页面共享的

三、API

1.事件监听 API

以 on 开头的 API 用来监听某个事件是否触发，如：wx.onSocketOpen，wx.onCompassChange 等。

这类 API 接受一个回调函数作为参数，当事件触发时会调用这个回调函数，并将相关数据以参数形式传入。

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

2.同步API

以Sync结尾的API都是同步API，如wx.setStorageSync，wx.getSystemInfoSync等。同步 API 的执行结果可以通过函数返回值直接获取，如果执行出错会抛出异常。如：

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

3.异步API

大多数 API 都是异步 API，如 wx.request，wx.login（调用接口获取登录凭证） 等。这类 API 接口通常都接受一个 Object 类型的参数，这个参数都支持按需指定以下字段来接收接接口调用结果

回调函数的参数 success，fail，complete 函数调用时会传入一个 Object 类型参数，包含以下字段

异步 API 的执行结果需要通过 Object 类型的参数中传入的对应回调函数获取。部分异步 API 也会有返回值，可以用来实现更丰富的功能，如 wx.request（发起 HTTPS 网络请求），wx.connectSocket（创建一个 WebSocket 连接） 等。

代码示例

 wx.login({
    success(res) {
    console.log(res.code)
 }
})

微信小程序学习