（学习笔记1）微信小程序代码构成-JSON，WXML,CSS,JS

 通过开发者工具快速创建了一个 QuickStart（即开发者工具替你快速生成一些必要文件） 项目，会发现

微信小程序总的来说分为四种文件类型：

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件： 即是weixin的HTML类型文件
3. .wxss 后缀的 WXSS 样式文件： 即是weixin的CSS类型文件
4. .js 后缀的 JS 脚本逻辑文件

json配置

 

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

1. {

2. "pages": ["pages/index/index", "pages/logs/index"],

3. "window": {

4. "navigationBarTitleText": "Demo"

5. },

6. "tabBar": {

7. "list": [

8. {

9. "pagePath": "pages/index/index",

10. "text": "首页"

11. },

12. {

13. "pagePath": "pages/logs/logs",

14. "text": "日志"

15. }

16. ]

17. },

18. "networkTimeout": {

19. "request": 10000,

20. "downloadFile": 10000

21. },

22. "debug": true,

23. "navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]

24. }

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。

 

工具配置 project.config.json

用来保存项目使用的工具的个性化配置如界面颜色、编译配置等等，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，载入同个项目的代码包，即可恢复但是开发项目的个性化配置。

 

页面配置 page.json

小程序里边的每个页面特有的相关配置

1. {

2. "navigationBarBackgroundColor": "#ffffff",

3. "navigationBarTextStyle": "black",

4. "navigationBarTitleText": "微信接口功能演示",

5. "backgroundColor": "#eeeeee",

6. "backgroundTextStyle": "light"

7. }

JSON 语法 

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []   （例如上面例子的"pages": ["pages/index/index", "pages/logs/index"]）
5. 对象，需要包裹在大括号中 {}  （例如上面例子的 "window": {    "navigationBarTitleText": "Demo"  }  ）
6. Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

 

WXML模板

网页编程采用的是 HTML + CSS + JS 这样的组合，HTML （超文本标记语言）是用来描述当前这个页面的结构，CSS（层叠样式表）描述的是页面的样式，JS（JavaScript）通常是用来处理这个页面和用户的交互。

WXML 充当的就是类似 HTML 的角色

与HTML不同之处：

1.写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者直接包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。

2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

在网页的一般开发流程中，我们通常会通过 JS 操作DOM（文档对象模型即对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。代码充斥界面交互逻辑和程序的各种状态变量，不是一个很好的开发模式。因此就有了 MVVM 的开发模式（例如 React, Vue），提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。

WXML 是这么写 :

<text>{{msg}}</text>

JS 只需要管理状态即可:

this.setData({msg: 'Hello World'})

其中<text>标签就是上面收的模板语法，用它来显示界面结构。而用JS来管理变量 msg的状态。

通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。 

 

WXSS 样式

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

1.新增了尺寸单位.考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx（responsive pixel 反应像素）

2.提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。

3.此外 WXSS 仅支持部分 CSS 选择器

 

JS 逻辑交互

交互：响应用户的点击、获取用户的位置等等。 用JS 脚本文件来处理用户的操作。

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

1. Page({

2. clickMe() {

3. this.setData({msg: 'Hello World'})

4. }

5. })

此外你还可以在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息、本地存储、微信支付等。在前边的 QuickStart 例子中，在 pages/index/index.js 就调用了 wx.getUserInfo 获取微信用户的头像和昵称，最后通过 setData 把获取到的信息显示到界面上。

 

 查看自微信小程序开发文档。