小程序学习--2

小程序学习–2 WXML、WXSS简介

说明

官方文档很详细，基本上是照着上边的内容梳理的

WXML

跟所有模板语言一样，WXML 支持数据绑定、条件渲染、循环、模块化等功能

1.数据绑定

WXML 中的动态数据均来自对应 Page 的 data

<!-- page.wxml --><view>{{msg}}</view>

Page({  data : {    msg:'this is view'  },  onLoad: function () {  }})

组件的属性、要写在""之内

<view id="item-{{id}}"> </view><checkbox checked="{{false}}"> </checkbox>

{{}}内可以进行简单运算
更多运算规则请查看这里

2.条件渲染

条件渲染，适合根据数据输出不同状态的 WXML

<view wx:if="{{length > 5}}">1</view><view wx:elif="{{length > 5}}">2</view><view wx:else>3</view>

<block></block>标签，一个不是组件的标签，不会再页面渲染，只接受控制属性，一般用于多个组件的包装

<block wx:if="{{true}}">  <view> view1 </view>  <view> view2 </view></block>

wx:if 和 hitdden

wx:if 只有在为true 的时候才会渲染组件，改变为 false 时，会局部渲染 销毁组件，hidden 的组件始终会被渲染，只是简单的控制显示隐藏，因此：需要频繁切换 用 hidden ；运行时条件变化可能性低的 用 wx:if

3.列表渲染

在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item

<!-- wx:for={{array}} 表示要遍历的数据    wx:key="id" 使用唯一字段的标识，跟react 的 key 一样可以提升性能    wx:for-index="index" 指定数组当前下标的变量名    wx:for-item="item" 指定数组当前元素的变量名， --><view wx:for="{{[{id:1, message:'hello'}, {id:2, message:'hello2'}]}}"    wx:key="id"     wx:for-index="idx"    wx:for-item="item">    {{idx}}: {{item.message}}        </view>

4.模板

WXML提供模板（template），可以让我们复用一些wxml片段

定义模板

<template name="temp">  <view>    <text>this is template</text>    <text>{{msg}}</text>  </view></template>

使用模板
模板只能使用 data 传入的数据

<!-- is 声明要使用的模板 ； data 传入数据 --><template is="temp" data="{{msg: 'msg'}}" />

引入外部的模板 import

<!-- 定义外部模板 --><!-- item.wxml --><template name="item">  <text>{{text}}</text></template><!-- 引入外部wxml模块 --><!-- index.wxml --><import src="item.wxml"></import><block wx:for="{{posts}}" wx:for-item="post" wx:key="id">    <!-- 调用引入模块，同时可传入数据 -->    <template is="item" data="{{post}}"></template>   </block>

注意：import 可以引入目标文件的template，但是目标文件import 的template 不会被引入

引入外部文件（整体引入include）
include可以将目标文件除了的整个代码引入，相当于是拷贝到include位置

<!-- header.wxml --><view> header </view><!-- index.wxml --><include src="header.wxml"/><view> body </view>

5.交互事件

一般书写方式

<view id="tapTest" data-hi="haihai" bindtap="tapName">CLick me</view>

// 绑定函数tapName 只是一个函数名称，默认接受一个event对象作为参数Page({  data:{},  tapName : function (event) {      console.log(event);      console.log(event.target.dataset.hi); // 'haihai'  }})

事件绑定

以bind 或者 catch 开头 ，然后 加上事件的类型 bindtap catchtap

bind 和 catch 的区别：bind 不组织冒泡；catch 可以阻止冒泡事件向上冒泡

事件对象 event

event 属性

• type : 事件类型
• target : 触发事件的组件的属性集合 其中 dataset 存放 data- 自定义属性
• currentTarget : 绑定事件的组件的属性集合 其中 dataset 存放 data- 自定义属性
• detail : 传递的数据参数

注意 data- 自定义属性 不能有大写，有-连字符，取值的时候要去驼峰命名的，如data-element-type 取值 event.target.dataset.elementType

WXSS

WXSS 是一套样式语言，用于描述 WXML 的组件样式，WXSS 具有 CSS 大部分特性，另外还有一些扩充

尺寸单位

规定屏幕宽度 750rpx 开发时尽量都使用 rpx 单位 ，类似于 rem 是可以根据屏幕宽度自适应的单位

样式

组件上可以使用style 和 class 来控制组件样式

class 中写入静态的样式 style 中接收 动态的样式，在运行时会解析

选择器

一般css 选择器都会支持，*选择器 好像不支持，

定义在app.wxss 中的样式为全局样式，作用于每一个页面，page.wxss中的样式只作用于当前页面，会覆盖app.wxss中的样式

下一篇 组件详解