微信小程序模板<template>的使用
1、通过创建一个template的wxml 来写一个模板name是引用一个模板的入口 如在另一个wxml<import/>引入之后通过调用模板is=name 就可以找到某个模板
2、模板的数据变化 模板内设置数据的时候如<text>{{age}}</text>此时别处调用模板的地方<template is=name data=“{{age:26}}”/> data对象的key值必须是模板内的age 不然不会生效。
3.模板内也可以添加样式
在写模板的wxss中写入模板的样式,然后调用模板的页面的wxss引用@import “../template/template.wxss”,然后把模板写入wxml中样式也会生效了。
1、先建立一个文件用来写模板用
![](https://img.haomeiwen.com/i1392244/d07e9dfc2d8b5e4f)
先建立一个文件用来写模板用
2、写下一个模板
![](https://img.haomeiwen.com/i1392244/03ef507883def6af)
写下一个模板
3、写下模板的css样式
![](https://img.haomeiwen.com/i1392244/fd4578de92f71a77)
写下模板的css样式
4、在test页面wxml中引用模板
![](https://img.haomeiwen.com/i1392244/538c5e1c13c1534c)
在test页面wxml中引用模板
5、在test页面wxss引用模板样式
![](https://img.haomeiwen.com/i1392244/1600554f94eeb4d1)
在test页面wxss引用模板样式
6、可以把你想填充的数据写成model放在test的js文件中
![](https://img.haomeiwen.com/i1392244/c6462dad51e842ca)
可以把你想填充的数据写成model放在test的js文件中
7、预览结果
![](https://img.haomeiwen.com/i1392244/121b09debc7b1baf)
预览结果
8、补充:引用模板的时候可以在is="{{条件?模板名字1:模板名字2}}"用条件判断来使用不同的模板
本文标题:微信小程序模板<template>的使用
本文链接:https://www.haomeiwen.com/subject/dcogjftx.html
网友评论