微信小程序 - template和include詳細描述

 

演示

 

 

index.wxml

<!-- 內部模板 -->
<template name="all">
  {{a}} {{b}}
</template>
<template is="all" data="{{a:1,b:2}}" />



<!-- 內部模板(擴展運算符) -->
<template name="allf">
  <view>{{name}}</view>
</template>
<view wx:for="{{searchData}}" wx:key="">
  <template is="allf" data="{{...item}}" />
</view>



<!-- 外部模板, -->
<import src="./wechat-template.wxml" />
<template is="weall" data="{{a:3,b:4}}" />


<!-- include -->
<include src="./wechat-module.wxml" />


<!-- 

include和template有何不同呢?
include：和原來頁面一樣,打比方來說就是頁面分離專用
template：模板,調用頁面數據填充數據

template可以隨意改變嗎?
模板如果被隨便改變，那就不叫模板了!

命名？
建議模板命名：xxxx-template.wxml
建議頁面模塊命名:xxxx-module.wxml

include可以導入數據嗎?
include不能！它只能做頁面分離時作用

關於template官方文檔?
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html?search-key=%E6%A8%A1%E6%9D%BF%E4%BD%BF%E7%94%A8

 -->

　

index.js

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    searchData: [{ name: '搜索1' }, { name: '搜索2' }, { name: '搜索3' }, { name: '搜索4' }]
  }
})

 

wechat-module.wxml

<view>嘿嘿嘿,include導入進來的</view>

 

wechat-template.wxml

<template name="weall">
  {{a}} {{b}}
</template>

　　

 

祝大家聖誕節快樂，恭迎元旦！