全国服务热线:4008-888-888

公司新闻

手机微信微信小程序template模版

提议独立建立template文件目录,在template文件目录中建立管理方法模版文档。
因为模版仅有wxml、wxss文档,并且微信小程序开发设计专用工具其实不适用迅速建立模版,因而就必须立即建立wxml、wxss文档了,一个template的模版文档和款式文档只必须取名同样就可以。假如模版较多,提议在template文件目录下创下建根目录,储放独立的模版。
 
2. 模版文档:
template.wxml文档里能写好几个模版,用name区别:
拷贝编码
1 template name="demo" 2 view 3 text FirstName: {{firstName}}, LastName: {{lastName}} /text 4 text 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  


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服