微信小程序import與include的區(qū)別

模板可以用單獨(dú)的wxml來(lái)保存

使用的時(shí)候, 用import導(dǎo)入模板

創(chuàng)建模板數(shù)據(jù)的來(lái)源:

Page({

  data: {

    mo: 'Hello World!!',

    userid : '1234',

    text:'測(cè)試',

    list: [{

      index: 0,

      msg: "this is a template",

      time: "2016-09-15"

    },

    {

      index: 1000,

      msg: "this is a new template",

      time: "2026-09-15"

    }]

  },

創(chuàng)建模板文件(可以放在其它專用文件夾):

<!--模板獨(dú)立成單獨(dú)的文件-->

<template name="item">

  <view>template text: {{msg}}</view>

  <view>日期 : {{time}}</view>

</template>

使用import導(dǎo)入模板并使用

<!--模板引用-->

<import src='../common/template.wxml'/>   

<view class='container'>

  <view wx:for='{{list}}'>

    <!--模板使用-->

    <template is='item' data="{{...item}}"/>

  </view>

</view>

is就是模板的名稱, data是模板要使用的數(shù)據(jù)

...item是ES6簡(jiǎn)寫(xiě)的方式, 如果不用此方式, 則在模板定義中就是{{item.xxx}}, 而不是{{xxx}}

include用于拆分頁(yè)面, 它不傳遞參數(shù)(template則可以傳遞參數(shù))

由于很多頁(yè)面的頭部和底部是一樣的

所以可以定義頭部和底部, 再將它們包進(jìn)不同的頁(yè)面

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標(biāo)簽完成頁(yè)面包含, 使用import標(biāo)簽完成模板導(dǎo)入