第2章 小程序代码组成
JSON配置
作用
JSON为一种数据格式，在小程序中用作静态配置。
语法
{
"pages":[ //"key":"value" ,以键值对形式存在,且双引号不能少
"pages/index/index",
"pages/logs/logs"
],
"window":{ //window,设置窗口界面的属性
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}JSON无法使用注释，此处为理解代码添加注释。
JSON的值只能是一下格式:
1.数字，包含浮点数和整数
2.字符串，需要包裹在双引号中
3.Bool值，true 或者 false
4.数组，需要包裹在方括号中 []
5.对象，需要包裹在大括号中 {}
6.Null
WXML模板
作用
WXML全程WeiXin Markup Language, 是小程序框架设计的一套标签语言,结合小程序基础组件、时间系统,可以构建出页面的结构。
语法
<标签 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签>
基本语法
标签之间可以嵌套,常用<view>...</view>作为嵌套的外层。
数据绑定
WXML通过{{变量名}}来绑定WXML文件和对应JavaScript文件中的data对象属性。
<text data-test="{{var2}}">...{{var1}}...</text>js文件中data对象属性:
page({
data: {
time:(new Date()).toString(),
var1:"输出:",
var2:undefined,
var3:null,
var4:"4"
}
})逻辑语法
{{变量名}}中可以进行简单的逻辑运算。
三元运算
<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>算数运算
<view> {{a + b}} + {{c}} + d </view>条件逻辑
{{变量名}}中可以设置条件逻辑。
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>标签可以被<block >...</block>嵌套,从而实现整体逻辑判断。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<!-- array 是一个数组 -->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>对应的js文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})使用wx:for-index指定数组当前下标的变量名,使用wx:fonr-item指定数组当前元素的变量名.
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>- 关于wx:key的使用(一篇解释得不错的文章)
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。通过is属性赋值模板名来选择渲染的模板,并通过data=”{{var1,var2,var3…}}”来进行多个数据的绑定<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{index,msg,time}}"/><template is="msgItem" data="{{index:'9',msg,time}}"/>引用
WXML提供两种文件的引用方式：import
该方式能引用其他WXML文件,并能使用其中定义的template。
但该方式无递归性，即不能引用其他WXML文件中import的template。include
该方法相当于拷贝目标WXML文件中除<template/> 和 <wxs/>的代码。
共同属性
| 属性名 | 类型 | 描述 | 注解 |
|---|---|---|---|
| id | String | 组件的唯一标识 | 整个页面唯一 |
| class | String | 组件的样式类 | 在对应的WXSS中定义的样式类 |
| style | String | 组件的内联样式 | 可以动态设置的内联样式 |
| hidden | Boolean | 组件是否显示 | 所有组件默认显示 |
| data-* | Any | 自定义属性 | 组件上触发的事件时,会发送给事件处理函数 |
| bind*/catch* | EvenHandler | 组件的事件 |
WXSS样式
WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式。（类似于CSS）
文件组成
项目公共样式：
根目录/app.wxss页面样式:
在app.json中注册了的页面,pages/注册页面/注册页面.wxss其他样式:
可被项目公共样式和页面样式引用。
尺寸单位
在WXSS中,引入rpx(responsive pixel)尺寸单位,该尺寸单位使不同宽度的屏幕的元素在屏幕中拥有相同的比列。
在一个宽度为375物理像素的屏幕下, 1rpx = px。
rpx换算px(屏幕宽度/750) / px换算成rpx(750/屏幕宽度)
WXSS引用
在WXSS中引用其他WXSS@import './test_0.wxss'
由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。
内联样式
WXSS内联样式与Web开发一致:
<!--index.wxml-->
<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>小程序支持动态更新内联样式：
<!--index.wxml-->
<!--可动态变化的内联样式-->
<!--
{
eleColor: 'red',
eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>选择器
| 类型 | 选择器 | 样例 | 样例描述 |
|---|---|---|---|
| 类选择器 | .class | .intro | 选择所有拥有 class=”intro”的组件 |
| id选择器 | id | firstname | 选择拥有id=”firstname”的组件 |
| 元素选择器 | element | view checkbox | 选择所有文档的view组件和所有的checkbox组件 |
| 伪元素选择器 | ::after | view::after | 在view组件后边插入内容 |
| 伪元素选择器 | ::before | view::before | 在view组件前边插入内容 |
WXSS优先级与CSS类似，权重如图2-13所示：
WXSS选择器优先级权重
view{ // 权重为 1
color: blue
}
.ele{ // 权重为 10
olor: red
}
#ele{ // 权重为 100
color: pink
}
view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
color: orange
}
view.ele{ // 权重为 1 + 10 = 11
color: green
}