小程序由配置代码JSON文件、模板代码 WXML 文件、样式代码 WXSS文件以及逻辑代码 JavaScript文件组成。 [【官方文档】](https://developers.weixin.qq.com/ebook?action=get_post_info&token=935589521&volumn=1&lang=zh_CN&book=miniprogram&docid=000ace6c9603786b008636f2e56c0a) [TOC] * **文件结构** 小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。 一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下： | 文件 | 必填 | 作用 | | --- | --- |--- | | app.js | 是 | 小程序逻辑| | app.json | 是 | 小程序公共设置| | app.wxss | 否 | 小程序公共样式表| 一个小程序页面由四个文件组成，分别是： | 文件 | 必填 | 作用 | | --- | --- |--- | | js | 是 | 页面逻辑 | | wxml | 是 | 页面结构| | wxss | 否 | 页面样式表| | json | 否 | 页面配置| >[warning] 为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。 ## 1.1 JSON配置——`app.json`文件 JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演静态配置的角色。 根目录中的`app.json`文件为项目的公共配置文件。 ## 1.2 WXML 模板——`*.wxml`文件 `WXML` 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。 WXML 文件后缀名是 .wxml ，简单的 WXML语句在语法上同 HTML 非常相似。WXML 要求`标签必须是严格闭合`的，没有闭合将会导致编译错误。 WXML中的`属性是大小写敏感`的，也就是说 class 和 Class 在WXML中是不同的属性。 ### 1.2.1 数据绑定 在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新。 在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性。 ### 1.2.2 逻辑语法 通过` {{ 变量名 }}` 语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在 {{ }} 内进行简单的逻辑运算。 - 三元运算 - 算数运算 - 字符串的拼接 - 放置常量（数字、字符串或者是数组） ### 1.2.3 条件逻辑 WXML 中，使用`if-else`来判断是否需要渲染该代码块： - 语法：`wx:if="{{condition}}"`，`wx:elseif="{{condition}}"`，`wx:else` ### 1.2.4 列表渲染 在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为` index`，数组当前项的变量名默认为 `item`。 ### 1.2.5 模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 `name` 属性，作为模板的名字。然后在 `<template/>` 内定义代码片段。 ### 1.2.6 引用 WXML 提供两种文件引用方式`import`和`include`。 - `import` 可以在该文件中使用目标文件定义的 template， 需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。 - `include` 可以将目标文件中除了 `<template/> <wxs/>` 外的整个代码引入，相当于是拷贝到 include 位置 ### 1.2.7 共同属性 所有wxml 标签都支持的属性称之为共同属性，如表2-1所示。 :-: 表2-1 共同属性 | 属性名 |类型| 描述 | 注解 | | --- | --- | --- | --- | | id | String | 组件的唯一标识 | 整个页面唯一 | | class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 | | style | String | 组件的内联样式 | 可以动态设置的内联样式 | | hidden | Boolean | 组件是否显示 | 所有组件默认显示 | | data-* | Any | 自定义属性 | 组件上触发的事件时，会发送给事件处理函数 | | bind*/catch* | EventHandler | 组件的事件 | ## 1.3 WXSS样式--`*.wxss`文件 `WXSS`（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式，也就是视觉上的效果。 WXSS与Web开发中的CSS类似。为了更适合小程序开发，WXSS对CSS做了一些补充以及修改。 - **项目公共样式**：根目录中的`app.wxss`文件为项目公共样式文件，它会被注入到小程序的每个页面。 - **页面样式**：与app.json注册过的页面同名且位置同级的WXSS文件。 比如：在`app.json`文件中注册了`pages/rpx/index`页面，那`pages/rpx/index.wxss`为页面`pages/rpx/index.wxml`的样式文件。 在小程序开发中，开发者不需要像Web开发那样去优化样式文件的请求数量，只需要考虑代码的组织即可。样式文件最终会被编译优化，具体的编译原理我们留在后面章节再做介绍。 ### 1.3.1 尺寸单位 在WXSS中，引入了`rpx`（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。 小程序编译后，rpx会做一次px换算。 举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。 ### 1.3.2 WXSS引用 在小程序中，我们依然可以实现样式的引用，样式引用是这样写：`@import './test_0.wxss'` 由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。 ### 1.3.3 内联样式 WXSS内联样式与Web开发一致: 小程序支持动态更新内联样式： ### 1.3.4 选择器 目前支持的选择器如表2-2所示。 :-: 表2-2 小程序WXSS支持的选择器 | 类型 | 选择器 | 样例 | 样例描述 | | --- | --- | --- | --- | | 类选择器| .class| .intro | 选择所有拥有 class="intro" 的组件| | id选择器| | #id | #firstname| 选择拥有 id="firstname" 的组件| | 元素选择器| element| view checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件| | 伪元素选择器| ::after | view::after | 在 view 组件后边插入内容| | 伪元素选择器| ::before | view::before | 在 view 组件前边插入内容| WXSS优先级与CSS类似，权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。 ### 1.3.5 官方样式库 为了减轻开发者样式开发的工作量，我们提供了`WeUI.wxss`基础样式库。 WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含`button、cell、dialog、progress、toast、article、actionsheet、icon`等各式原生。 具体使用文档可参考：https://github.com/Tencent/weui-wxss ## 1.4 JavaScript脚本--`*.js`文件 小程序的主要开发语言是 JavaScript ，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。 ### 1.4.1 ECMAScript 在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。 ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。 小程序中的 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。 ECMA-262 规定了 ECMAScript 语言的几个重要组成部分： 1. 语法 2. 类型 3. 语句 4. 关键字 5. 操作符 6. 对象 小程序中的 JavaScript 是由ECMAScript 以及小程序框架和小程序 API 来实现的。同浏览器中的JavaScript 相比没有 BOM 以及 DOM 对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。 ### 1.4.2 小程序的执行环境 小程序目前可以运行在三大平台： 1. iOS平台，包括iOS9、iOS10、iOS11 2. Android平台 3. 小程序IDE 区别主要是体现三大平台实现的 ECMAScript 的标准有所不同。目前开发者大部分使用的是 ECMAScript 5 和 ECMAScript 6 的标准，但是在小程序中， iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准，一些 ECMAScript 6 中规定的语法和关键字是没有的或者同标准是有所不同的。 小程序IDE提供语法转码工具帮助开发者，将 ECMAScript 6代码转为 ECMAScript 5代码，从而在所有的环境都能得到很好的执行。 开发者需要在项目设置中，勾选 `ES6 转 ES5 `开启此功能。 ### 1.4.3 模块化 浏览器中，所有 JavaScript 是运行在同一个作用域下的，定义的参数或者方法可以被后续加载的脚本访问或者改写。 同浏览器不同，小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。 ### 1.4.4 脚本的执行顺序 浏览器中，脚本严格按照加载的顺序执行。 在小程序中的脚本执行顺序有所不同。小程序执行的入口文件是 `app.js` 。并且会根据其中 `require 的模块顺序`决定文件的运行顺序，当 app.js 执行结束后，小程序会按照开发者在 `app.json` 中定义的 `pages 的顺序`，逐一执行。 ### 1.4.5 作用域 同浏览器中运行的脚本文件有所不同，小程序的脚本的作用域同 NodeJS 更为相似。 在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响。 当需要使用全局变量的时，通过使用全局函数 `getApp()` 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的。