• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

微信小程序开发5-WXML

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

1.HTML元素是构建网页的一种单位,是由HTML标签和HTML属性组成的,HTML元素也是网页中的一种基本单位。HTML与其他标记语言一样,HTML的关键,是标签(tag)。HTML标签是HTML语言中最基本的单位,HTML标签是HTML语言最重要的组成部分。标签是经过编码的符号,用于区分和分隔内容的不同部分,并告知浏览器它处理的是什么类型的内容。大多数HTML标签的名字都准确地描述了它们的用途和它们所标注的内容的类型,如标题、段落、列表、图像等。

2.HTML的标签包括在一对尖括号(<>)之间,以便将它们与普通文本区分开来。第一个尖括号(<)标明了标签的开头,随后是特定的标签名(tag name),最后以一个反向的尖括号(>)结束。例如下面是一个表示段落的开头的HTML标签:

<p>

在HTML中,标签名是大小写不敏感的,就是说不区分大小写,但在WXML中的属性是大小写 敏感的。也就是说 {{name}} 和 {{Name}} 是两个不同的变量。

3.大多数标签配对使用:一个开标签[(opening tag),也叫开始标签、起始标签(start tag)],用于表明一个内容片段的开始,还有一个闭标签[closing tag,也叫结束标签、结尾标签、终止(end tag)],用于表明其结束。例如段落的开始用开标签<p>表示,其结尾标签用</p>表示。闭标签中第一个尖括号后的斜线(/)将它与开标签区分开。一个完整的段落标记如下:

<p>Hello, World!</p>

4.没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中。

5.通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在 {{ }} 内进行简单的逻辑运算。

       三元运算

       算数运算

       字符串拼接

<!--
{ name: 'world' }
-->


<view>{{"hello " + name}}</view>


<!-- 输出 hello world -->

6.WXML 中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块(条件逻辑): 

<view wx:if="{{condition}}"> True </view>

7.使用 wx:for-item 指定数组当前元素的变量名,使用 wx:for-index 指定数组当前下标的变量名

8.<block/> 并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

  1. 因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
        <block wx:if="{{true}}">
             <view> view1 </view>
            <view> view2 </view>
        </block>

         2.类似 block wx:if,也可以将 wx:for 用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

    <block wx:for="{{[1, 2, 3]}}">
    <view> {{index}}: </view>
     <view> {{item}} </view>

</block>

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

需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。

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

10.所有wxml 标签都支持的属性称之为共同属性

属性名 类型 描述 注解
id String 组件的唯一标识 整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind*/catch* EventHandler 组件的事件

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
微信小程序开发之页面数据绑定发布时间:2022-07-18
下一篇:
微信小程序调后台接口发布时间:2022-07-18
热门推荐
    热门话题
    阅读排行榜

    扫描微信二维码

    查看手机版网站

    随时了解更新最新资讯

    139-2527-9053

    在线客服(服务时间 9:00~18:00)

    在线QQ客服
    地址:深圳市南山区西丽大学城创智工业园
    电邮:jeky_zhao#qq.com
    移动电话:139-2527-9053

    Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap