详解微信小程序入门五:wxml文件引,用模版,生命周期 - 行业资讯

<>强实例一:包括方式引用header.wxml文件

文件引用对于代码的重用非常重要,例如在网络开发中我们可以将公用的头部分和页脚等部分进行提取,然后在需要的地方进行引用。

微信小程序里面,是包含引用功能的——包括导入。这两个引用文件的标签,使用基本差不多,这里先说一下。

微信中的视图文件引用,引用过来的都是没有渲染的,基本类似于直接将引用过来的文件复制到引用位置,所以我们需要重新对其渲染。

<>强实例说明

这里将默认创建的用户头像信息提取出到header.wxml中,做为头部引用,分别由index2.wxml和index3.wxml引用,引用方式为包括。

<>强实例代码

在页面中创建常见/header.wxml

从index.wxml中将系统默认创建的用户信息结构复制到header.wxml中。

header.wxml代码:

　　　　　　& lt; !——页面/共同/header.wxml——比; 　　& lt;视图bindtap=癰indViewTap”类=坝没畔ⅰ北? 　　& lt;图像类=" userinfo-avatar " src=" https://www.yisu.com/zixun/{{userInfo.avatarUrl}}”background-size=胺饷妗弊４? lt;/image> 　　& lt;文本类=" userinfo-nickname "在{{userInfo.nickName}} & lt;/text> 　　& lt;/view> 　　　　之前　　　　

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

app.wxss代码:

　　　　/* * app.wxss * */.userinfo { 　　显示:flex; 　　flex-direction:列; 　　对齐项目:中心; 　　} 　　　　.userinfo-avatar { 　　宽度:128 rpx; 　　身高:128 rpx; 　　保证金:20 rpx; 　　这个特性:50%; 　　} 　　　　.userinfo-nickname { 　　颜色:# aaa级; 　　} 　　　　之前　　　　

创建索引/index2和索引/index3

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

index2.wxml内容:

　　　　　　& lt; !——页面/索引/index2.wxml——比; 　　& lt;视图类=叭萜鳌北? 　　& lt;包括src=" https://www.yisu.com/common/header.wxml "/比; 　　　　& lt;视图类=癿yBtn”比; 　　& lt;按钮类型=爸鳌眀indtap=癵oIndex3祝辞进入index3 　　& lt;/view> 　　& lt;/view> 　　之前　　　　

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

index2.js代码:

　　　　//页面/索引/index2.js 　　应用var=getApp () 　　　　页面({ 　　数据:{ 　　用户信息:{}, 　　}, 　　　　goIndex3:函数(){ 　　wx.navigateTo ({ 　　url:“index3” 　　}) 　　},> 　　& lt; !——页面/索引/index3.wxml——比; 　　　　& lt;视图类=叭萜鳌北? 　　& lt;包括src=" https://www.yisu.com/common/header.wxml "/比; 　　　　& lt; text>页/索引/index3.wxml 　　& lt;/view> 　　　　之前　　　　

index3.js代码:

　　　　//页面/索引/index3.js 　　页面({ 　　数据:{ 　　用户信息:{}, 　　}, 　　alt="详解微信小程序入门五:wxml文件引,用模版,生命周期">

<>强实例二:进口方式引用footer.wxml文件

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

进口引用方式涉及到了微信的模版(模板),这里先说一下模板。

<强>微信视图模版(模板)

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

　　　　　　& lt;模板名称=癿sgItem”比; 　　视图代码…… 　　& lt;/template> 　　　　

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

使用模版:

　　　　　　& lt;模板=癿sgItem”数据=" https://www.yisu.com/zixun/{{……项}}"/祝辞　　　　

数据为向模版传入的数据。