小程序----小程序框架学习（二）视图层

程序框架：包括逻辑层、视图层和flex模型。逻辑层由javascript编写，视图层由WXML和WXSS配合组件组成，flex布局确保页面适应不同屏幕尺寸时在恰当的位置。本篇主要介绍视图层。

逻辑层介绍见https://blog.csdn.net/maidu_xbd/article/details/102491766

flex布局介绍见https://blog.csdn.net/maidu_xbd/article/details/102566583

1.WXML（WeiXin Markup Language）微信标记语言

• （1）数据绑定：简单绑定 ，组合属性绑定，控制属性绑定，运算绑定，组合绑定，依次如下。

<view>{{msg}}</view>
<view id='{{id}}'></view>
<view wx:if='{{age>=18}}'>成年人</view>   //控制属性绑定
<view wx:if='{{true}}'>为true显示</view>  //控制属性绑定
<view>{{a+b}}</view>
<view wx:for='{{[1,2,array]}}'>{{item}}</view>

• （2）列表渲染---【wx:for】

【buding.wxml】

<view wx:for='{{student}}' wx:key='student{{index}}'>
  <view>学生{{index+1}}:{{item}}</view>
</view>

【buding.js】

Page({
  /**
   * 页面的初始数据
   */
  data: {   
    student:['小李','Tom','Sarry']
  }
})

• （3）条件渲染---【wx:if="{{condition}}"】

【buding.wxml】

<view wx:if="{{age<18}}">青少年</view>
<view wx:elif="{{age>=18 && age<35}}">青壮年</view>
<view wx:elif="{{age>=35 && age<55}}">中年</view>
<view wx:else>老年</view>

【buding.js】

Page({
  /**
   * 页面的初始数据
   */
  data: {   
    age:36
  }
})

wx:if与hidden：均可以控制组件的显示与隐藏，区别在于wx:if是惰性的，如果初始渲染条件为false，框架什么也不做，在条件第一次变成true时才开始局部渲染，具有更高的切换消耗。而hidden无论条件为true或false，初始就会被渲染，具有更高的初始消耗。因此，如果需要频繁的切换组件，用hidden更好；如果在运行时条件很少发生改变，则使用wx:if更好。

• （4）模板--【<template>】

is属性用于指定正确的模板名称才能成功引用，引用<template>标签必须带有is属性

<template name="myTemp">
  <view wx:for="{{student}}" wx:key="student{{index}}">
  <view>学生{{index+1}}:{{item}}</view>
</view>
</template>

<template is="myTemp" data="{{student}}"></template>

• （5）事件：事件是视图层到逻辑层的通信方式，特点有①可以将用户的行为反馈到逻辑层进行处理；②可以绑定在组件上，当触发事件就会执行对应的事件处理函数；③对象可以携带额外信息，例如id，dataset，touches。

       ---事件使用---

//buding.wxml
<button id="myBtn" bindtap="myTap">按钮</button>

//buding.js
Page({
   myTap:function(e){
        console.log(e)
  }
})

控制台输出如下

     ---事件分类---

事件分为冒泡事件和非冒泡事件。

冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递，由内向外传递。

非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

                     WXML中支持的冒泡事件

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发

      ---事件绑定和冒泡---

事件绑定的写法同组件的属性，都是以 key=value 的形式。

• 1）key 以bind或catch开头，然后跟事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，bind和catch后可以紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
• 2）value 是一个字符串，需要在对应的 Page 中定义同名的函数，不然当触发事件的时候会报错。

bind事件和catch事件的区别：bind事件绑定不会阻止冒泡事件向上冒泡；catch事件绑定可以阻止冒泡事件向上冒泡。

【wxml】

<view>事件冒泡-bind事件绑定不会阻止冒泡事件向上冒泡</view>
<view class="outBox" bindtap="onOutBoxClick">
  <view class="innerBox" bindtap="onInnerBoxClick">
  </view>
</view>

【wxss】

.outBox{
  margin:0 auto;
  width: 200px;
  height: 200px;
  background: rgb(110, 110, 201);
  padding:50px;
  box-sizing: border-box;
}
.innerBox{
  width: 100px;
  height: 100px;
  background: rgb(113, 201, 110);
}

【js】

Page({
  onInnerBoxClick:function(e){
    console.log("内层盒子被点击了")
  },
  onOutBoxClick:function(e){
    console.log("外层盒子被点击了")
  }
})

当把【<view class="innerBox" bindtap="onInnerBoxClick">】替换为【<view class="innerBox" catchtap="onInnerBoxClick">】，则点击内层盒子，控制台只输出“内层盒子被点击了”，因为catch事件绑定可以阻止冒泡事件向上冒泡。

     ---事件的捕获阶段---

自基础库版本 1.5.0 起，触摸类事件支持捕获阶段。可以在组件的冒泡事件被触发前进行事件的捕获。捕获阶段事件的顺序与冒泡阶段完全相反，由外向内进行捕获。采用capture-bind、capture-catch进行捕获，capture-catch会中断捕获和取消冒泡。捕获的优先级大于冒泡。

示例

<view id="A" bindtap="tap1" capture-bind:tap="tap2">
  view A
  <view id="B" bindtap="tap3" capture-bind:tap="tap4">
    view B
  </view>
</view>

如果如果单击【view A】先后调用tap2,tap1

如果单击【view B】先后调用tap2,tap4,tap3,tap1,如下

 如果把图中28行的“capture-bind”替换为“capture-catch”，则只会触发tap2，捕获被中断，冒泡被取消。

    ---事件对象---
 事件对象分为基础事件（BaseEvent）、自定义事件（CustomEvent）、触摸事件（TouchEvent）

   基础事件（BaseEvent）对象属性列表

属性	类型	说明
type	String	事件类型
timeStamp	Integer	事件生成时的时间戳
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合

  自定义事件（CustomEvent）对象属性列表：

属性	类型	说明
detail	Object	额外的信息

 触摸事件（TouchEvent）对象属性列表：

属性	类型	说明
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

•     （6）引用

包括【import】和【include】两种方式

<import src="temp.wxml" />
<template is="temp01" data="{{text:'hello'}}"></template>

注意：<import>有作用域的概念，即只会引用目标文件自己定义的template，不会引用目标文件中用<import>引用的第三方模板。这样做的目的是为了避免多个页面彼此互相连接引用陷入逻辑错误。

使用<include>将目标文件除了<template>以外的代码引入，相当于复制代码作用。

<include src="header.wxml" />
<view>正文</view>
<include src="footer.wxml" />

<import>更适合统一样式但内容需动态变化的情况；<include>更适合无需改动目标文件的情况。    
  

---

2.WXSS（WeiXin Style Sheets）微信样式表

• （1）尺寸单位：

rpx（responsive pixel），可以根据屏幕宽度自适应，规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。

rpx 与 px单位换算如下：

设备	rpx换算px (屏幕宽度/750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

• （2）样式导入：

【@import "../../templates/common.wxss"】

• （3）常用属性

样式属性	说明
background-color	背景色
color	前景色
font-size	字体大小
border	边框
width	宽度
height	高度

• （4）内联样式

style 和class

【<view style="color:red;background-color:#ccc">测试1</view>】

【<view style="color:{{color}}">测试2</view>】

【<view class="style1">测试3</view>】

• （5）选择器

选择器	示例	说明
.class	.style1	选择所有拥有class=”style1”属性的组件
#id	#test	选择所有拥有id=”test”属性的组件
element	view	选择所有view组件
element,element	view,text	选择所有view组件和test组件
::after	view::after	在view组件后插入内容
::before	view:before	在view组件前插入内容

• （6）全局样式与局部样式

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

3.组件

组件是wxml页面上的基本单位，例如按钮，图片等