【愚公系列】2022年02月微信小程序-template的使用.pdfVIP

【愚公系列】2022年02⽉微信⼩程序-template的使⽤ ⽂章⽬录 ⼀、template 的概念 template模板顾名思义就是页⾯的复⽤，前端可以理解成组件中通⽤页⾯的封装，后端可以理解成时函数的封装，主要的作⽤就是服⽤减少 代码冗余 ⽐如下⾯⼏个场景： ⾸页需要显⽰轮播，分类页⾯也需要显⽰轮播，详情页⾯也需要显⽰轮播。三个地⽅都是需要使⽤轮播，并且是同⼀个轮播。这时就可以使 ⽤template 了 把轮播的代码提取出来放⼊模板标签中 在多个页⾯引⽤这个模板 ，把重复的xwml 提取出来重复使⽤ 减少代码冗余。 ⼆、template 模板的使⽤ 1.定义模板 !-- index : int msg : string time : string -- template name=msgItem view text {{index}}: {{msg}} /text text Time : {{time}} /text /view /template 2.使⽤模板 template is=msgItem data={{...item}}/ Page({ data : { item : { index: 0, msg : this is a template, time : 2016-09-15 } } }) 3.is的⽤法 !-- 动态数据-- template name=tem_2 !-- 显⽰-- view wx:if={{mentor_image_uri==null}} !-- 默认图⽚地址-- image class=widget_arrow src=../../image/img1.jpg mode=aspectFill/image /view view wx:else image class=widget_arrow src={{mentor_image_uri}} mode=aspectFill/image /view view class=infospan姓名：/span{{mentor_name}}/view view class=infospan职位：/span{{career}}/view view class=infospan公司：/span{{company_name}}/view view class=infospan地区：/span{{address}}/view view class=infospan擅长：/span{{mentor_skills}}/view navigator详情/navigator view class=hr/view /template !-- 默认，不动态写⼊数据-- template name=tem_3 !-- 显⽰-- view wx:if={{mentor_image_uri==null}} !-- 默认图⽚地址-- image class=widget_arrow src=../../image/img1.jpg mode=aspectFill/image /view view wx:else image class=widget_arrow src=../../image/timg.jpg mode=aspectFill/image /view view class=infospan姓名：/spanlcy/view view class=infospan职位：/span程序员/view view class=infospan公司：/span未知/view view class=infospan地区：/span珠海/view view class=infospan擅长：/span爱笑/view navigator详情/navigator view class=hr/view /template !-- 引⼊模块-- import src=../index7/index.wxml / !-- is 属性可以使⽤ Mustache 语法，来动态决定具体需要渲染哪个模板-- block wx:for={{message2}} !-- 1==1是true ，所以使⽤tem_2模板-- templa