三、视图层概述

、
框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language) 用于描述页面的结构。

WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

WXSS(WeiXin Style Sheet) 用于描述页面的样式。

组件(Component)是视图的基本组成单元。

四、WXML语法

1.wxml概述及作用

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

2.数据绑定

<!-- 关键词绑定
      都加双花括号
-->

<view hidden="{{ false  }}">
  显示
</view>

<!-- 运算
        算数运算
        字符串运算
        三元运算
        路径运算
-->

<view>{{num+num1}}</view>
<!-- 82466 -->
<view>{{8+num2+num1}}</view>
<view>{{score>=60?'及格':'不及格'}}</view>
<view>{{arr[2]}}</view>
<view>{{info.name}}====={{info.age}}</view>
<view>{{goods[2].price}}====={{goods[2].goodsname}}</view>

3.列表渲染wx:for

<!-- 
  可以给item和index  起别名
  wx:for-item
  wx:for-index
 -->
<view wx:for="{{arr}}" wx:for-item="value" wx:for-index="idx" wx:key="*this">
{{idx}}----{{value}}--{{item}}
</view>

<!-- 嵌套实现九九乘法表 -->
<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
      <view wx:if="{{i<=j}}">
      
          {{i}}*{{j}}={{i*j}}
      </view>
  </view>
</view>

<!-- 
	wx：key 
    如果列表是静态的，不用处理没有任何影响
    如果列表是动态的，必须处理

    处理两种方法：
        wx:key= "*this"
            *this  当item是唯一的字符串或者数字时
        wx:key="唯一的属性"



 -->

 <view wx:for="{{goods}}" wx:key="id">
  {{item.price}}==={{item.goodsname}}
 </view>




 <!-- block  相当于容器，不会解析出任何元素。就是一个包装元素 
      类似于vue里template
-->
 <block wx:for="{{[1,2,3,4]}}">
   <view>{{index}}</view>
   <view>{{item}}</view>
 </block>

 <block wx:if="{{true}}">
   <view>
     一个个列表
   </view>
 </block>

 <block wx:else>
   <view>暂无数据</view>
 </block>

4.条件渲染

 <!-- 条件渲染
      双分支 wx：if   wx:else
      多分枝  wx：if   wx：elif  wx：elif  wx：else
-->

 <view wx:if="{{score>=60}}">
    及格
 </view>
 <view wx:else>
   不及格
 </view>

 <view wx:if="{{score>=80&&score<=100}}">优秀</view>
 <view wx:elif="{{score>=70&&score<80}}">良好</view>
 <view wx:elif="{{score>=60&&score<70}}">及格</view>
 <view wx:else>不及格</view>



hidden 和 wx：if的对比
 <!-- 
   类似于
   vue  v-if   v-show

   一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
  -->

 <view hidden="{{true}}">显示hidden</view>
 <view wx:if="{{false}}">显示if</view>

5.模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用
可以提高代码的复用性
下边代码是在同一个页面里定义和使用的模板
<!-- 
  1、如何定义  name
 -->
 <template name="mytem">
   <view>
    我是自定义模板--{{name}}--{{age}}
   </view>
 </template>

 <!-- 
   2、使用模板  is
  -->

  <template is="mytem"></template>

  <!-- 
    3、模板的传参  data
   -->
   <template is="mytem" data="{{...userinfo}}"></template>

6.引用 import include

新建外部的header模板

import  只能引入template之内的内容
<import src="/template/header.wxml"></import>
<template is="header" data="{{menu}}"></template>

include  引入除了template和wxs之外的内容
<include src="/template/header.wxml"></include>

五、WXSS样式

1.新特性

与 CSS 相比，WXSS 扩展的特性有：

尺寸单位   rpx
样式导入   @import "路径";


尺寸单位：rpx   响应的px单位，自己能够适应各种设备，所有设备的宽度都是750rpx
完全适应各种尺寸的手机
iphone 6基准机型
元素在设备上的大小（50rpx）/设备的尺寸大小（750rpx） = 元素在设计稿的宽度（50px）/设计稿的宽度（750px）
始终记住一句话，把设备调整成iphone6  然后量的多大px 就写多少rpx


@import "/template/header.wxss";
注意：在模板里导入样式时，在调用处的wxss文件里引入

1.1 style和class

静态的样式统一写到 class 中。style 接收动态的样式
  _changecolor(){
    // 随机改变颜色，每隔100毫秒随机改变颜色
    // 单词  rgb（0-255）  16进制
    let that = this
    setInterval(function(){
      let r = Math.floor(Math.random() * 255) 
      let g = Math.floor(Math.random() * 255) 
      let b = Math.floor(Math.random() * 255) 
      that.setData({
        // color:"rgb("+r+","+g+","+b+")"
        color:`rgb(${r},${g},${b})`
      })
    },100)
  },

2.全局样式/局部样式

全局样式：app.wxss
局部样式：页面.wxss

3.字体图标

代码案例：

1、去阿里巴巴图标库里找到图标，下载代码
2、里边的iconfont.css内容复制到wxss文件里（全局，页面）
3、把复制来的css代码，修改路径，如下图
4、给text标签，应用类名

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MpOaoLTy-1620906383435)(img/day02-1.png)]

六、事件系统

1.概念

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

2.事件绑定

bind*      eg：bindtap     bindlongpress ...
catch*     eg: catchtap     catchlongpress ...


编写事件函数时，使用 key value 形式或者  函数简写形式
_keyValue:function(){
    console.log("_keyValue",this)
    setInterval(()=>{
      this.data.num++
      this.setData({
        num:this.data.num
      })
    },1000)
  },
  _jianxie(){
    console.log("_jianxie",this)
  },

  // this  underfind
  _jiantou:()=>{
    console.log("_jiantou",this)
  }

3.传参接参

<!--传参 
    id=“”
    data-*=“”   * 自己取的参数名
-->
<button bindtap="_chuancan" id="10" data-title="你好" data-name="admin" 
data-cateid="9">传参</button>


接参：
  _chuancan(e){
    console.log(e.currentTarget)
    console.log(e.target)
  }

4.事件分类

冒泡事件      bind绑定是冒泡事件
非冒泡事件    catch绑定的是非冒泡事件

5.事件对象

target：触发事件的源组件，                 （是谁触发了这个事件）

currentTarget：事件绑定的当前组件，         （事件作用到了哪个组件身上）

总结：

WXML的冒泡事件列表：

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input

6、问题

bind和catch的区别？

​ bind 允许事件冒泡

​ catch 阻止事件冒泡

currentTarget和target有啥区别？

​ target：触发事件的源组件， （是谁触发了这个事件）

​ currentTarget：事件绑定的当前组件，（事件作用到了哪个组件身上）

获取参数，直接从currtentTarget获取最保险

七、WXS脚本语法

1.WXS脚本概述

WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构

2.WXS 模块

2.1遵循CommonJS` 模块化规范

  只能通过commonjs暴露，并且不能简写
  
  module.exports={
    msg:msg,
    fn:fn
  }

2.2 标签

<wxs module="mywxs1">
  var msg = "我是自定义内容"
  function fn(h){
    return "我是自定义函数"+h
  }

  module.exports={
    msg:msg,
    fn:fn
  }
</wxs>

<view>{{mywxs1.msg}}</view>
<view>{{mywxs1.fn("hello")}}</view>




<wxs module="mywxs2">
  function fn2(price){
    return price.toFixed(2)
  }
  module.exports={
    fn2:fn2
  }
</wxs>
<view>{{mywxs2.fn2(price)}}</view>

2.3.wxs 文件

1、新建好外部的.wxs文件（js代码）
2、把文件导入 
<wxs src="/common/common.wxs" module="mywxs3"></wxs>
<view>{{mywxs3.fn2(price)}}</view>

2.4反转字符串示例

<wxs module="mywxs4">
  function fn4(msg){
    return msg.split("").reverse().join("")
  }
  module.exports={
    fn4:fn4
  }
</wxs>

<view>{{mywxs4.fn4(msg)}}</view>

八、视图容器组件

1.swiper/swiper-item滑块视图容器

<!-- 
  swiper
  sweiper-item

  关系是嵌套关系，类似于 ul li

 -->

<swiper
indicator-dots
indicator-color="#f00"
indicator-active-color="#ff0"
autoplay
interval="1000"
duration="500"
circular

>
  <swiper-item wx:for="{{banners}}">
    <image src="/img/{{item}}"></image>
  </swiper-item>
</swiper>





<!-- 自己封装焦点 -->
wxml：
<view class="father">
  <swiper
autoplay
interval="1000"
duration="500"
circular
bindchange="_change"

>
  <swiper-item wx:for="{{banners}}">
    <image src="/img/{{item}}"></image>
  </swiper-item>
</swiper>

<!-- 切换到哪一张，拿到哪一张的索引，赋值给activeIndex -->
<view class="foucs">
  <text wx:for="{{banners}}" class="{{index==activeIndex?'active':''}}"></text>
</view>
</view>

js：
  _change(e){
    console.log(e.detail.current)
    this.setData({
      activeIndex:e.detail.current
    })
  }

2.scroll-view可滚动视图区域

<!-- 水平滚动 
    1、给view转成内联块，给父元素设置强制不换行
    2、给scroll-view添加 scroll-x属性即可
-->
<scroll-view class="container" scroll-x>
  <view class="red"></view>
  <view class="green"></view>
  <view class="blue"></view>
</scroll-view>


<!-- 垂直滚动 
  1、设置父元素的高小于子元素高的和
  2、给scroll-view设置属性 scroll-y即可

-->
<scroll-view class="container" scroll-y>
  <view class="red"></view>
  <view class="green"></view>
  <view class="blue"></view>
</scroll-view>

3.原生组件native-component

小程序中的部分组件是由客户端创建的原生组件，这些组件有：

camera
canvas
input（仅在focus时表现为原生组件）
live-player
live-pusher
map
textarea
video

原生组件具有最高的层级

4.cover-view覆盖在原生组件之上的文本视图

<map scale="{{scale}}">
  <cover-view bindtap="_scale">+</cover-view>
</map>

5.cover-image覆盖在原生组件之上的图片视图

<map>
  <cover-image src="/img/one.png" bindtap="_clickimg" class="img"></cover-image>
</map>

camera
canvas
input（仅在focus时表现为原生组件）
live-player
live-pusher
map
textarea
video

原生组件具有最高的层级

## 4.cover-view覆盖在原生组件之上的文本视图

```html
<map scale="{{scale}}">
  <cover-view bindtap="_scale">+</cover-view>
</map>

5.cover-image覆盖在原生组件之上的图片视图

<map>
  <cover-image src="/img/one.png" bindtap="_clickimg" class="img"></cover-image>
</map>