微信应用号之import、include 要点

在开发微信应用号的过程中，希望能够达到这种效果；定义了多个通用的 wxml 来放置tempalte ，同时希望有一个 wxml 能够统一的管理引用的模板；

如下所示:

模板结构

其中 input,wxml 代码为:


<!--
	微信搜索框
 -->

<template name="searcheInputView1">
	<view class="section weixin-search-input-view page-view-direction-row">
	 	<input placeholder="搜索"  />
	</view>
</template>

<template name="searcheInputView2">
	<view class="section weixin-search-input-view page-view-direction-row">
	 	<input placeholder="搜索"  />
	</view>
</template>

包含了很多input类型的模板 commonTemplate.wxml 希望能够引入input.wxml、panel.wxml 等，然后再具体的页面中只需要引入commonTemplate.wxml 即可用到所有定义的模板

当看到微信应用号引用时，发现import 只能够传递一层，即 A->B B->C A !->C 这样就导致了这种方法不能使用。蛋疼之余，看到include 是这样描述的

include可以将目标文件出了<template/>的整个代码引入，相当于是拷贝到include位置

那么 <import>算是 template 的内容吗？测试一下，结果惊喜的发现竟然是可以这么使用的。于是十分兴高采烈的使用上了我的 ”组件模块化” 。最后放出代码： commonTemplate.wxml

<!-- 该文件做通用引用功能 -->

<!-- 输入框组件  -->
<import src="input.wxml" />

<!-- 面板组件 -->
<import src="panel.wxml" />

模板代码： input.wxml


<!--
	微信搜索框
 -->

<template name="searcheInputView1">
	<view class="section weixin-search-input-view page-view-direction-row">
	 	<input placeholder="搜索"  />
	</view>
</template>

<template name="searcheInputView2">
	<view class="section weixin-search-input-view page-view-direction-row">
	 	<input placeholder="搜索"  />
	</view>
</template>

调用代码: weixin.wxml

<!-- 导入模板-->
<include src="../../common/template/commonTemplate.wxml" />


<!--一个块级区域-->
<template is="searcheInputView" />

完美解决问题，不过这里可能会引起效率问题，因为加载太多的模板，这里待研究测试

微信应用号之import、include 要点

猜你喜欢