例項內容

• wxml檔案引用（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>

因為兩個頁面都要包含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內容：

<!--pages/index/index2.wxml-->
<view class="container">
    <include src="../common/header.wxml" />

    <view class="myBtn">
        <button type="primary" bindtap="goIndex3">進入index3</button>
    </view>    
</view>

因為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: 'index3'
    })
  },

  onLoad: function () {
    console.log('onLoad')
    var that = this
    app.getUserInfo(function (userInfo) {
      that.setData({
        userInfo: userInfo
      })

      //本地儲存
      wx.setStorageSync('userInfo', userInfo)
    })
  }
})

index3.wxml程式碼：

<!--pages/index/index3.wxml-->

<view class="container">
    <include src="../common/header.wxml" />

    <text>pages/index/index3.wxml</text>
</view>

index3.js程式碼：

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

例項效果

例項二: import方式引用footer.wxml檔案

這個例項使用import來引用檔案，import比include要強大的多，待會我再對於這兩都進行一下對比。

import引用方式涉及到了微信的模版(template)，這裡先說一下template。

微信檢視模版（template）

template也是寫在.wxml中，然後使用<template>...</template>標記指定模版資訊，模版下定義：

<template name="msgItem">
    檢視程式碼...
</template>

使用name屬性，作為模板的名字。

使用模版：

<template is="msgItem" data="{{...item}}"/>

data為向模版傳入的資料。

例項說明

使用模版的方式建立footer檢視程式碼片，然後用import和template進行程式碼的呼叫。

例項程式碼

建立footer.wxml

footer.wxml程式碼：

index2.wxml程式碼：

例項效果

例項三: 小程式退出時清除本地資料

這裡涉及到了小程式的生命週期問題，可以類比一下安卓生命週期，小程式的生命週期在app.js中進行定義：

page生命週期：

這裡用到了onUnload事件。

index2.js程式碼：

include 與 import

import可以在該檔案中使用目標檔案定義的template

include可以將目標檔案除了<template/>的整個程式碼引入，相當於是拷貝到include位置

import的作用域

import有作用域的概念，即只會import目標檔案中定義的template，而不會import目標檔案import的template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template

部落格名稱：王樂平部落格

部落格地址：http://blog.lepingde.com

CSDN部落格地址：http://blog.csdn.net/lecepin