首页行业模板模板教程
小程序模板模板教程微信小程序import与include的区别

微信小程序import与include的区别

模板可以用单独的wxml来保存

使用的时候, 用import导入模板

创建模板数据的来源:
  1. Page({
  2.   data: {
  3.     mo: 'Hello World!!',
  4.     userid : '1234',
  5.     text:'测试',
  6.     list: [{
  7.       index: 0,
  8.       msg: "this is a template",
  9.       time: "2016-09-15"
  10.     },
  11.     {
  12.       index: 1000,
  13.       msg: "this is a new template",
  14.       time: "2026-09-15"
  15.     }]
  16.   },


创建模板文件(可以放在其它专用文件夹):
  1. <!--模板独立成单独的文件-->
  2.  
  3. <template name="item">
  4.  
  5.   <view>template text: {{msg}}</view>
  6.  
  7.   <view>日期 : {{time}}</view>
  8.  
  9. </template>


使用import导入模板并使用
  1. <!--模板引用-->
  2. <import src='../common/template.wxml'/>   
  3.  
  4. <view class='container'>
  5.  
  6.   <view wx:for='{{list}}'>
  7.     <!--模板使用-->
  8.     <template is='item' data="{{...item}}"/>
  9.   </view>
  10.  
  11. </view>


is就是模板的名称, data是模板要使用的数据

...item是ES6简写的方式, 如果不用此方式, 则在模板定义中就是{{item.xxx}}, 而不是{{xxx}}

include用于拆分页面, 它不传递参数(template则可以传递参数)

由于很多页面的头部和底部是一样的

所以可以定义头部和底部, 再将它们包进不同的页面
  1. header.wxml, footer.wxml
  2.  
  3. <import src='../common/template.wxml'/>
  4. <view class='container'>
  5.  
  6.   <include src='../common/header.wxml'/>
  7.  
  8.   <view>
  9.     <template is='item' data="{{xxx}}"/>
  10.   </view>
  11.  
  12.   <include src='../common/footer.wxml'/>
  13.  
  14. </view>


使用include标签完成页面包含, 使用import标签完成模板导入

猜你喜欢

热门模板排行

更多推荐模板

Copyright © 2018 www.xmdeal.com. All Rights Reserved.

二维码