模板

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

常用的界面可以定义成一个模板,在需要的地方你可以重复使用它 .. 这里我们先清理一下 ...

比如这个页面标题 .. 需要一个 view 组件,里面包装了一个 text 组件 .. 这个组件上面绑定了一个 class,还有要显示的文字 ..

我们可以把它定义成一个模板 .. 先去新建一个模板文件 .. 放在 pages 下面, 添加一个新的目录,名字可以是 templates .. 模板文件的名字是 header.wxml

定义一个模板先用一组 template ,上面加上一个 name 属性设置一下模板的名字 .. 比如 header ..

这个 template 里面包装的东西就是模板的具体内容 .. 这里我需要一个 view 组件,里面包装一个 text 组件 .. 这个组件上添加一个 class 属性,然后绑定一个数据 .. 名字是 class

再绑定一个文字内容 .. 数据的名字是 content ...

这样就定义好了一个模板 .. 在使用这个模板的时候,你要给模板提供在模板里面绑定的这些数据 ..

比如在这个 wxml 页面的视图文件里,我们用一下刚才定义的模板 .. 这里需要先导入模板文件 ... 用一个 import .. 在 src 里面指定一下模板文件的位置 .. 是在上一级目录里的 templates 下面,名字是 header.wxml

在用一下这个文件里定义的 header 这个模板 ..

去掉这块内容 ... 换成一个 template .. 添加一个 is 属性,指定一下要使用的模板的名字 .. 这里就是 header .. 然后添加一个 data 属性,在这里你要设置一下模板里面需要的数据 .. 这些数据正好在页面 data 的 header 里面 .. 用一个扩展操作符 ... 把 header 数据里的东西扩展出来,放到这个模板的 data 里面 ..

保存 ..

页面上仍然会显示一个标题 .. 现在这块界面的结构来自我们定义的一个模板 ...

在其它的地方,我们可以重复的使用这个模板 ..

0:00
0:00
2:23
0:00
3:54
0:00
1:46

模板《 微信小程序:视图 》

统计

15260
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点