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

ゝ一纸荒年。 2022-03-10 04:05 519阅读 0赞

### 文章目录 ###

*   *   *  一.模板外部引用的规则
         *  二. 页面引用外部wxml通用页面

day01 所有的代码  
[https://gitee.com/jaythc/wxxcx\_learen/tree/master/day01][https_gitee.com_jaythc_wxxcx_learen_tree_master_day01]

### 一.模板外部引用的规则 ###

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

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

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

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

最终页面显示的效果如下图, 可以看到成功进行了模板的 引用.![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]

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

一个页面大致可以分为如下的三块, 并且其header和footer是不变的, 因此可以把这两个页面进行引用即可  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2][]  
在页面中, 除了模板和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的引用  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3][]  
官方文档  
[https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html][https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_import.html]

[https_gitee.com_jaythc_wxxcx_learen_tree_master_day01]: https://gitee.com/jaythc/wxxcx_learen/tree/master/day01
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70]: /images/20220310/346940425b8147ebab19c6ab61cf97e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 1]: /images/20220310/62725cde24ee4f78be6c8c46d43275f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 2]: /images/20220310/204c54019f9d41e2b1fa9cb490ed0924.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70 3]: /images/20220310/5af8ba92b4a64f08a63ce727d7c480d2.png
[https_developers.weixin.qq.com_miniprogram_dev_framework_view_wxml_import.html]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/import.html