小程序原生2

视图层概述

(1)框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
(2)将逻辑层的数据反映成视图，同时将视图层的事件发送给逻辑层。
(3)WXML(WeiXin Markup language) 用于描述页面的结构。
(4)WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
(5)WXSS(WeiXin Style Sheet) 用于描述页面的样式。
(6)组件(Component)是视图的基本组成单元。

WXML语法

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/ 文档地址

wxml概述及作用

列表渲染wx:for

语法：

指令：  wx:for="{{ 变量 }}"
默认值：  item，index
修改默认值：  wx：for-item="xxx"  wx:for-index="xxx"
key：  wx：key
	取值： 
		(1)*this, 变量是一个简单的数组，数组元素是string或者是number，并且是唯一的，此时可以使用*this
		(2)唯一的属性  
				  数组元素不是一个string或者是number，要使用数组元素中唯一的属性  wx:key="id"
				  [{id,name,age},{id,name,age}]

wxml

<!-- 使用默认值 -->
<!-- <view wx:for="{{ arr }}">
    {{ index }}--{{ item }}
</view> -->

<!-- 改变默认值 -->
<!-- <view wx:for="{{ arr }}" wx:for-item="val" wx:for-index="ind">
    {{ ind }}--{{ val }}
</view> -->

<!-- wx:key -->
<!-- <view wx:key="index" wx:for="{{ arr }}" wx:for-item="val" wx:for-index="ind">
    {{ ind }}--{{ val }}
</view> -->


<switch wx:key="*this" wx:for="{{ brr }}">{{ item }}</switch>
<button bindtap="click">click</button>

<!-- block -->

js

Page({
    data: {
        arr:["鲁班","虞姬","妲己","艾希"],
        brr:[1,2,3]
    },
    click(){
        // 在brr前面追加数据  
        var len = this.data.brr.length + 1;
        this.data.brr.unshift(len);
        this.setData({
            brr:this.data.brr
        })
    }
    
})

条件渲染

语法：

指令： wx：if   wx：else   wx：elif   hidden （v-show）
   

<!-- 
    条件渲染
 -->
 <!-- 单分支 -->
 <view wx:if="{{ score>=60 }}">及格</view>

<!-- 双分支 -->
 <view wx:if="{{ score>=60 }}">及格</view>
 <view wx:else>不及格</view>

 <!-- 多分支 -->
 <view wx:if="{{ score>=0 &&  score<60 }}">不及格</view>
 <view wx:elif="{{ score>=60 && score <=100 }}">优秀</view>
 <view wx:else>不合法</view>

 <view hidden="{{ false }}">hidden</view>
 <view hidden="{{ true }}">hidden</view>

模板

语法：

1.自定义组件（页面结构、js、样式）
2.模块 （js）
3.模板  （wxml页面结构）
	(1)定义模板
		template + name
	(2)使用模板
		template +  is
	(3)模板传参
		data
	(4)引用
        import +  src

代码案例：

<!-- 模板的使用 -->
<template name="tem1">
    <view>
        name:{{ name }}
        age：{{ age }}
    </view>
</template>
<!-- 使用模板 -->
<!-- <template is="tem1" data="{{ name:'admin' }}"></template> -->
<template is="tem1" data="{{ name,age }}"></template>

common/wxml/common.wxml

<!-- 公共模板 -->
<template name="tem2">
    <view>
        name:{{ name }}
        age：{{ age }}
    </view>
</template>

引用

语法：

import    用来导入模板
include   用来导入除了模板之外的普通wxml文件

代码案例

<!-- 引用模板 -->
<import src="../../common/wxml/common.wxml" />
<template is="tem2" data=""></template>

<!-- include -->
<include src="../../common/wxml/other.wxml"></include> 

WXSS样式

新特性

单位：

rpx    宽度自适应单位
设计稿元素大小/设计稿宽度（750px） =  实际布局的大小/实际设备的宽度（750rpx）

样式导入：

@import   "";  ||  @import url("");

全局样式/局部样式

//全局样式
app.wxss
//局部样式
pages/wxss/wxss.wxss

style操作

<view class="box1" style="background-color:{{ color }}"></view>
<button bindtap="change">change</button>

Page({
    data: {
        color: "rgb(255,0,0)", 
    },
    change() {
        setInterval(()=>{
            var r = this.rand();
            var g = this.rand();
            var b = this.rand();
    
            this.setData({
                color:`rgb(${r},${g},${b})`
            })
        },50)
      
    },
    // 返回0-255的随机数 
    rand() {
        return Math.floor(Math.random() * 256);
    }
})

事件系统

概念

• 事件是视图层到逻辑层的通讯方式

事件绑定

语法：

1.bind +  事件类型 = "事件函数"
2.catch +  事件类型 = "事件函数"
	区别： bind允许事件冒泡，catch是阻止事件冒泡

代码案例

<!-- 事件绑定 -->
<button bindtap="click">bind</button>
<button catchtap="click">catch</button>

传参接参

• 传参数

data-*-*
    data-itemid  data-item-id = （itemId）
在传递参数时，如果是id，可以直接绑定，其他的参数要使用data-进行传递

<!-- 事件传参 -->
<button id="2" bindtap="click" data-item-id="1">bind</button>

• 接收参数

事件对象e

currentTarget  vs  target  （dataset）  vs   detail

1.target是触发事件事件源上的参数
2.currentTargte 是当前触发事件绑定源组件上的参数
3.detial是基础组件自带默认事件传递的参数

事件分类

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

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

总结：

<!-- 事件冒泡 -->
<view class="parent" bindtap="parentclick" data-msg="parent">
parent
    <view class="child" bindtap="childclick" data-msg="child">child</view>
    <!-- <view class="child" catchtap="childclick" data-msg="child">child</view> -->
</view>

WXS脚本语法

 html页面，  script  

WXS脚本概述

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

​ wxs存在的意义就是充当compute/filter这类功能。vue中有watch(侦听属性)，angular中有filter(过滤器)。其核心作用都是用来避免重复地在模板内写过长的表达式。

支持的数据类型：

`WXS` 语言目前共有以下8种数据类型：
- `number` 数值类型
- `string` 字符串类型
- `boolean` 布尔类型
- `object` 对象类型
- `function` 函数类型
- `array` 数组类型
- `date` 日期类型
- `regexp` 正则

WXS 模块

遵循CommonJS 模块化规范

• 使用module.exports对外暴露，使用require引入

wxs 标签

<!-- 1.使用wxs标签定义模块 -->
<wxs module="m1">
    var number = 99;
    function  _toFixed(str,len){
        return  str.toFixed(len)
    }	
    function  wxsclick(a){
        console.log(123,a.target.dataset.index)
    }
   <!--需暴露，类似es6暴露引入html文件中。-->
    module.exports = {
        number:number,
        _toFixed:_toFixed,
        wxsclick:wxsclick
    }
</wxs>	
<view wx:for="{{ goods }}">
id:{{ item.id }}--name:{{ item.name }}--price:{{ m1._toFixed(item.price,2) }}
</view>

wxs 文件

创建wxs脚本文件

// 引入其他wxs文件
var common1 = require("./common1.wxs");
// 直接写模块即可
var num = 1000;

module.exports = {
   num:num,
   a:common1.a
}

使用

<!-- 引入外部的wxs文件 -->
<wxs src="../../common/wxs/common.wxs" module="m2"></wxs>
<view>num:{{ m2.num }}</view>
<view>a:{{ m2.a }}</view>

<!-- 调用wxs中的函数，添加事件 -->
<button data-index="100" type="primary" bindtap="{{ m1.wxsclick }}">wxsclick</button>

wxs脚本注意事项

(1)WXS 不依赖于运行时的基础库版本，可以在所有版本的小程序中运行。
(2)WXS 与 JavaScript 是不同的语言，有自己的语法，并不和 JavaScript 一致,在 `wxs`中不要使用高级的`JS`语法;
(3)WXS 的运行环境和其他 JavaScript 代码是隔离的，WXS 中不能调用其他 JavaScript 文件中定义的函数，也不能调用小程序提供的API。
(4)WXS 函数不能作为组件的事件回调。
(5)由于运行环境的差异，在 iOS 设备上小程序内的 WXS 会比 JavaScript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。

视图容器组件

swiper/swiper-item滑块视图容器

<!-- 
    swiper 滑块视图容器
        直接子元素： swiper-item，默认撑满整个swiper
 -->
 <swiper class="swiper"
    indicator-dots="{{ true }}"
    indicator-color="#000"
    indicator-active-color="#fff"
    autoplay="{{ true }}"
    interval="1000"
    circular="{{ true }}"
    vertical="{{ true }}"
    display-multiple-items="2"
 >
    <swiper-item wx:for="{{ [1,2,3] }}">
        <image src="../../static/{{ item }}.jpg"></image>
    </swiper-item>
 </swiper> 

指示点封装

wxml

<view class="container">
    <swiper bindchange="change" class="swiper" autoplay="{{ true }}" interval="1000" circular="{{ true }}">
        <swiper-item wx:for="{{ [1,2,3] }}">
            <image src="../../static/{{ item }}.jpg"></image>
        </swiper-item>
    </swiper>
    <view class="dots">
        <text class="{{ activeIndex == index ? 'active' :'' }}" wx:for="{{ [1,2,3] }}"></text>
    </view>
</view>

js

Page({
    /**
     * 页面的初始数据
     */
    data: {
        activeIndex:0,
    },

    change(e){
        // console.log(e)
        var activeIndex = e.detail.current;
        this.setData({
            activeIndex
        })
    }
})

scroll-view可滚动视图区域

wxml

<!-- 
    scroll-view  滚动的视图容器
    1.竖向滚动
        （1）scroll-y为true
        (2)给scroll-view 加固定高度
    2.横向滚动：
        (1)设置scroll-x为true
        (2)使子元素横向排列，不能换行
 -->
<view class="box">
<!-- 左侧一级分类 -->
    <scroll-view scroll-y="{{ true }}" class="left">
        <view wx:for="{{ types }}" bindtap="click" data-index="{{ index }}">
            {{ item.typename }}
        </view>
    </scroll-view>
    <!-- 右侧二级分类 -->
    <scroll-view scroll-y="{{ true }}" class="right" scroll-into-view="id{{ activeIndex }}">
        <view id="id{{ index }}" wx:for="{{ types }}" wx:for-item="val" class="list">
            <view>{{ val.typename }}</view>
            <view>
                <!-- 二级分类 -->
                <view wx:for="{{ val.children }}" wx:for-item="child">
                    {{ child.typename }}
                </view>
            </view>
        </view>
    </scroll-view>
</view>

原生组件native-component

覆盖的原生组件包括 map、video、canvas、camera、live-player、live-pusher

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

wxml：

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

wxml

课后作业

1基础作业
(1)当天课上代码至少练习1遍
(2)根据模板语法、事件传参、data数据 更新进行案例编写，完成基础作业2封装加载更多模板案例效果

2拓展作业
  (1)根据模板语法、模板引入、模板传参，列表渲染完成购物车静态页面编写，参考基础作业3动态图效果，完成对应的效果
参考知识点：
模板定义、模板引入、使用
  (2)在作业1的基础上，通过wxs模块给价格保留两位小数，实现数量的++、--和删除操作。
参考拓展作业1动态图效果，完成对应的效果