zoukankan      html  css  js  c++  java
  • 小程序--引用公共模板方法/共同header/footer

    微信小程序中,如果几个页面中需要引用同一个header/footer,当定义了公共模板时,有两种引用方法如下:

    方法一:在公共模板中定义template元素,利用<import/> 方法 ,这种方式只会显示公共模板的template里面的内容,之外的内容不会显示

    wxml:

    <import src='公共模板地址'/>

    <template is='模板里面template定义的name名称' data='{{引入的数据1,引入数据2}}'></template> 注意:这里的data='{{引入的数据1,引入数据2}}' 是在template中要提取js文件中的data数据里面的key名字,否则无法显示

    公共模板的wxml:在公共模板中必须定义每一个template的的name的名字,否则引用的时候无法得知引用具体某一个;

    <template name='header'><!--必须有有name不然import方式无法判断到底要引用哪一个tempalte-->
    {{title.header}}<!--这个数据只是提取要引用的文件的里面js里面定义的对应的数据,如果在其他文件中定义不在要引用的文件中无效-->
    </template>

    要引用的文件js定义数据:

    data: {
    title:{header:'这是template的header部分',footer:'这是template的footer部分',other:'这是tempalt外部部分'}
    }

    页面结果:

     方法二:

    <include src="公共模板地址"/>这种方式是引入了模板中除了tempalte以外的所有内容。
    <include src="../../template/footer.wxml"/> 

    公共模板的wxml:

    {{title.other}}

    js定义的数据:

     title:{header:'news里面的的header',footer:'这是template的footer部分'}

    页面结果:

    总结:import方式和imclude方式的不同在于前者仅引用公共模板中的template里面的内容后者仅引用template以外的内容,显而易见,include方式更简单一些,在wxml中只需要一句话即可。

  • 相关阅读:
    元素模式
    完美C++(第5版)(双色)
    ASP.NET Web API 2框架揭秘
    跨终端 Web
    WebKit技术内幕
    云计算时代——本质、技术、创新、战略
    互联网创业密码
    Netty权威指南
    Robot Framework 学习笔记(二)-------第一个脚本
    Robot Framework学习笔记(一)------环境搭建
  • 原文地址:https://www.cnblogs.com/bellagao/p/6296456.html
Copyright © 2011-2022 走看看