微信小程序day01_18之模板外部的引用和页面引用外部wxml通用页面

day01 所有的代码
https://gitee.com/jaythc/wxxcx_learen/tree/master/day01

一.模板外部引用的规则

模板在某个wxml中,定义完毕后,可以被其他的页面所引用.
引用使用关键字 import
需要注意的是如果A引用了B , B引用了C , 那么A 是不能直接去引用C的.

代码示例
在temps.wxml中定义了一个名为mytemp的模板, 需要在wxs文件夹中的wxs.wxml中进行引用

wxs.wxml 中进行引用的代码如下

<view class='container'>
   
  <import src="../temps/temps.wxml"/>
  <template is="mytemp" data="{{msg,...person, name:'欢迎关注微信公众号: java持续实践',age:'18岁'}}"/>

</view>

在wxs的js中,进行如下的数据绑定

 data: {
    person: { address: '北京', remark: '这是一个模板演示' },
    msg: '测试消息'
  }

最终页面显示的效果如下图, 可以看到成功进行了模板的 引用.

二. 页面引用外部wxml通用页面

一个页面大致可以分为如下的三块, 并且其header和footer是不变的, 因此可以把这两个页面进行引用即可

在页面中, 除了模板和wxs以外的代码, 都可以引用.
引用的关键字是include

include
include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置

代码示例:
创建pageinclude文件夹
在此文件夹下, 创建footer.wxml , 内容如下

<view>
 我是footer
</view>

创建 header.wxml , 内容如下

<view>
 我是header
</view>

在pageinclude.wxml 中,引用如下

<view class="container">

  <include src="header.wxml"/>
	<view>
	我是body 
	欢迎关注微信公众号: java持续实践
	</view>

	<include src="footer.wxml"/>
</view>

页面中, 实际显示如下, 可以看到成功进行了外部wxml的引用

官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html