bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

詳解微信小程序入門五:wxml文件引用、模版、生命周期

實例一: include方式引用header.wxml文件

創新互聯公司于2013年成立，是專業互聯網技術服務公司，擁有項目做網站、網站建設網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元十堰鄖陽做網站,已為上家服務,為十堰鄖陽各地企業和個人服務,聯系電話:18980820575

文件引用對于代碼的重用非常重要，例如在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

詳解微信小程序入門五: wxml文件引用、模版、生命周期

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')
  })
 },
})

實例效果

 詳解微信小程序入門五: wxml文件引用、模版、生命周期

實例二: 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

詳解微信小程序入門五: wxml文件引用、模版、生命周期 

footer.wxml代碼：

詳解微信小程序入門五: wxml文件引用、模版、生命周期 

index2.wxml代碼：

詳解微信小程序入門五: wxml文件引用、模版、生命周期 

實例效果

詳解微信小程序入門五: wxml文件引用、模版、生命周期 

實例三: 小程序退出時清除本地數據

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

屬性類型描述觸發時機
onLaunchFunction生命周期函數–監聽小程序初始化當小程序初始化完成時，會觸發 onLaunch（全局只觸發一次）
onShowFunction生命周期函數–監聽小程序顯示當小程序啟動，或從后臺進入前臺顯示，會觸發 onShow
onHideFunction生命周期函數–監聽小程序隱藏當小程序從前臺進入后臺，會觸發 onHide
onErrorFunction錯誤監聽函數當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息

page生命周期：

屬性類型描述
onLoadFunction生命周期函數–監聽頁面加載
onReadyFunction生命周期函數–監聽頁面初次渲染完成
onShowFunction生命周期函數–監聽頁面顯示
onHideFunction生命周期函數–監聽頁面隱藏
onUnloadFunction生命周期函數–監聽頁面卸載

詳解微信小程序入門五: wxml文件引用、模版、生命周期

這里用到了onUnload事件。

index2.js代碼：

詳解微信小程序入門五: wxml文件引用、模版、生命周期 

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

網站欄目：詳解微信小程序入門五:wxml文件引用、模版、生命周期
新聞來源：http://vcdvsql.cn/article16/peisdg.html

成都網站建設公司_創新互聯，為您提供微信公眾號、搜索引擎優化、Google、品牌網站設計、網站維護、全網營銷推廣

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯

成都做網站