微信小程序学习

微信小程序

一、小程序代码构成

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 大部分特性。

二、运行环境

avatar 小程序的渲染层和逻辑层分别由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	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

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

属性	类型	说明
errMsg	string	错误信息，如果调用成功返回 ${apiName}:ok
errCode	number	错误码，仅部分 API 支持，具体含义请参考对应 API 文档，成功时为 0。

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

代码示例

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

posted @ 2019-09-28 15:21 ttxhkx 阅读(212) 评论(0) 编辑收藏举报

刷新页面返回顶部

ttxhkx