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

实例内容

  • 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代码:

创建index/index2index/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.wxmlindex3.wxml都需要userInfo数据,所以这边在index2获取到数据后,使用本地存储进行存储,index3.wxml读取本地存储。

index2.js代码:

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

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

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

template也是写在.wxml中,然后使用<template>…</template>标记指定模版信息,模版下定义:

<template name=”msgItem”>
视图代码…
</template>

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

实例说明

使用模版的方式创建footer视图代码片,然后用importtemplate进行代码的调用。

发表评论

电子邮件地址不会被公开。 必填项已用*标注