微信小程序WXML、WXSS、事件系统、WXS、组件(详解)--看完就会写微信小程序。前面还有基础教程

三、视图层概述

、
框架的视图层由 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的冒泡事件列表：

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

除上表之外的其他组件自定义事件如无特殊声明都是非冒泡事件，如 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>