微信小程序开发自学笔记 —— 二、小程序代码组成

小程序代码组成

• 配置 —— JSON文件
• 模板 —— WXML文件
• 样式 —— WXSS文件
• 逻辑 —— JavaScript文件

JSON 配置

JSON 是一种数据格式，并不是编程语言。小程序中，JSON用于静态配置。

注意： 小程序中是无法在运行过程中去动态更新JSON配置文件从而发生对应的变化的。

JSON 语法

相比于XML，JSON格式的最大优点是易于阅读和编写，是一种轻量级的数据交换格式。

JSON文件都是被包裹在一个大括号中{}，通过key-value的方式来表达数据。

JSON的值只能是以下几种数据格式：

1. 数字，包含浮点数和整数
2. 字符串，需要包裹在双引号中
3. Bool值，true 或者 false
4. 数组，需要包裹在方括号中 []
5. 对象，需要包裹在大括号中 {}
6. 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的值有两种形式提供：

1. 字符串，代表否循环中数组中的某个property，是列表中唯一的字符串或数字，且不能动态改变。
2. 保留关键字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 来完成业务需求。

小程序的执行环境

小程序目前可以运行在三大平台：

1. iOS平台
2. Android平台
3. 小程序IDE

模块化

小程序中可以将任何一个JavaScript文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。

脚本的执行顺序

浏览器中，脚本严格按照加载的顺序执行。

小程序中，执行的入口文件是 app.js。并且会根据其中 require 的模块顺序决定文件的运行顺序。

作用域

小程序的脚本的作用域同NodeJS更为相似。

在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会相互影响。