E企盈营销工具技术服务商 热线:4006-838-530

微信小程序开发模板(template)使用,数据加载,点击交互

E企盈直播平台营销卖货系统

微信小程序视图层提供了 模板(template),可以在模板中定义代码片段,然后在不同的地方调用。结果在数据渲染那懵逼了。按照官网上对模板的说明和对数据的加载。1、定义模板  使用name属性,作为模板的名字。然后在template/内定义代码片段,如:!–  index: int  msg: string  time: string–template name=”msgItem”  //此处的name 有ID的意味,便于其他页面加载该模板时使用和查找  view    text {{index}}: {{msg}} /text    text Time: {{time}} /text  /view/template2、使用模板  先将模板的wxml文件和wxss文件路劲链接 导入到需要使用模板的wxml文件和wxss文件内,然后在需要导入模板的wxml文件内使用 is属性,声明需要的使用的模板,然后将模板所需要的data传入,如:import src=”../template/msgItem/msgItem.wxml”/    template is=”msgItem” data=”{{…item}}”/  !–{{…item}}  …是将数据展开,即这样将数据传输到模板时,实际上是将item按键值对展开–Page({    data: {        item: {            index: 0,            msg: ‘this is a template’,            time: ‘2016-09-15’        }    }});@import “../template/msgItem/msgItem.wxss”;  is属性 可以使用Mustache语法,来动态决定具体需要渲染哪个模板:template name=”odd”  view odd /view/templatetemplate name=”even”  view even /view/templateblock wx:for=”{{[1, 2, 3, 4, 5]}}”    template is=”{{item % 2 == 0 ? ‘even’ : ‘odd’}}”//block3、模板数据传入  在页面的 template 标签中将模板所需要的data传入,如:!–展开:–template is=”lookRecord”  data=”{{…followRecords}}”/  展开:传入的数据已经按键值对模式被一一展开,直接通过对象的属性就能获取对象中的值,这点跟VUE的模板使用差不多。但如果模板中存在 wx:for=”{{followRecords}}” 运用,即传入的对象中某个属性的值是一个数组Array,系统则会报渲染结构错误,找不到属性。,这时这种展开式传值就不行了。   那就采用不展开的形式。不展开:传入的数据在模板中按照属性一对一调用的方式获取数据,如:!–不展开:–template is=”lookRecord”  data=”{{lookRecord}}”/view class=”information-feedback-area” wx:for=”{{lookRecord.feedbackBasicInfor}}” wx:for-index=”index” wx:for-item=”indexData”    view class=”information-feedback-options”        view class=”information-feedback-item”            text class=”information-options-title”{{indexData[0].option}}/text            image class=”information-options-image” src=”{{indexData[0].icon}}”/image        /view    /view    view class=”information-feedback-options”        view class=”information-feedback-item”            text class=”information-options-title”{{indexData[1].option}}/text            image class=”information-options-image” src=”{{indexData[1].icon}}”/image        /view    /view/view4、模板点击交互  在理清楚数据的获取和渲染后,模板中绑定事件,实现正常交互,就是最后的问题了。由于模板(template)没有自己的JS文件,所以模板的交互功能方法都是写在引用该模板的页面的JS控制模块内。如:  我在 detailedInformation 页面调用了 basicInformation模板,那么 模板basicInformation 内的所有交互功能都是写在detailedInformation.js内的。下面定义事件,如://detailedInformation.jstemplateInteraction: function () {    var tampData = this.data.item;    tampData.clickAction = “nodeOperation “;    this.setData({item: tampData})},nodeOperation: function () {    console.log(“模板交互功能方法执行!”)},  然后在模板中绑定该事件,如:template is=”basicInformation” data=”{{item}}”/templatetemplate name=”basicInformation”    view class=”information-container”        view class=”information-text-area”            view style=”float: left;width: 19%”                text class=”information-text-title”电rtrtrtrtrtrt话1:/text            /view            view style=”float: left;width: 81%”                text class=”information-text-info” value=”{{basicInformation.pho1}}”{{basicInformation.phone1}}/text                image class=”information-text-image” src=”{{phone}}” id=”{{basicInformation.pho1}}”                       bindtap=”{{item.clickAction}}”/image            /view        /view        view class=”information-text-area”            view style=”float: left;width: 19%”                text class=”information-text-title”电rtrtrtrrtrt话2:/text            /view            view style=”float: left;width: 81%”                text class=”information-text-info” value=”{{basicInformation.pho2}}”{{basicInformation.phone2}}/text                image class=”information-text-image” src=”{{phone}}” id=”{{basicInformation.pho2}}”                       bindtap=”{{item.clickAction}}”/image            /view        /view    /view/template  这样点击模板中的具体元素就可以调用该方法了。虽然这样可以调用事件方法,但是仅适用于结构简单,且是循环出来的节点(因为基本功能都一样,操作也基本相同)。但对于结构复杂,功能需求不同的节点则不能适用。这个时候就只能具体节点具体功能具体定义事件了。  当然绝大部分模板的交互功能都不多,既然都在用模板了,那么肯定是以数据展示为主,没事去操作它干嘛。包含大量操作和交互功能的直接写页面,谁还整模板,自己坑自己么。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序开发模板(template)使用,数据加载,点击交互
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏