微信小程序入门：详解wxml和wxss

今天我们具体学习下Pages文件夹下的文件与小程序的配置又什么不同：

首先介绍小程序的框架，MINA框架中有四种类型的文件，其中json文件仅仅是小程序的配置:

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

WXML不同于网页开发xml的就是里面的组件，因为官网已经介绍的很清楚了，这里就不介绍了，提供链接：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

用以下一些简单的例子来看看 WXML 具有什么能力： 官方链接：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/

1 数据绑定：

利用大括号{{ text }}这样的格式来进行信息的绑定，我们只需要在js文件的data属性中加上 text代表的数据。

例如：

在.wxml文件中： {{ name }}

在.js中配置：

data{

name：“Wechat”

}

注意关键字 true和false 必须是这样使用

特别注意：不要直接写checked="false"，其计算结果是一个字符串，转成 boolean 类型后代表真值。

2 列表渲染  :

利用wx：for 实现对数组进行循环展示时候使用， wx:for-item指定数组当前元素的变量名  wx:for-index制定数组当前元素的下标 0，1

或者是直接在for循环的标签内部：{{item}}  {{index}}同上面的功能一样的  例如：

在index.js文件中设置data数据 定义一个array数组：

我们在wxml文件中利用wx:for把数据实时渲染上去：

编译之后的结果:

上面我们可以看出{{ item }}和wx：for-item=“myitem”具有相同作用：都是代表array数组的item ，但是我们可以自定义item名称，自定义的名称一目了然。

wx:key当数据改变并且促发到了界面的渲染时候 在小程序进行数据渲染的时候会把去会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，已确保他们保存的状态

如果有switch checkbox等需要保存状态的组件时 需要带有key关键值 用来保存之前的状态  。

3 条件渲染：

wx:if="{{hidden}}"  判断里面hidden的值进行判断,一般情况下都是用来判断是否首先是某个组件，通过js中的逻辑代码，动态控制组件是显示还是隐藏

如果需要一次性判断多个条件  使用block标签

view1

view2

<\block>

4 模板：模板其实就是android中的base类 也就是通用 例如每个界面的头部相同的话，只需要引用template就可以了。

定义模板

使用name属性，作为模板的名字。然后在内定义代码片段，如：

{{index}}: {{msg}}

Time: {{time}}

使用模板

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

Page({  data: {    item: {      index:0,      msg:'this is a template',      time:'2016-09-15'}  }})

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

odd

even

注意这个是在同一个mxml文件中的template 自我感觉没有什么意义，一般情况下这个都是用来设置header和footer，定义在pages文件夹之外。

在下面的引入中会有使用外界的template

5 事件： 重点

事件可以用来对视图层和逻辑层进行通信的方式

事件也可以将用户的行为传递到逻辑层做处理 也就我们所说的点击事件

事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

事件对象可以携带额外信息，如 id, dataset, touches。 页面跳转时候都会发送信息过去。

点击事件可以分为2类：

1：冒泡事件: 点击事件会向点击组件的父类进行传递

2：非冒泡事件：点击事件不会向点击组件的父类传递

WXML的冒泡事件列表：

类型触发条件

touchstart手指触摸动作开始

touchmove手指触摸后移动

touchcancel手指触摸动作被打断，如来电提醒，弹窗

touchend手指触摸动作结束

tap手指触摸后马上离开

longtap手指触摸后，超过350ms再离开

注：除上表之外的其他组件自定义事件如无特殊申明都是非冒泡事件，如的submit事件，的input事件，的scroll事件，(详见各个组件)

在事件的绑定有2种绑定方式 1：bind 2：catch  但是bind事件不会阻止冒泡事件向上的传递。但是catch事件会阻止冒泡事件向上传递

outer view

middle view

inner view

我点击middle view时候出现：

我点击inner view

从上面可以说明 catch绑定事件，是不会向父级目录传递的，但是inner view使用bind绑定就向父级目录传递了。

事件对象：

如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

bind：function(e){

console.log(e)

}

dataset

在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.target.dataset 中会将连字符转成驼峰elementType。

在使用过程中很简单，只需要在wxml中的组件中加入 data-id=“”

这个时候在点击事件的currentTarget /dataset目录下就有了一个id的属性 可以直接使用 e.currentTarget.dataset.id获取id中的值，其实也就是传递数据的一种方式

6 引入

在小程序里面对于框架的引用有着import和include 其实都是对框架的引用

在import一般和template使用 引入框架 例如：

在下面我们设置了2个template模块，一个是header 一个是footer

接下来是我们的引用了：

在引入使用src属性定义路径 注意路径格式： ../../template/template.wxml

这里的第一个"  ../  "回到父级目录，这里是pages目录下， 第二个“../”这里是回到了pages目录 而我们的template和pages在用同一个目录下，

这样就可以直接进入template

利用" is "确定是使用那个template  data采用key-value的格式来设置数据 注意key必须和template中的一致 但是野可以直接在data属性中设置参数

上面的例子 header直接使用key-value进行赋值，在footer模板中使用data动态渲染赋值

注意template的作用域:

import只能使用引用的目录中的template  如果在A import B  C import A 即使C import A  在C中也是不能使用B中的template

也就是说import不具备传递性

另外一种引入是 include标签 include标签就是将head.wxml中的布局复制过来 使用方式：

WXSS(WeiXin Style Sheets):是一套样式语言，用于描述 WXML 的组件样式。

WXSS 用来决定 WXML 的组件应该怎么显示。

为了适应广大的前端开发者，我们的 WXSS 具有 CSS 大部分特性。 同时为了更适合开发微信小程序，我们对 CSS 进行了扩充以及修改。

对于初学者而言 这可以说是最难的，但是熟悉之后确实最简单的，因为着都是固定，不想业务逻辑动态改变。

与 CSS 相比我们扩展的特性有：

尺寸单位

样式导入

尺寸单位：

rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

对于android开发的人而言其实很简单 也就是类似dp 设置的大小不会根据屏幕的大小改变而改变，根据屏幕的像素px来改变大小的，所以比例都是一样大小的。

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。