小声讨论微信小程序中的WXML文件(杂谈语法)

花弟弟的瞎理解:

微信出了一个小程序后退出WXML标签语言,结合组件,还有事件就能构建出页面的逻辑结构,分别有数据绑定,列表渲染,条件渲染,模板的引用,WXML语法的布局方式根HTML是一样的,一些模板语法和Django、Vue的模板语法很相似,另外就是渲染就类似输出,别像我模糊了好久,大家感兴趣的话一定要去看微信的公共官方文档。

瞎搞:

1).变量渲染(输出):

  • 必须使用花括号{{}}包括
  • 花括号{{}}可以做简单的四则运算及判断等
  • 需要从js文件传来的变量就必须花括号

2).数据绑定:

微信WXML中的动态数据是来自Page页面中的js文件date域里面:

3).列表渲染:(数组集合)

注意:

  • item好比如元素所对应的指针可以自己重命名
  • 一定要定义很重要的动态数据属性key

3.列表渲染中item与index(索引值)和key的理解:

<view wx:for="{{[1,2,3,4]}}" wx:for-index='idx' wx:for-item="value" wx:key="this">

    {{idx}}/{{value}}

</view>

注意:

  • item是集合中的元素的指针
  • index是集合中元素对应的下标
  • 多重循环要自定义名称(如上)

Key:如果列表中项目的位置会动态改变或者有新的项目添加到列表中,让原来的人记住自己的状态的参数,它就相当于数据库领域中的主码,唯一确定一行的属性,当数据动态的更新之后,若存在key时,原有的对象只是调换顺序,若不存在key时,则这些对象会重新的建立,打个比方,一个房间里有排队着几个人,手里拿着灯,第一个人手里的灯是亮的,当有key时有人加入房间里来,灯亮的还是刚刚那个人,当没有key时,就是刚刚进来排第一个的灯会亮,也就是说有key时,每个对象就会记得自己的状态。

4.模板的定义引用:

  • 模板的定义
<template name="message">//模板的名称

    <view class="messsge-group">//class就相当于这个对象的名称

        <text class="content">满目山河空望也 不如怜取眼前人</text>

        <text class="person">-东邪西毒</text>

    </view>

</template>
  • 模板的引用
<import src="../templates/templates.wxml"/>

<template is ="message"></template>

注意:其中 ../ 代表返回所在地址的上一级,../../是上上一级。

话痨:

今天下好大的雨,躲在家里默默的总结最近学过的东西,同龄人几乎都去找兼职了,就我回家呆在家了,毕竟基础太差了,我太难了。

花哥哥严肃说:

所学的知识均从课本,课外读物,网上收集资料,如果哪有侵权惹到您不开心丫,此外还有我也是小白,如果哪有认识不对的地方还请您抽我一耳光说我哪错了,我一定会感谢,联系企鹅号:184820911,有哪不明白或没事都可以找我,陪聊,陪吃不陪睡。

发布了28 篇原创文章 · 获赞 34 · 访问量 6067

猜你喜欢

转载自blog.csdn.net/L184820911/article/details/96741603