小程序代码组成
- 配置 —— JSON文件
- 模板 —— WXML文件
- 样式 —— WXSS文件
- 逻辑 —— JavaScript文件
JSON 配置
JSON 是一种数据格式，并不是编程语言。小程序中，JSON用于静态配置。
注意： 小程序中是无法在运行过程中去动态更新JSON配置文件从而发生对应的变化的。
JSON 语法
相比于XML，JSON格式的最大优点是易于阅读和编写，是一种轻量级的数据交换格式。
JSON文件都是被包裹在一个大括号中{}，通过key-value的方式来表达数据。
JSON的值只能是以下几种数据格式：
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
注： JSON不支持注释
WXML 模板
WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
介绍
WXML 文件后缀名是 .wxml，简单的 WXML 语句在语法上同 HTML 非常相似。
<!-- 注释 -->
<text>pages/wxml/index.wxml</text>WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。
标签可以拥有属性，且大小写敏感。
<image class='userinfo-avatar' src="./image/a.png"></image>数据绑定
在Web开发中，开发者使用 JavaScript 通过 DOM 接口来完成界面的实时更新。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。
<!-- pages/wxml/index.wxml -->
<text>当前时间：{{ time }}</text>// pages/wxml/index.js
Page({
// 页面的初始数据
data:{
time:(new Date()).toString() // 为time设置初始值
}
})WXML 通过 {{ 变量名 }} 来绑定 WXML文件和对应的 JavaScript文件中的 data 对象属性。
属性值也可以动态的去改变，不同的是，属性值必须被包裹在双引号中
<text data-test={{test}}>hello world</text>变量名是大小写敏感的，{{name}} 和 {{Name}} 是两个不同的变量。注意：没有被定义的变量或者被设置为undefined的变量不会被同步到 wxml 中。
逻辑语法
通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力，除此之外还可以在 {{ }} 内进行简单的逻辑运算。
<!-- 三元运算 -->
<text>{{a == 10 ? '变量 a 等于 10' : '变量 a 不等于 10'}}</text>
<!-- 算数运算 a:1,b:2,c:3 -->
<view>{{ a + b }} + {{ c }} + d</view>
<!-- 字符串拼接 name:world-->
<view>{{ "hello" + name }}</view>
<!-- 常量 -->
<view>{{ [1,2,3] }}</view>条件逻辑
WXML 中，使用 wx:if=“{{condition}}” 来判断是否需要渲染代码块：
<view wx:if="{{condition}}">True</view>使用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}">1</view>
<view wx:elif="{{length > 2}}">2</view>
<view wx:else>3</view>如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item。使用 wx:key 来指定列表中项目的唯一标识符。
<!-- list为一个数组 -->
<view wx:for="{{list}}" wx:key="index">
{{index}} - {{item.name}}
</view>// 对应的脚本
Page({
data: {
list: [{
name: 'Vue'
},
{
name: 'React'
},
{
name: 'JavaScript'
}
]
},
})wx:key的值有两种形式提供：
- 字符串，代表否循环中数组中的某个property，是列表中唯一的字符串或数字，且不能动态改变。
- 保留关键字this，代表for循环中的item本身。
模板
WXML 提供模板(template)，可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。
<template name="msgItem">
<view>
<text>{{index}}:{{msg}}</text>
<text>Time:{{time}}</text>
</view>
</template>使用 is 属性，声明需要的使用的模板，然后将模板所需要的data传入
<template is="msgItem" data="{{...item}}"></template>is 可以动态决定具体需要渲染哪个模板。
引用
WXML 提供两种文件引用方式 import 和 include。
共同属性
所有 wxml 标签都支持的属性称之为共同属性
共同属性
属性名 | 类型 | 描述 | 注解 |
id | String | 组件的唯一标识 | 整个页面唯一 |
class | String | 组件的样式类 | 在对应的 WXSS 中定义的样式类 |
style | String | 组件的内联样式 | 可以动态设置的内联样式 |
hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
data-* | Any | 自定义属性 | 组件上触发的事件时，会发送给事件处理函数 |
bind*/catch* | EventHandler | 组件的事件 |
WXSS 样式
WXSS (WeiXin Style Sheets) 是一套用于小程序的样式语言，用于描述WXML的组件样式。
文件组成
- **项目公共样式：**根目录中的app.wxss为项目公共样式，会被注入到小程序的每个页面。
- **页面样式：**与app.json注册过的页面同名且位置同级的WXSS文件
- **其他样式：**可以被项目公共样式和页面样式引用
尺寸单位
在WXSS中，引入了rpx尺寸单位，以适配不同宽度的屏幕。
1rpx = 屏幕宽度 / 物理像素
WXSS引用
@import './test_0.wxss'内联样式
WXSS内联样式与Web开发一致：
<view style="color:red;font-size:48rpx"></view>小程序支持动态更新内联样式：
<view style="color:{{eleColor}};font-size:48rpx"></view>选择器
小程序WXSS支持的选择器
类型 | 选择器 | 样例 | 样例描述 |
类选择器 | .class | .intro | 选择所有拥有 class=“intro” 的组件 |
id选择器 | #id | #firstname | 选择拥有 id=“firstname” 的组件 |
元素选择器 | element | view checkbox | 选择所有文档的 view 组件和所有的 checkbox 组件 |
伪元素选择器 | ::after | view::after | 在 view 组件后边插入内容 |
伪元素选择器 | ::before | view::before | 在 view 组件前边插入内容 |
官方样式库
WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。
JavaScript 脚本
小程序的主要开发语言是 JavaScript，开发者使用 JavaScript 来开发业务逻辑以及调用小程序的 API 来完成业务需求。
小程序的执行环境
小程序目前可以运行在三大平台：
- iOS平台
- Android平台
- 小程序IDE
模块化
小程序中可以将任何一个JavaScript文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。
脚本的执行顺序
浏览器中，脚本严格按照加载的顺序执行。
小程序中，执行的入口文件是 app.js。并且会根据其中 require 的模块顺序决定文件的运行顺序。
作用域
小程序的脚本的作用域同NodeJS更为相似。
在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会相互影响。
