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

发布时间：2020-12-14 20:21:18 所属栏目：资源来源：网络整理

导读：实例一: include方式引用header.wxml文件文件引用对于代码的重用非常重要，例如在web开发中我们可以将公用的header部分和footer等部分进行提取，然后在需要的地方进行引用。微信小程序里面，是包含引用功能的——include、import。这两个引用文件的标签，

page生命周期：

属性

这里用到了onUnload事件。

index2.js代码：

include 与 import

import可以在该文件中使用目标文件定义的template

include可以将目标文件除了

实例一: 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代码：因为两个页面都要包含header.wxml，所以样式文件就不重复写了，这里直接将样式拷贝到app.wxss。 app.wxss代码： .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .userinfo-nickname { color: #aaa; } 创建index/index2和index/index3 index2.wxml内容： <view class="myBtn"> <button type="primary" bindtap="goIndex3">进入index3 因为index2.wxml和index3.wxml都需要userInfo数据，所以这边在index2获取到数据后，使用本地存储进行存储，index3.wxml读取本地存储。 index2.js代码： 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代码： <view class="container"> pages/index/index3.wxml index3.js代码：实例效果实例二: import方式引用footer.wxml文件这个实例使用import来引用文件，import比include要强大的多，待会我再对于这两都进行一下对比。 import引用方式涉及到了微信的模版(template)，这里先说一下template。微信视图模版（template） template也是写在.wxml中，然后使用标记指定模版信息，模版下定义：使用name属性，作为模板的名字。使用模版： data为向模版传入的数据。实例说明使用模版的方式创建footer视图代码片，然后用import和template进行代码的调用。实例代码创建footer.wxml footer.wxml代码： index2.wxml代码：实例效果实例三: 小程序退出时清除本地数据这里涉及到了小程序的生命周期问题，可以类比一下安卓生命周期，小程序的生命周期在app.js中进行定义：属性	类型	描述	触发时机
类型	描述

实例一: 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代码：

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

app.wxss代码：

.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}

.userinfo-nickname {
color: #aaa;
}

创建index/index2和index/index3

index2.wxml内容：

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

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

index2.js代码：

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

index3.js代码：

实例效果

实例二: import方式引用footer.wxml文件

这个实例使用import来引用文件，import比include要强大的多，待会我再对于这两都进行一下对比。

import引用方式涉及到了微信的模版(template)，这里先说一下template。

微信视图模版（template）

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

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

使用模版：

data为向模版传入的数据。

实例说明

使用模版的方式创建footer视图代码片，然后用import和template进行代码的调用。

实例代码

创建footer.wxml

footer.wxml代码：

index2.wxml代码：

实例效果

实例三: 小程序退出时清除本地数据

这里涉及到了小程序的生命周期问题，可以类比一下安卓生命周期，小程序的生命周期在app.js中进行定义：

属性

类型

描述

触发时机

类型

描述

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

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

实例说明

实例代码

实例二: import方式引用footer.wxml文件

微信视图模版（template）

实例说明

实例代码

实例三: 小程序退出时清除本地数据

import的作用域