福运通网络营销与深圳SEO优化第一品牌

专为中小企业提供网络营销服务
最新资讯

CTT团队实战教程系列《二》小安娜B站系列:wxml和wxss文件

    Time: 2020-08-01来源:福运通

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

(小安娜:好像很厉害的样子,那基础组件、事件系统是什么?感觉更厉害,因为必须结合它们。),基础组件类似HTML中的标签,事件系统是JavaScript中的事件,可处理逻辑反应到界面上;wxml只是一个文件格式,如果没有组件和事件它没任何用处,又如果把组件、事件写在txt文档里面也没任何用处,所以没有谁更厉害,相辅相成的关系。(小安娜:嗦嘎,就好像ap、ad、adc的关系,一起才最强)

用以下一些简单的例子来看看 WXML 具有什么能力:数据绑定

 

WXML 中的动态数据均来自对应** Page 的 data 对象**。简单绑定

 

数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于以下:

(小安娜:等等,有没有点诚意,Mustache是什么都不知道!),Mustache是基于JavaScript实现的模板解析引擎,等等...总之它非常方便和好用。(小安娜:我去,你自己也不知道是什么吧)
内容

 

<view> {{ message }} </view>

Page({ data: { message: 'Hello MINA!' } })

显示结果:

(小安娜:<view>代表什么意思,记得HTML中没这样的标签啊?),这就是基础组件,view组件代表视图容器,可以理解成HTML中的DIV标签。组件属性(需要在双引号之内)

 

<view id="item-{{id}}">id="item-{{id}}"</view>

Page({ data: { id: 0 } })

显示结果:


控制属性(需要在双引号之内)

 

<view wx:if="{{condition}}">你看得见我吗?</view>

Page({ data: { condition: true } })

显示结果:

(小安娜:我刚刚试了,condition改成false就看不见我了!),是的,改成false就表示条件为假,view组件里面的内容就不会显示了。(小安娜:哦明白了,虽然我不想看见你,为了学好小程序还是改成true吧)关键字(需要在双引号之内)

 

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}" />默认没选中

特别注意:不要直接写 checked="false",这时候"false"是一个字符串,(JavaScript中非0为真、非空位真)转成boolean类型后代表真值。

(小安娜:那这个checkbox是不是和HTML的复选框一样?),没错啦,但checkbox组件更团结,更多是以组的概念存在,例如我们都会用checkbox-group包括起所有同类型的checkbox组件,后面用到自然会明白了。(小安娜:啊啊抓狂了,又多了个checkbox-group,感觉没耐心学了),可别这样想,基础都是乏味的,可是带你飞之前要先带你走,下篇文章我们做案例就会感觉很有意思了。(小安娜:知道啦,那我可以直接看下一篇不^_^),继续...

所以显示结果:

深圳SEO:http://www.tianying888.com

关键词:团队,实战,教程,系列,安娜,wxml,wxss,文件