微信小程序（三）wxml基本语法

wxml

• 关于项目目录结构参考微信开放文档指南篇。

JSON配置

• JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
• 常见的json 配置文件有3种：
  • 小程序配置 app.json：做全局配置
  • 页面配置 page.json：对小程序具体页面的配置
  • 工具配置 project.config.json：对开发者工具的个性化配置，如域名校验、代码上传时自动压缩等

注意：小程序无法在运行过程中去动态更新JSON

JSON语法

• SON文件都是被包裹在一个大括号{} 中
• JSON 中无法使用注释
• 键名需要双引号” ” 包裹
  键值之间有冒号 : 分隔
• 键值对之间用逗号 , 分隔
• JSON的值只能是以下几种数据格式：
  • 数字，包含浮点数和整数
  • 字符串，需要包裹在双引号中
  • Bool值，true 或者 false
  • 数组，需要包裹在方括号中 []
  • 对象，需要包裹在大括号中 {}
  • Null

WXML模板

• WXML 全称是 WeiXin Markup Language 微信标记语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
• 创建WXML 文件的方法：在app.json 中的“pages/index/index” 上新增一行 “pages/wxml/index” ，便会自动创建WXML 文件。

数据绑定

• WXML 通过 {{ 变量名 }} 来映射js里的 data 数据。
• 变量名是大小写敏感的，也就是说 {{name}} 和 {{NAME}} 是两个不同的变量。
• 没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中。
  示例：

<text id="{{id}}">{{msg}}</text>
//在js里
data: {
		id:1,
		msg:'小陈’
},

注：{{}} 叫做Mustache 语法。
{{}} 具有两种功能：动态渲染、逻辑运算。
{{}} 中除了变量名，还可以放置数字、字符串，并且做一些逻辑运算：算数运算、字符串拼接、三元运算

条件判断

• 在WXML 里有一套if、elif、else 组合。

  <text wx:if="{{name==='肥牛'}}">火锅</text>
  <text wx:elif="{{name==='可乐'}}">汉堡</text>
  <text wx:else>回家做饭</text>

• 可以一次性判断多个组件标签。

<block wx:if="{{true}}">
  <view> 1 </view>
  <view> 2 </view>
</block>

循环

• WXML 使用wx:for 渲染列表，默认数组的当前项的变量名为item，下标名为index。

<view wx:for="{{food}}" wx:key="id">
  <text>{{item.name}}</text>
</view>

• wx:key 是列表中每一个项目的唯一的标识符。这个标志符可以提高wxml 动态渲染的效率。比如列表数据中的某一项数据发生改变时，微信会根据唯一标志符，找找到wxml 列表中与此条数据对应的项目，然后只对此项目进行渲染。和vue、react 里的diff 算法是一个原理。

循环参数改名字

• 当循环嵌套时，item会重复导致报错，可以改名

 <view wx:for="{{food}}" wx:key="id" wx:for-item="ele" wx:for-index="ind">
    <text>{{ind}}:{{ele.name}}</text>
  </view>

模板

• wxml 中的重复性元素，可以制作成模板，从而方便批量修改。
• 设置：

<!-- template 模板需要设置name -->
<template name="hotel">
  <text>{{name}}：</text>
  <text wx:for="{{food}}" wx:key="id">{{index?'、':''}}{{item.name}}</text>
</template>

• 调用：

<!-- 使用模板时，is 指定其使用的模板，data 指定模板数据 -->
<template is=“hotel” data=“{{name:’小陈餐馆’,food}}"></template>  

wxss

• WXSS（WeiXin Style Sheets）是小程序的样式语言，用于描述WXML的组件的视觉效果。WXSS 就相当于网页里的css
  
• 项目公共样式：app.wxss，它会作用到小程序的每个页面。
• 页面样式：与app.json注册过的页面同名且位置同级的WXSS文件。
• 内联样式：在wxml 中，写在标签的style 属性里的样式
• 其它样式：可以被项目公共样式和页面样式引用的样式，比如模板文件里的样式。

注：小程序中不需要考虑样式文件的请求数量，不用像前端那样合并css 文件。

wxss和css的区别

• wxss拥有相对的尺寸单位rpx，一个单位的rpx 是手机宽度的1/750。
• 外联样式可用@import 导入
• background-image 里的图片为网络图片时，其图片所在网络的域名要经过微信许可。
• position 为absolute 的元素，需要position 为fixed 的容器。（这是由小程序的文档流中不存在window、document对象导致的）

wxss选择器优先级

• !importtant>style=">#id>.class>element

WeUI组件库

• WeUI 是一套与微信原生视觉体验一致的基础样式库
• WeUI 由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
• WeUI 包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生组件的样式。

wxml.js

作用域

• 小程序的作用域同 NodeJS 比较相似。
• 在一个文件中声明的变量和函数只在该文件中有效。
• 因此，在不同的文件中可以声明相同名字的变量和函数，不会互相影响。

模块化

es6 中模块化语法可以应用于小程序中。

• A.js 中建立A 模块

export default class A{
	constructor(name){
		this.name = name
	}
}

• 在index.js 中引入A 模块

import A from './A.js'
Page({
	data: {
		fruit:new A('苹果')
	},
})