首页 > 软件系统 > 小程序 > WXML、WXSS和WXS语法语法简介
2021
01-07

WXML、WXSS和WXS语法语法简介

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

框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。点击查看

组件是视图层的基本组成单元。
组件自带一些功能与微信风格一致的样式。
一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。
所有组件与属性都是小写。

所有组件都有以下属性

id:String,组件的唯一标示
class:String,组件的样式类,在对应的WXSS中定义的样式类
style:String,组件的内联样式
hidden:Boolean,组件是否显示
data-*:自定义属性,组件上触发的事件时,会发送给事件处理函数
bind* / catch*:组件的事件

数据绑定

WXML中的动态数据均来自对应Page.js的data

如现在有一个page.js文件内容如下
let global_data==getApp();
Page({
  data: {
    msg: global_data.data.msg,
    id:15,
    obj:{d:4,e:5},
    isok:true,
    a:1,
    b:2,
    c:3,
    name:'admin'
  }
})

<view> {{msg}} </view>
<view id="item-{{id}}"> </view>
<view wx:if="{{isok}}"> </view>
<checkbox checked="{{false}}"> </checkbox>
    使用关键字,不要直接写checked="false",其计算结果是一个字符串,转成boolean后为真值
<view hidden="{{flag ? true : false}}"> Hidden </view>:三元运算
<view> {{a + b}} + {{c}} + d </view>:算数运算,结果为"3 + 3 + d"
<view wx:if="{{c > 5}}"> </view>:逻辑判断
<view>{{"hello" + name}}</view>:字符串运算,结果为"hello admin"
<view wx:for="{{[1, 2, 3, 4, id]}}"> {{item}} </view>
    在双大括号中直接进行组合,构成数组或对象
    花括号和引号之间如果有空格,将最终被解析成为字符串
        <view wx:for="{{[1,2,3]}} ">或被解析为<view wx:for="{{[1,2,3] + ' '}}">
<template data="{{a,b,c,...obj,f:6}}"></template>
    构建对象中如果key和data中相同,可以省略值
    ...(三个点)表示把一个对象或数组展开
    上例中data属性的最终结果为{a:1,b:2,c:3,d:4,e:5,f:6}
    如果存在属性相同的情况,则后面的会覆盖前面

双向绑定

在WXML中,普通的属性的绑定是单向的,如在input组件中,用户修改了输入框里的值,却不会同时改变this.data.value

使用model:value属性双向绑定

<input model:value="{{value}}" />
这样,如果输入框的值被改变了,this.data.value也会同时改变。同时, WXML中所有绑定了value的位置也会被一同更新,数据监听器也会被正常触发

列表渲染

在组件上使用wx:for属性绑定一个数组,使用数组中每个数据渲染该组件。 默认数组的当前项的下标变量名默认为index,数组当前元素的变量名默认为item

<view wx:for="{{array}}">{{index}}: {{item}}</view>

使用wx:for-index指定数组当前下标的变量名,使用wx:for-item指定数组当前元素的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName}}
</view>
当 wx:for 的值为字符串时,会将字符串解析成字符串数组
<view wx:for="array">{{item}}</view>等同于
<view wx:for="{{['a','r','r','a','y']}}">{{item}}</view>

如果列表中的项目位置会动态改变,并且列表中每项都有自己的状态(如每项复选框的选中状态),此时增加了一个项,那么选中状态会错误

WXML、WXSS和WXS语法语法简介 - 第1张  | 清河洛

保留每一项的状态可以使用wx:key指定一个唯一的值

1、当wx:for值为一个object组成的列表时使用一个具有唯一值的属性
    <switch wx:for="{{objectArray}}" wx:key="unique">{{item.id}}</switch>
    objectArray: [
      {id: 1, unique: 'unique_1'},
      {id: 2, unique: 'unique_2'}
    ]
    使用属性unique作为wx:key的值,属性unique的值必须是唯一的。
2、当wx:for值为一个字符串或数字组成的列表时使用*this关键字
    <switch wx:for="{{Array}}" wx:key="*this" >{{item}}</switch>
    Array: [1, 2]
    wx:for指定的数组中不能有重复值

WXML、WXSS和WXS语法语法简介 - 第2张  | 清河洛

条件渲染

wx:if、wx:elif、wx:else来判断需要渲染的代码块

<view wx:if="{{id > 5}}"> 1 </view>
<view wx:elif="{{id > 2}}"> 2 </view>
<view wx:else> 3 </view>

wx:if vs hidden属性
因为wx:if之中的模板也可能包含数据绑定,所以当wx:if的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的,如果在初始渲染条件为 false,框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

相比之下,hidden 就简单的多,组件始终会被渲染,只是简单的控制显示与隐藏。

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

模板

可以在模板(template)中定义代码片段,然后在不同的地方调用。

定义模板

使用name属性定义模板的名字

<template name="template_name">
    <view><text>{{index}}: {{msg}}</text></view>
    ...
</template>

使用模板
使用is属性指定需要使用的模板名称,然后将模板所需的数据使用data属性传入

<template is="msgItem" data="{{...item}}"/>

模板拥有自己的作用域,只能使用data传入的数据以及模板定义文件中定义的<wxs />模块

引用

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

import:可以使用目标文件定义的template

<import src="demo.wxml"/>
<template is="template_name" data="{{text: 'forbar'}}"/>

import有作用域的概念,只会import目标文件中定义的template,不会import目标文件import的template。

include:可以将目标文件除了<template/> <wxs/>外的整个代码引入,相当于是拷贝到include位置

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

WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。

WXSS具有CSS大部分特性,同时WXSS在CSS的基础上拓展了尺寸单位和样式导入

尺寸单位
rpx(responsive pixel):可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx。

    如iPhone6屏幕宽度为375px,则750rpx = 375px,1rpx = 0.5px
    iPhone6 Plus屏幕宽度为414px。侧750rpx = 414px,1rpx = 0.552px
    注意:在较小的屏幕上会有一些毛刺

样式导入
使用@import后跟导入的外联样式表的相对路径,用;表示语句结束。

    @import "demo.wxss";

目前支持的选择器有:.class、#id、tagName、some::after(在some后边插入内容)、some::before(在some前边插入内容)

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

1、WXS不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
2、WXS有自己的语法,并不和JavaScript一致。
3、WXS的运行环境和其他JavaScript代码是隔离的,WXS中不能调用其他JavaScript文件中定义的函数,也不能调用小程序提供的API。
4.WXS函数不能作为组件的事件回调。
5、在iOS设备上WXS比JavaScript快2~20倍。在android设备上无差异。

WXS可以直接写在<wxs>标签内,也可以写入wxs后缀文件内然后以src属性引入,必须使用module属性指定模块名称

    <wxs module="tools">
        module.exports.message = 'hello';
    </wxs>
    或者
    <wxs src="tools.wxs" module="tools" />

    <view> {{tools.message}} </view>

使用require函数引用其他wxs文件模块(只能引用.wxs文件模块,且必须使用相对路径)

    var tools = require("./tools.wxs");
    console.log(tools.message);

每一个<wxs>标签都是一个单独的模块,通过module属性定义模块名称。

每个模块都有自己独立的作用域。定义的变量与函数,默认为私有的。

每个wxs模块均有一个内置的module对象,通过module对象的exports属性可以对外暴露其内部的私有变量与函数。

wxs模块均为单例,wxs模块在第一次被引用时,会自动初始化为单例对象。多个页面,多个地方,多次引用,使用的都是同一个wxs模块对象。

如果一个wxs模块在定义之后,一直没有被引用,则该模块不会被解析与运行。

在js或wxs中我们可能会动态修改data中的值,直接修改是无法改变页面的状态的,还会造成数据不一致

setData(data,func)函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)

    data:object,要改变的数据,Object以key:value的形式表示,将data中的key对应的值改变成value
    func:setData引起的界面更新渲染完毕后的回调函数(非必需)
    仅支持设置可 JSON 化的数据。
    单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
    不要把data中任何一项的value设为undefined,否则这一项将不被设置并可能遗留一些潜在问题
    
    changeText: function() {
        // this.data.text = 'changed data' 错误,不要直接修改this.data
        this.setData({
            text: 'changed data'
        })
    },

 

 

最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。