微信小程序学习(三)

转载请注明出处:https://blog.csdn.net/Strugglein/article/details/81051576
今天带来小程序第三节的学习内容,今天主要学习目标是:

1.小程序开发框架
2.wxml的数据绑定
3.wxml的运算符绑定
4.wxml的列表渲染
5.wxml的条件渲染
6.wxml的模板引用
7.wxml的文件引用

---

1.小程序开发框架的基本构成

小程序开发框架主要是由4个部分组成,分别是 wxml,wxss,js,wxs,

wxs
wxs是一种对wxml增强的一种脚本语言,可以将请求到的数据进行一个filter或者计算处理,帮助我们的wxml快速构建页面结构

wxml
wxml是小程序设计的一套标签语言,以标签的形式结合组件,wxs和事件,构建出页面的基本内容,

wxml的基本语法为:


<标签名 属性名="属性名1" 属性名 ="属性名2" ...>
    ...

一个标准的wxml语句是由一段开始标签和一段结束标签组成,开始标签和结束标签直接可以是一段文本内容也可以是一些其他的wxml语句,也可以在开始标签中传入一些属性来控制我们的wxml标签,传入属性的方式是通过属性名=属性值的方式传入的

示例

这里需要注意的两点是:

1.wxml标签严格闭合
2.wxml的属性大小写敏感

2.wxml的数据绑定

话不多说直接先来波demo

在小程序里我们通过wxml的数据绑定功能来实现数据动态更新,
wxml中数据的动态绑定是来自我们js文件中Page中的data对象,
数据绑定我们使用的是一个Mustache语法来实现,也就是双括号把变量名包起来,
wxml的数据绑定有很多的方式,我们先列举一种最简单的方式,

我们不仅可以动态绑定数据的内容,我们也可以动态绑定我们的属性的内容

这样就对属性进行了动态的绑定

注意:我们所有的组件和属性名都一定要小写

3.wxml的运算符绑定

除了之前的简单绑定之外我们还可以进行一些运算符绑定

我们可以使用一些字符串的运算符绑定,组合式绑定,扩展运算符的绑定

hidden属性:
隐藏或显示标签内容

在小程序中的标签都有哪些共同的属性:

4.wxml的列表渲染

老规矩话不多说先上代码

index:
当前元素在数组中的下标
wx:for-item:
数组中当前元素
wx:key:
唯一标示符
wx:for:
需要遍历的数组

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

5.wxml的条件渲染

老规矩~

Math.random():
生成0-1浮点随机数
Math.floor:
对浮点数处理,返回下取整的整数

对于条件渲染来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。
因此，如果需要频繁切换的情景下，用 hidden更好，
如果在运行时条件不大可能改变则 wx:if 较好。

6.wxml的模板引用

is:
声明我们需要的是哪个模板,is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
data:
data属性传入我们需要的数据信息
注意:
模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 模块。

7.wxml的文件引用

主要有两种文件引用的方式一种是import,一种是include
import

这里在index.wxml种引用的模板是来自a.wxml中设定的模板,只能引用src,避免死循环
import 有作用域的概念，即只会 import 目标文件中定义的 template，
如：C import B，B importA，在C中可以使用B定义的template，在B中可以使用A定义的template
但是C不能使用A定义的template。

include

include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置
也就是除了模板文件都拷贝过来

这一章更新的比较晚了,前一阵子比较忙也比较累,这一章主要就是介绍了wxml的一些东西,还是如果有哪里不对的地方还忘大家多多提点,写这篇博的目的主要就是为了方便自己以后的一个回忆和朋友学习时的一个参考,希望为大家可以带来帮助 ~ ~&

虚心的去学习,自信的去工作~