微信小程序（一）

发表于

代码构成

JSON配置

在自动创建的项目文件中，有4个json文件，我们依次来解释一下它们的功能。

小程序配置 app.json

app.json是对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部tab等。对于自动创建的项目中的app.json文件，包括了pages和window两个字段:

  1. pages: 用来描述当前小程序的所有页面路径，为了让微信客户端知道当前你的小程序页面定义在哪个目录。也就是说，这就相当于一个路由配置，目的是为了给微信程序找到正确的页面路径；
  2. window: 小程序所有页面的顶部背景颜色，文字颜色的定义都在这个字段里
    其他的一些可能用到的app.json配置项为:
  3. tabBar: 设置底部tab的表现（这里底部的tab是用来导航的，而不是我需要的输入控件）
  4. networkTimeout: 设置网络超时时间
  5. debug: 设置是否开启debug模式

工具配置 project.config.json

这个配置文件是为了方便开发者使用的，比如开发者对于开发环境的一些配置，会记录在这个文件中，等到他换其他电脑或者重新安装开发工具的时候，只要载入同一个项目的代码包，那么开发者工具就会帮他恢复之前对于开发环境的个性化配置。

页面配置 page.json

在页面路径下的page.json主要用来控制与小程序页面相关的配置。app.json是全局配置文件，而page.json是某个页面的配置文件，这让某个单独的页面可以被独立定义。

WXML 模板

从事过网页编程的人都知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。

同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。在pages/index/index.wxml文件中有如下的代码:

在这个文件中，我们可以看出来，大体的结构与HTML语句是很相似的，但是也有很多不一样的地方:

  1. 标签名称不一样: 在HTML语言中，通常使用的标签是div, p, span等，而在这里，小程序的WXML使用的是view, button, text这样的标签。这些标签是小程序为开发者包装好的基本能力，把一些常用的组件包装起来，提高开发者的效率。
  2. 多了一些wx:if这样的属性以及这样的表达式: 在一般的网页开发中，我们通常使用JS操作DOM，以引起界面的变化来响应用户的操作。微信小程序使用MVVM的开发模式，提倡把渲染和逻辑分开，就是不要再让JS直接操作DOM，而只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。通过的语法把一个变量绑定到界面上，称之为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要if/else, for等控制能力，在小程序里边，这些控制能力都用wx:开头的属性来表达。

WXML 详细

WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件和事件系统，可以构建出页面的结构。其具有以下的多项能力:

  1. 数据绑定:
  2. 列表渲染: wx:for
  3. 条件渲染: wx:if & wx:else
  4. 模板: 可以在模板中定义代码片段，然后在不同地方调用（可以将用户发言的message作为模板，多次调用）
  5. 事件: 将组件与事件处理函数进行绑定

WXSS 样式

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

  1. 小程序提供了专门的尺寸单位rpx: 开发者可以不用操心不同设备像素比的麻烦，底层会进行换算。
  2. 提供了全局的样式和局部的样式: 与app.json和page.json的概念相同，可以有app.wxss作为全局样式，也可以有page.wxss对单个页面样式进行修改。

JS 交互逻辑

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

小程序的能力

小程序的启动

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

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

1
2
3
4
5
6
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

这个配置说明在自动创建的小程序项目里，定义了两个页面，分别位于pages/index/index以及pages/logs/logs。写在pages字段的第一个页面就是小程序的首页（不论命名如何）。

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

1
2
3
4
5
App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

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

程序与页面

我们可以观察到pages/logs/logs下其实是包括了4种文件的，微信客户端会现根据logs.json配置生产一个界面，顶部的颜色和文字都可以在这个json文件中定义好。紧接着客户端就会装置这个页面的 WXML 结构和 WXSS 样式。最后客户端会装在logs.js，你可以看到logs.js的大体内容就是:

1
2
3
4
5
6
7
8
Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

Page是一个页面构造器，这个构造器就生成了一个页面。在生成页面的时候，小程序框架会结合data数据和index.wxml一起渲染出最终的结构，于是就看到了你看到的小程序的样子。在渲染完界面之后，页面实例就会收到一个onLoad的回调，你可以在这个回调里处理你的逻辑。

组件

小程序提供了丰富的基础组件给开发者，开发者可以像搭积木一样，组合各种组件拼成自己的小程序。

API

为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。

获取地理位置:

1
2
3
4
5
6
7
wx.getLocation({
    type: 'wgs84',
    success: (res) => {
        var latitude = res.latitude
        var longtitude = res.longtitude
    }
})

调用微信扫一扫:

1
2
3
4
5
wx.scanCode({
    success: (res) => {
        console.log(res)
    }
})