详解⼩程序⼊门五：wxml⽂件引⽤、模版、⽣命周
期
实例⼀: 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
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中进⾏定义：属性类型描述触发时机
onLaunch Function⽣命周期函数–监听⼩程序初
当⼩程序初始化完成时，会触发 onLaunch（全局只触发⼀次）始化
onShow Function⽣命周期函数–监听⼩程序显
当⼩程序启动，或从后台进⼊前台显⽰，会触发 onShow
⽰
onHide Function⽣命周期函数–监听⼩程序隐
当⼩程序从前台进⼊后台，会触发 onHide
藏
onError Function错误监听函数当⼩程序发⽣脚本错误，或者 api 调⽤失败时，会触发 onError 并带上错
误信息
page⽣命周期：
属性类型描述
onLoad Function⽣命周期函数–监听页⾯加载
onReady Function⽣命周期函数–监听页⾯初次渲染完成
onShow Function⽣命周期函数–监听页⾯显⽰
onHide Function⽣命周期函数–监听页⾯隐藏
onUnload Function⽣命周期函数–监听页⾯卸载

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。