微信小程序中如何引用wxml文件、视图模版的使用方法

微信小程序中如何引用wxml文件、视图模版的使用方法
本文带大家了解一下微信小程序中如何引用wxml文件、视图模版的使用方法，用2种方式来引用WXML文件，这样就可以包含重复的内容，让网页内容和逻辑结构更加简单明也更加轻量级。

本文带大家了解一下微信小程序中如何引用wxml文件、视图模版的使用方法，用2种方式来引用wxml文件，这样就可以包含重复的内容，让网页内容和逻辑结构更加简单明也更加轻量级。此外，在第二种方法中，大家可以了解到，用模板的方式去引用wxml文件。最后再程序退出时，如何清理的方式，通过小程序的生命周期的介绍，大家可以清楚的知道小程序在各个阶段的事件，以后需要在不同的阶段安排执行不同的任务，可以写在对应的事件中。

核心内容

wxml文件的2种引用（include、import）

模版的使用

小程序生命周期

实例一: include方式引用header.wxml文件文件引用对于代码的重用非常重要，例如在web开发中我们可以将公用的header部分和footer等部分进行提取，然后在需要的地方进行引用。微信小程序里面，是包含引用功能的——include、import。这两个引用文件的标签，使用基本差不多，这里先说一下include。微信中的视图文件引用，引用过来的都是没有渲染的，基本类似于直接将引用过来的文件复制到引用位置，所以我们需要重新对其渲染。实例说明这里将默认创建的用户头像信息提取出到header.wxml中，做为头部引用，分别由index2.wxml和index3.wxml引用，引用方式为include。实例代码在pages中创建common/header.wxml从index.wxml中将系统默认创建的用户信息结构复制到header.wxml中。header.wxml代码：

<!--pages/common/header.wxml--> <view bindtap="bindViewTap" class="userinfo"> <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view>