欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-04-03 14:22浏览: 来源:网络 作者:cola

本文来自微信小程序联盟合作团队:CTT团队,团队地址:https://ctt.jieerf.com/

 

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!'
  }
})

显示结果:

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

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

 

<view id="item-{{id}}">id="item-{{id}}"</view>
Page({
  data: {
    id: 0
  }
})

显示结果:

CTT团队实战教程系列《二》小安娜B站系列:wxml和wxss文件(图2)
控制属性(需要在双引号之内)

 

<view wx:if="{{condition}}">你看得见我吗?</view>
Page({
  data: {
    condition: true
  }
})

显示结果:

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

(小安娜:我刚刚试了,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,感觉没耐心学了),可别这样想,基础都是乏味的,可是带你飞之前要先带你走,下篇文章我们做案例就会感觉很有意思了。(小安娜:知道啦,那我可以直接看下一篇不^_^),继续...

所以显示结果:

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






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。