微信小程序中如何引用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代码：

  
    
    {{userInfo.nickName}}
  

因为两个页面都要包含header.wxml，所以样式文件就不重复写了，这里直接将样式拷贝到app.wxss。
app.wxss代码：

/**app.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
 
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
 
.userinfo-nickname {
  color: #aaa;
}

创建index/index2和index/index3

index2.wxml内容：

    
 
    
        进入index3
        

因为index2.wxml和index3.wxml都需要userInfo数据，所以这边在index2获取到数据后，使用本地存储进行存储，index3.wxml读取本地存储。

index2.js代码：

// pages/index/index2.js
var app = getApp()
 
Page({
  data: {
    userInfo: {},
  },
 
  goIndex3:function(){
    wx.navigateTo({
      url: &＃39;index3&＃39;
    })
  },
 
  onLoad: function () {
    console.log(&＃39;onLoad&＃39;)
    var that = this
    app.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      })
 
      //本地存储
      wx.setStorageSync(&＃39;userInfo&＃39;, userInfo)
    })
  }

index3.wxml代码：

 

    
 
    pages/index/index3.wxml

index3.js代码：

// pages/index/index3.js
Page({
  data:{
    userInfo: {},
  },
  onLoad:function(options){    
    this.setData({
      userInfo: wx.getStorageSync(&＃39;userInfo&＃39;)
    })
  },
})

实例效果

template也是写在.wxml中，然后使用...标记指定模版信息，模版下定义：

使用name属性，作为模板的名字。

使用模版：