微信小程序开发---视图层(View)

WXML

WXML能力:

  • 数据绑定
  • 列表渲染
  • 条件渲染
  • 模板
  • 事件

数据绑定

  数据绑定使用 Mustache 语法(双大括号)将变量包起来,可作用于内容,组件属性(需要在双引号之内),控制属性(需要在双引号之内),关键字(需要在双引号之内),运算,逻辑判断,字符串运算,数据路径运算,组合,数组,对象。

  详细内容见:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/data.html

列表渲染

wx:for

 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。

wx:key

  如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input> 中的输入内容,<switch>的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供

  1. 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  2. 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字,如:

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

详细见:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/list.html

条件渲染

  • 使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块
  • 用 wx:elif 和 wx:else 来添加一个 else 块

  • 如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

  • wx:if 在隐藏的时候不渲染,而 hidden 在隐藏时仍然渲染,只是不呈现。

详细见: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/conditional.html

模板

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

  • 使用name属性作为模板名字
  • 使用is属性,声明需要的使用的模板,然后将模板所需要的data传入

详细见:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

**事件**

  不再赘述,详细见:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

  冒泡事件与非冒泡事件区别:是否向父节点传递,也就是说子节点触发事件,父节点也能接收的是冒泡事件

  事件绑定和冒泡:bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

引用

  通过import和include来引用文件。注意作用域。

  • C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template
  • include 可以将目标文件除了 <template/><wxs/> 外的整个代码引入,相当于是拷贝到 include 位置

详细见:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html

WXSS

WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。与 CSS 相比,WXSS 扩展的特性有:尺寸单位,样式导入

详细见:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html

WXS

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

注意

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

详细见:https://www.w3cschool.cn/weixinapp/weixinapp-t71j2czl.html

原文地址:https://www.cnblogs.com/cc-xiao5/p/10071048.html