微信小程序视图层

微信小程序框架的视图层由WXML与WXSS编写，由组件来进行展示，将逻辑层的数据反应成视图，同时将视图层的时间发送给逻辑层
WXML:用于描述页面的结构
WXS：小程序的一套脚本语言，结合WXML，可以构建出页面的结构
WXSS：用于描述页面的样式
组件（Component）是视图的基本组成单元

1.WXML语法

1.WXML概述

WXML（Weixin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构，功能类似于html，wxml语法包含数据绑定、列表渲染、条件渲染、模板和引用

2.数据绑定

WXML中的动态数据均来自对应Page的data，通过{{}}语法在对应的，wxml页面解析输出即可
页面第一次渲染需要的业务数据，当页面加载的时候，data会以json字符串的形式将数据从逻辑层传递到视图层

使用语法

<!--组件内容绑定-->
<view>{{str}}</view>
<!--属性id 引号和花括号之间不能有空格-->
<view id="{{id}}"></view>
<!--布尔值类型-->
<view hidden="{{true}}"></view>
<!--运算++ -- 三元运算 数据路径运算-->
<view>{{age>18? '成年':'未成年'}}</view>

data: {
	str : 'hello',
	id: "active"，
    age: 20
}

引号和花括号之间不要有空格

如果属性的值是bool类型，注意bool类型一定嵌套在{{}}

在组件上不管是属性的值还是内容只要是变量一定要嵌套在{{}}

3.列表渲染wx:for

在组件上使用‘wx：for’控制属性绑定一个数组，即可使用数组中各项数据重复渲染该组件

默认数组的当前项的下表变量名默认为’index’,宿主当前项的变量默认为‘item’

使用语法

wx:for 默认下标名:index  默认值：item 修改下标名：wx:for-index 修改item值名:wx:for-item
<view wx:for="{{array}}" wx:for-index="i" wx:for-item="m">
	下标是{{i}}
    值是{{m}}
</view>
<view wx;for="{{user}}">
	下标是: {{user.id}}
    值是：{{user.name}}
</view>

data: {
    array:['zhangsan','lisi','wangwu'],
    user: [{id:1,name:'zhangsan'},{id:2,name:'lisi'}，{id:3,name:'wangwu'}]
}

使用注意： 引号和花括号之间不能有空

wx:key

作用：

当数据改变触发渲染层重新渲染的时候，会校正带有key的组件，框架会确保它们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率

定义key：

如果列表是静态的可以定义key

字符串，代表在for循环的array中item的某个property，该property的值是列表中唯一的字符串或数字，且不能动态改变。（数据的id）

保留关键字 *this代表在for循环中的item本身，这种表示需要item本身是一个唯一的字符串或者数字

<view wx:for="{{array}}" wx:for-index="i" wx:for-item="m" wx:key="*this">   
    下标是{{i}}    值是{{m}}</view>
<view wx;for="{{user}}" wx:key="id">   
    下标是: {{user.id}}  
    值是：{{user.name}}</view>

注意：key的添加不需要{{}}嵌套

4.条件渲染 wx:if

使用语法

wx:if wx:elif wx:else
<view wx:if="{{score>90}}">优秀</view>
<view wx:elif="{{score>70}}">良好</view>
<view wx:else>一般般</view>

if与hidden

wx:if:惰性的，如果在初次渲染条件为false，框架什么也不做，在条件第一次编程真的时候才开始局部渲染

相比直线，hidden，组件始终会被渲染，只是简单的控制显示与隐藏

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

block使用

block不会再页面输出显示，主要防止循环（wx:for）和判断(wx:if) hidden不能使用block

<view>
	<block wx:if="buffer">
    	用户登录:你好
    </block>
    <block wx;else>
    	用户未登录 
        <button>
        	请登录
        </button>
    </block>
</view>

5.模板

WXML提供模板（template），可以再模板中定义代码片段，然后再不同的地方调用，可以提高代码的复用率

定义模板

<template name="模板的名称">
	业务组件
</template>

使用模板

<template is="模板的名称" /></template>

模板传参：

data=""
<template is="模板的名称" data="param1,param2..."></template>

使用语法：

<!--定义模板-->
<templte name="demo1">
	<view>用户的姓名是:张三</view>
    <view>用户的年龄是:20</view>
</templte>
<!--使用模板-->
<template is="demo1">
</template>

<!--模板传参-->
<template name="demo2">
	<view>用户的姓名是{{user.name}}</view>
  <view>用户的年龄是:{{user.age}}</view>
</template>
<template is="demo2" data="{{user}}"></template>  <!-- user:{name:'zahngsan',age:20} -->

注意：模板本身是没有数据的，需要使用的页面进行传递（data）

模板本身没有样式，需要使用的页面进行设置

6.引用

WXML提供两种文件引用方式import和include

1.import

import引入目标文件中定义好的template

<import src="../demo2/wxml" />
<template is="demo2" data="{{...user}}"></template>

import作用域：

import有作用域的概念，即只会import目标文件中定义的template，而不会import目标文件import的template

2.include

include可以将目标文件除了和wxs模块外的整个代码引入，相当于是拷贝到include位置

<include src="文件路径" /></include>
<include src="../demo2.wxml" />

2.WXSS样式

1.新特性

单位：使用自适应单位rpx

可以根据品目宽度进行自适应 ，在iphon6上，屏幕宽度为375px（逻辑像素），则375px = 750rpx = 750物理像素，1px = 2rpx

2.全局样式/局部样式

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

全局样式 app.wxss

局部样式：page.wxss

使用公共样式思路

1.@import引入使用

2.将复用的公共样式写在app.wxss全局样式文件中

3.字体图标

微信小程序中使用字体图标有两种方式，一个是使用小程序中内置的icon组件，但是种类优先，另一种是使用第三方的资源，比如使用阿里的iconfont

在wxss引入iconfont.wxss字体样式文件

@import '../../iconfont.wxss'

在wxml页面使用

<text class="iconfont icon-shopcart" style="font-size:50px;color:red;"> </text>

3.事件系统

1.概念

事件就是视图层（wxml）到逻辑层（js）的通讯方式

2.事件绑定

<view bind|catch + '事件类型'='自定义事件名称(不能加小括号传参)'></view>
<view bindtap="one">bind绑定事件</view>
<view catchtap="two">catch绑定事件</view>

one() {
    console.log('bind')
}
two() {
	console.log('catch')
}

3.事件传参

传参：事件通过data-的方式进行传参

<view bindtap="three" data-name="张三" data-good-name="苹果" data-cateName="手机">事件传参</view>

<!--
	cateName  catename："手机"
	good-name goodName: "苹果"
	name      name:"张三"
-->

4.事件分类

<!--
冒泡：当一个组件上的事件被触发后，该事件会向父节点传递
冒泡条件：bind+冒泡事件

非冒泡：当一个组件上的事件被触发后，该事件不会向父节点传递
非冒泡条件Lcatch+任何事件（冒泡和非冒泡类型）

-->

<!--冒泡-->
<view bindtap="parent">
    我是父
    <view bindtap="son">我是子</view>
</view>

<!--非冒泡-->
<view catchtap="parent">
    我是父
    <view catchtap="son">我是子</view>
</view>

son() {
    console.log('son')
}
parent(e) {
    console.log('parent')
}

5.事件对象

1.target:触发事件的源头

2.currentTarget:绑定事件的组件本身

<view bindtap="parent" data-name="zhangsan">
我是父亲
    <view>我是孩子</view>
</view>

parent(e) {
    console.log(e.target.dataset)
    console.log(e.cutentTarget.dataset)
}

6.关于页面赋值

1.如果页面需要同步更新数据需要使用 this.setDate({}) 注意每次setData大小限制为1M

2.如果页面不需要同步刷新数据就使用 this.data.变量 等方法直接修改值

<view>用户的姓名是:{{user.name}}</view>
<view>用户的年龄是:{{user.age}}</view>
<button bindtap="changeInfo">
    重置用户信息
</button>

data: {
    user: {
        name: 'zhangsan',
        age: 20
    }
}
changeInfo() {
    this.setData({
        user: {
            name: 'lisi',
            age: 21
    }
    })
}

4.WXS脚本语法

1.概述

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

WXS充当computed/filter这类功能，vue中有filter（过滤器），其核心作用都是以哦你过来比卖你重复的在模板内写过长复杂的表达式

2.wxs数据类型

WXS语言目前有以下8种数据类型

number数值类型、string字符串类型、boolean布尔类型、object对象类型、function函数类型、array数组类型、data日期类型、regexp正则

3.注意事项

WXS不依赖运行时的基础库版本，可以在所有版本的小程序中运行

WXS于JavaScript是不同的语言，有自己的语法，并不和JavaScript一致

WXS的运行环境和其他JavaScript代码是隔离的，WXS中不能调用其他JavaScript文件中定义的函数，也不能调用小程序提供的API

WXS函数不能作为组件的事件回调

由于运行环境的差异，在iOS设备上小程序内的WXS回避JavaScript代码快2-20倍，在android设备上二者运行效率无差异

注意wxs语法基本同js，但是不能使用es6中的高级语法，如let const 箭头函数 解构赋值，简写等

4.WXS模块语法

WXS代码可以编写在wxml文件中的标签内，或以.wxs为后缀的文件内

遵循CommonJS模块化贵伐

每个wxs都是独立的模块，每个哦快均有一个内置的module对象，每个模块都有自己独立的作用域

由于wxs拥有独立作用域，所以在一个模块里面定义的变量与函数，默认为私有的，对其他模块不可见，通过module.exports属性，可以对外共享本模块的私有变量与函数

在wxs模块中引入其他wxs文件模块，可以使用require函数

wxs标签使用语法

<wxs module="demo">
	var name = 'zhangsan'
    funciton myToFiex(price,num) {
    	consoe.log(price)
    	retrun price.toFiexd(num)
    }
    module.exports = {
    	myToFiex: myToFiex,
    	username: name
    }
</wxs>
<view>{{demo.username}}</view>
<view wx:for="{{list}}">
商品的名称是：{{item.name}} --- 单价是：{{demo.myToFiex(item.price,2)}}
</view>

wxs文件使用语法

function myToFiex(price,num) {
    return price.toFixed(num)
}
module.exports={
    myToFix: myToFiex
}

<wxs src="../fix.wxs" module="demo"></wxs>
<view wx:for="{{list}}">
	商品的名称是：{{item.name}} --- 单价是：{{demo.myToFiex(item.price,2)}}
</view>