建站学院

当前位置:

微信小程序中如何引用wxml文件、视图模版的使用方法

浏览量:259次

本文带大家了解一下微信小程序中如何引用wxml文件、视图模版的使用方法,用2种方式来引用wxml文件,这样就可以包含重复的内容,让网页内容和逻辑结构更加简单明也更加轻量级。
此外,在第二种方法中,大家可以了解到,用模板的方式去引用wxml文件。
最后再程序退出时,如何清理的方式,通过小程序的生命周期的介绍,大家可以清楚的知道小程序在各个阶段的事件,以后需要在不同的阶段安排执行不同的任务,可以写在对应的事件中。

核心内容

wxml文件的2种引用(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>

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【915688610@qq.com】,我们在确认后,会立即删除,保证您的版权。