文章目录
- 一、WXML模板语法
- 1、数据绑定
- 2、事件绑定
- 3、条件渲染
- 4、列表渲染
- 二、WXSS模板样式
- rpx
- @import语法导入样式
- 全局和局部样式
- 三、全局配置
- 全局配置文件及常用配置项
- window
- tabBar
- 四、页面配置
一、WXML模板语法
1、数据绑定
数据绑定的原则：①在data中定义数据 ②在WXML中使用数据
// .js文件中data中定义数据
Page({
data: {
message:'Hello',
},
})
// .WXML文件夹中使用数据
<view>{{message}} </view>
Mustache语法（双大括号）应用场景：绑定内容、绑定属性、运算
注意：绑定属性不需要加冒号：eg
<images src="{{imgSrc}}"></images>
2、事件绑定
常用的事件
| 类型 | 绑定方法 | 事件描述 |
|---|---|---|
| tap | bindtap或bind:tap | 类似于click事件，手指触摸后马上离开 |
| input | bindinput或bind:input | 文本框输入事件 |
| change | bindchange或bind:change | 状态改变时触发 |
当事件回调触发时，会收到一个事件对象event，它包括以下属性
| 属性名 | 类型 | 说明 |
|---|---|---|
| type | String | 事件类型 |
| timeStamp | integer | 页面打开到触发事件所经历的毫秒数 |
target | Object | 触发事件的组件的一些属性值集合 |
| currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
| touches | Array | 触发事件，当前停留在屏幕中的触摸点信息的数值 |
| changedTouches | Array | 触摸事件，当前变化的触摸点信息的数组 |
target和currentTarget的区别
target是触发该事件的源头组件，而currentTarget是当前事件所绑定的组件。（用冒泡来理解）
《1》调用this.setData(dataObject) 方法可以给页面data中的数据重新赋值
// .WXML文件
<button bindtap="btn">按钮</button>
<text>数值为：{{count}}</text>
// .JS文件
pages({
data:{
count:0
}
btn(event){
this.setData({
count:this.data.count + 1
})
},
})
《2》使用data-*自定义属性传参
小程序不能在绑定事件的同时为事件处理函数传递参数，需要使用组件提供的data-*自定义属性传参，其中*表示参数的名字
<button bindtap="btn" data-num="{{2}}">按钮</button>
num会被解析为参数的名字，数值2会被解析为参数的值
《3》通过event,target.dataset.参数名即可获取具体参数的值
btn(event){
console.log(event.target.dataset.num)
},
《4》通过event.detail.value获取input框的最新值
// .WXML
<input type="text" bindinput="ipt"/>
// .js
ipt(e){
console.log(e.detail.value)
},
《5》案例总结
实现文本框与data之间的数据同步
// .WXML文件
<button bindtap="btn">点击按钮数字+1</button>
<text>数值为：{{num}}</text>
<input type="text" bindinput="ipt" value="{{num}}"/>
// .js文件
Page({
data: {
num:0
},
btn(){
this.setData({
num:this.data.num+1
})
},
ipt(e){
console.log(e.detail.value)
this.setData({
num:e.detail.value
})
},
})
3、条件渲染
使用wx:if="{{condition}}"来判断是否渲染代码，用wx:elif和wx:else来添加else判断
// .WXML
<view wx:if="{{sex=='男'}}">男</view>
<view wx:elif="{{sex=='女'}}">女</view>
<view wx:else>保密</view>
// .js文件
data: {
sex:'男'
},
// 运行结果：页面显示男
《1》< blcok>< /block>标签
如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在
< block> 标签上使用 wx:if 控制属性。
注意： < block> 并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
《2》hidden控制显示与隐藏
也可使用hidden="{{ condition }}" 也能控制元素的显示与隐藏
<view hidden="{{true}}">
也可使用hidden来显示与隐藏.值为true为隐藏
</view>
《3》wx:if 与 hidden 的对比
wx:if为动态创建和移除元素，hidden以切换样式的方式显示与隐藏元素
频繁切换使用hidden，控制条件复杂时使用wx:if搭配wx:elif和wx:else进行展示与隐藏
4、列表渲染
通过wx:for可以根据指定的数组，循环渲染重复的组件结构，索引用 index 表示；当前循环项用 item 表示
// .WXML文件
<view wx:for="{{array}}">
索引号为{{index}}，值为{{item}}
</view>
// .js文件
data: {
array:['憨瓜','波妞','德文']
},
《1》使用wx:key为列表项指定唯一的key值，从而提高渲染的效率
id不用加mustache语法
<view wx:for="{{array}}" wx:key="id">
索引号为{{index}}，值为{{item}}
</view>
二、WXSS模板样式
rpx
rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
《1》实现原理
rpx把所有设备的屏幕，在宽度上等分为750份，小程序在不同的设备上运行时，会自动把rpx单位的样式换算成对应的像素单位来渲染，从而实现屏幕的适配
eg：在iPhone6上，屏幕宽度为375px，共有750个物理像素，等分为750rpx，则750rpx = 375px = 750物理像素
在开发小程序中，建议使用iPhone6作为视觉稿的标准
@import语法导入样式
@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束
@import "common.wxss";
全局和局部样式
定义在 app.wxss 中的样式为全局样式，在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。
当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
三、全局配置
全局配置文件及常用配置项
根目录下的app.json文件是全局配置文件
常见的全局配置项
{
// pages ：记录当前小程序所有页面的存放路径
"pages":[
"pages/index/index",
"pages/list/list",
],
// window：全局设置小程序窗口的外观
"window":{
"navigationBarTitleText": "背心",
},
// tabBar：设置小程序底部的tabBar效果
"tabBar": {
"position": "bottom",
"borderStyle": "black",
"color": "#000000",
"selectedColor":"#ccc",
"backgroundColor": "#fff",
"list": [...]
},
// style：是否使用新版的组件样式
"style": "v2",
"sitemapLocation": "sitemap.json"
}
window
window常用的配置项
// window：全局设置小程序窗口的外观
"window":{
"backgroundTextStyle":"light", // 下拉loading样式，仅支持dark/light
"navigationBarBackgroundColor": "#fff", // 导航栏背景颜色
"navigationBarTitleText": "背心", // 导航栏标题文字内容
"navigationBarTextStyle":"black", // 导航栏标题颜色，仅支持black / white
"backgroundColor":"#FFFFFF", // 窗口的背景色
"enablePullDownRefresh": true, // 是否全局开启下拉刷新
"onReachBottomDistance":"50" // 页面上拉触底事件触发时距页面底部距离，单位为px
},
注意：设置上拉触底的距离，默认距离为50px，如果没有特殊需求，建议使用默认值即可
tabBar
tabBar 是移动端应用常见的页面效果，用于实现多页面 的快速切换。
// tabBar：设置小程序底部的tabBar效果
"tabBar": {
"position": "bottom", // tabBar的位置，仅支持bottom/top
"borderStyle": "black", // tabBar 上边框的颜色，仅支持 black/white
"color": "#000000", // tab 上文字的默认（未选中）颜色
"selectedColor":"#ccc", // tab 上的文字选中时的颜色
"backgroundColor": "#fff", // tabBar 的背景色
"list": [{ // tab 页签的列表，最少2个、最多个 tab
"pagePath": "pages/home/home", // 页面路径，页面必须在pages中预先定义
"text": "主页", // tab显示的文字
"iconPath": "images/tabs/home.png",// 未选中时的图片路径
"selectedIconPath": "images/tabs/home-active.png" // 选中时的图片路径
},{......},{ ......}
]
},
注意：
① tabBar中只能配置最少 2 个、最多5 个tab 页签
② 当渲染顶部 tabBar 时，不显示 icon，只显示文本
四、页面配置
每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置
当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准
页面配置中常用的配置项与全局window配置项一样
