最新公告
  • 如遇下载失效问题,请联系在线客服,客服24小内为您解决!立即加入我们
  • 小程序中模板的使用方法-template模板

    小程序开发中,一个项目可能需要在多处页面使用类似的模块,则就可以使用模板,还可以减少代码量。

    小程序中组件化的实现有两种方式:template 模版和Component 组件。这两种方式分别适用于不同的场景。

    1. template模版:主要用于展示,模版中不涉及事件处理,需要处理的事件逻辑放在调用模版的页面中。 一个template 模版,只包含wxml、wxss文件。
    2. Component组件:作为一个单独的功能模块,不仅可以包含页面展示还可以包含该模块的事件逻辑处理。像一个页面一样,Component 组件可以包含 wxml、wxss、js、json文件。

    template模版方法:

    一、创建模板

    1.新建一个template文件夹用来管理项目中所有的模板(可选)

    2.新建一个template.wxml文件来定义模板

    示例代码:

    <template name="A">
    <text>template a: {{text}}</text>
    </template>
    <template name="B">
    <text>template b: {{text}} {{msg}}</text>
    </template>
    

    可以看到一个模板文件中可以定义多个模板,通过name区分,模板中可以接受变量,使用{{}}包围。

    3.可以新建template.wxss来存放样式

    二、使用模板

    1.在需要引入模板的文件中使用<import>标签。该标签的src属性为需要引用模版的路径.

    2.使用is属性区别定义的模板

    3.使用data传入数据

    示例代码:

    <import src="../tpls/template.wxml" />
    <view>
    <template is="A" data="{{name}}"/>
    <view>
    
    列2:
    <block wx:for="{{newsList}}">
        <template is="{{index%2 === 0 ? 'A' : 'B'}}" data="{{...item}}"></template>
    </block>
    

    说明:

    A.列2中表达式来确定使用哪个模板。或者用wx:if.index是当前数组的下标

    B.data是要模板渲染的数据,data=”{{…item}}”写法是ES6的写法,item是wx:for当前项,…是展开运算符,在模板中不需要再{{item.Name}}而是直接{{Name}}。

    4.引入模板样式,在调用页面的wxss页面中

    @import "./template/template.wxss"
    

    注意:

    1.import 有作用域
    import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。
    例如:C 引用 B,B 引用A,在C中可以使用B定义的 template,在B中可以使用A定义的 template ,但是C不能使用A定义的template

    2.也可以用include
    使用引用模版文件时, 并不能分别出模版文件的模版块, 所以使用引用的模版文件中只能定义一个模版块。
    include 可以将目标文件中除了

    3.模板中也可以定义事件,定义的事件需要在调用页面中执行

    template.wxml
    <template name="A">
    <text bindtap="handleTap">template a: {{text}}</text>
    </template>
    
    index.js
    Page({
    data: {},
    handleTap() {
    console.log('template 模版 click')
    }
    })
    免责需知
    1、本站所有资源均来源于网络收集,一切版权©归原作者所有,请保留原版权信息。
    2、本站分享仅供参考学习和演示,禁止商用,如需商用,请从正规渠道选择购买正版!使用正版!支持正版!维护一个良好的知识产权环境。
    3、内容故是参考与学习,不确保能正常演示,也不包含其中的技术服务。
    4、排除在某个功能上存在有其它的BUG或源码残缺的可能,购买后一率不能退款。
    5、资源下载不含技术服务,需付费安装请联系客服100元/次。
    6、文件储存在网盘,如发现链接或者密码有误,请联系客服。
    7、如果付款后下载不了,请提交工单说明,客服会在24小时内解决,如果解决不了,会为您退款。
    8、侵权反馈邮箱:yutongyuncom@qq.com
    顺风猫 » 小程序中模板的使用方法-template模板

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    顺风猫
    一个高级程序员模板开发平台