微信小程序import与include的区别

发布：2021-06-11 08:36浏览：次来源：网络作者：tianshu

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

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

创建模板数据的来源:

Page({
data: {
mo: 'Hello World!!',
userid : '1234',
text:'测试',
list: [{
index: 0,
msg: "this is a template",
time: "2016-09-15"
},
{
index: 1000,
msg: "this is a new template",
time: "2026-09-15"
}]
},

创建模板文件(可以放在其它专用文件夹):

<template name="item">
<view>template text: {{msg}}</view>
<view>日期 : {{time}}</view>
</template>

使用import导入模板并使用

<import src='../common/template.wxml'/>
<view class='container'>
<view wx:for='{{list}}'>
<template is='item' data="{{...item}}"/>
</view>
</view>

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

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

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

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

所以可以定义头部和底部, 再将它们包进不同的页面

header.wxml, footer.wxml
<import src='../common/template.wxml'/>
<view class='container'>
<include src='../common/header.wxml'/>
<view>
<template is='item' data="{{xxx}}"/>
</view>
<include src='../common/footer.wxml'/>
</view>

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

上一篇：微信小程序实现清空input输入框的值

下一篇：小程序通过用户授权获取手机号

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。