WXML微信小程序开发框架
本文摘要
WXML(WeiXin Markup Language) 介绍:WXML是框架设计的一套标签语言,结合组件、WXS和事件系统,可以构建出页面的结构 2.语法:由开始标签和结束标签包裹我们的内容构成,熟悉前端开发的小伙伴肯定明白,WXML就相当于是HTML文件了 注:WXML的标签一定是闭合的,并且大小写敏感
-
WXML(WeiXin Markup Language)
- 介绍:WXML是框架设计的一套标签语言,结合组件、WXS和事件系统,可以构建出页面的结构
2.语法:由开始标签和结束标签包裹我们的内容构成,熟悉前端开发的小伙伴肯定明白,WXML就相当于是HTML文件了
注:WXML的标签一定是闭合的,并且大小写敏感
... 标签名>
如下就是一段WXML代码和展示效果:
< ="http://blog.jsudo.com/wp-content/uploads/2023/01/frc-603263a4a19e1e14c90c23f838f96d47.png">wxml.png
3.WXML特性
(1) 数据绑定
在WXML里通过数据绑定来实现页面数据的动态更新,如气象、股市等页面。WXML中的数据都来自js文件中Page的data对象,数据绑定我们使用Mustache的方法,也就是变量名加{{}}的语法把变量包起来。注意所有的组件和属性都要是小写
//index.wxml
{{message}}
//index.js
Page({
data:{
message:"hello world"
}
})
数据绑定还可以进行一些运算符绑定,如下:
//index.wxml
text
//index.js
Page({
data:{
flag:false
}
})
小程序的标签组件共有6中共同属性
(2) 列表渲染
在一些网购网站上某个品牌的所有商品要展示出来,当数量比较少的时候我们可以在wxml里一行一行的写,但是当商品数量比较多且不固定时就需要用到小程序的列表渲染的功能。如下:我们在js中定义一个items数组,通过wxml文件里的一个
注意:
//index.wxml
{{index}}:{{item.name}}
//index.js
Page({
data:{
items:[
{name:"商品1"},
{name:"商品2"},
{name:"商品3"},
{name:"商品4"},
]
}
})
(3) 条件渲染
当我们需要在不同的条件下展示不同的内容时就需要用到条件渲染,一般我们通过wx:if wx:elif wx:else这个属性来控制条件渲染。
//index.wxml
今天的晚餐
米饭
粥
面条
//index.js
Page({
data:{
//Math.random()是生成一个0-1的浮点随机数 Math.floor()是对浮点数进行处理,返回一个下取整的整数
//生成一个1-3的随机整数
condition : Math.floor(Math.random()*3 + 1)
}
})
(4) 模板引用
小程序支持在模板中定义自己的代码片段,然后在不同的地方调用或引入。在wxml里我们定义一个tempItem的模板,在标签里定义,name属性是模板名称。使用的时候通过is属性来声明我们使用的是哪个模板,data属性来传入我们想要的数据。模板有自己的作用域,我们只能通过data属性来传入。
//index.wxml
收件人:{{name}}
电话:{{phone}}
地址:{{address}}
//index.js
Page({
data:{
item:{}
name:"zhangsan"},
phone:"123456"},
address:"cShopfana"}
}
}
})
除了模板,wxml还提供了两种文件引入的方式:import和include。
import只能引用我们定义的模板文件里的模板内容。如下,在index.wxml里通过import的属性引入模板文件的路径a.wxml,通过声明template的is属性来声明使用的是哪个模板。在外部模板文件a.wxml里定义了view和template两个标签,结果渲染出来的只有a.wxml文件里template中的内容。所以说import引入的模板文件它的模板只能渲染它对应的模板内容。
hello world
Hello World
注意import的作用域,如果import的目标文件嵌套了其他文件的template模板,则嵌套的不会被应用。如index.wxml引入了a.wxml目标文件,而a.wxml文件中又引入了b.wxml文件内的模板。最终显示的只有a.wxml文件里的模板内容,而不会显示b.wxml的模板内容。这样可以避免引用模板死循环的问题,如果在a.wxml中引用b.wxml,在b.xwml中引用a.wxml文件,就会造成死循环。
TShopfas is a.wxml
TShopfas is b.wxml
include则是把目标文件内除了模板代码块之外的所有内容都引入进来。如下:在index.wxml文件里我们引入了a.wxml目标文件,a.wxml文件包含了一个name属性是a的template模板以及一个内容时hello world的view标签。最后经过include引入渲染的只有hello world,并没有显示template模板内容
tShopfas is a.wxml
Hello,world
相关文章
****更多行业产品开发方案,请关注 加速度JSUDO***
<以上资讯仅供参考,如果您需解决具体问题,建议您关注作者;如果有软件产品开发需求,可在线咨询加速度产品经理获取方案和报价>
加速度是一家专注于为企/事业单位的供应链提供数字化营销/服务的公司,产品线涵盖线上营销策划、商城开发、智慧园区、智能客服和企微SCRM系统,应用于营销推广-线上交易-销售管理-物流配送和服务支持等,致力于帮助企业开发更具投资价值的“数字”资产产品。










