福州网站建设仅需1000元起包含域名空间,详情18558752805

  • 微信小程序template模板

福州网站建设 >网站新闻 >微信小程序 >
一. template模板:
1. 模板创建:
建议单独创建template目录,在template目录中创建管理模板文件。
由于模板只有wxml、wxss文件,而且小程序开发工具并不支持快速创建模板,因此就需要直接创建wxml、wxss文件了,一个template的模板文件和样式文件只需要命名相同即可。如果模板较多,建议在template目录下再创建子目录,存放单独的模板。


 
2. 模板文件:
template.wxml文件中能写多个模板,用name区分:
复制代码
1 <template name="demo"> 2 <view class='tempDemo'> 3 <text class='name'>FirstName: {{firstName}}, LastName: {{lastName}}</text> 4 <text class='fr' bindtap="clickMe" data-name="{{'Hello! I am '+firstName+' '+LastName+'!'}}"> clcikMe </text> 5 </view> 6 </template>
复制代码
3. 样式文件:


模板拥有自己的样式文件(用户自定义)。


1 /* templates/demo/index.wxss */ 2 .tempDemo{ 3  width:100%; 4 } 5 view.tempDemo .name{color:darkorange}
4. 页面引用:


page.wxml


复制代码
1 <!--导入模板--> 2 <import src="../../templates/demo/index.wxml" /> 3 <!--嵌入模板--> 4 <view> 5 <text>嵌入模板</text> 6 <template is="demo" data="{{...staffA}}"></template><!--传入参数,必须是对象--> 7 <template is="demo" data="{{...staffB}}"></template><!--传入参数,必须是对象--> 8 <template is="demo" data="{{...staffC}}"></template><!--传入参数,必须是对象--> 9 </view>
复制代码
page.wxss


1 @import "../../templates/demo/index.wxss" /*引入template样式*/
page.js


复制代码
 1 Page({  2 /**  3  * 页面的初始数据  4 */  5  data: {  6 staffA: { firstName: 'Hulk', lastName: 'Hu' },  7 staffB: { firstName: 'Shang', lastName: 'You' },  8 staffC: { firstName: 'Gideon', lastName: 'Lin' }  9  }, 10  clickMe(e) { 11 wx.showToast({ title: e.currentTarget.dataset.name, icon: "none", duration: 100000 }) 12  } 13  ...... 14 })
复制代码
备注:


一个模板文件中可以有多个template,每个template均需定义name进行区分,页面调用的时候也是以name指向对应的template;


template模板没有配置文件(.json)和业务逻辑文件(.js),所以template模板中的变量引用和业务逻辑事件都需要在引用页面的js文件中进行定义;


template模板支持独立样式,需要在引用页面的样式文件中进行导入;


页面应用template模板需要先导入模板 <import src="../../templates/demo/index.wxml" /> ,然后再嵌入模板 <template is="demo" data="{{...staffA}}"></template> 
扫描二维码分享到微信
确 认

Copyright © 2014-2019  www.xl779.com福州网站制作 福州网站建设尽在福州E点互动 版权所有