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


Posted in Javascript onJanuary 20, 2017

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

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

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
  app.getUserInfo(function (userInfo) {
   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')
  })
 },
})

实例效果

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

实例二: 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

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

footer.wxml代码:

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

index2.wxml代码:

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

实例效果

详解微信小程序入门五: 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 生命周期函数?监听页面卸载

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

这里用到了onUnload事件。

index2.js代码:

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

include 与 import

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

include可以将目标文件除了<template/>的整个代码引入,相当于是拷贝到include位置

import的作用域

import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。

如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不能使用A定义的template

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不能再简单的无闪刷新验证码原理很简单
Nov 05 Javascript
JS获取dom 对象 ajax操作 读写cookie函数
Nov 18 Javascript
javascript面向对象之二 命名空间
Feb 08 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js点击返回跳转到指定页面实现过程
Aug 20 Javascript
AngularJs IE Compatibility 兼容老版本IE
Sep 01 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
js调用刷新界面的几种方式
May 03 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
vue绑定的点击事件阻止冒泡的实例
Feb 08 Javascript
微信小程序实现复选框效果
Dec 28 Javascript
vue 中固定导航栏的实例代码
Nov 01 Javascript
浅谈JavaScript异步编程
Jan 20 #Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 #Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 #Javascript
BootStrap组件之进度条的基本用法
Jan 19 #Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 #Javascript
js实现符合国情的日期插件详解
Jan 19 #Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 #Javascript
You might like
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
php学习之简单计算器实现代码
2011/06/09 PHP
Yii2实现log输出到file及database的方法
2016/11/12 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
模仿JQuery sortable效果 代码有错但值得看看
2009/11/05 Javascript
JS类的封装及实现代码
2009/12/02 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
验证手机号码的JS方法分享
2013/09/10 Javascript
JavaScript中的字符串操作详解
2013/11/12 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery EasyUI菜单与按钮详解
2016/07/13 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
2016/11/05 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
Python的socket模块源码中的一些实现要点分析
2016/06/06 Python
Python使用Scrapy爬虫框架全站爬取图片并保存本地的实现代码
2018/03/04 Python
Python实现修改IE注册表功能示例
2018/05/10 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
pycharm配置pyqt5-tools开发环境的方法步骤
2019/02/11 Python
Django如何实现防止XSS攻击
2020/10/13 Python
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
英国文具、办公用品和科技商店:Ryman
2018/09/27 全球购物
瑞士网球商店:Tennis-Point
2020/03/12 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
琳达·法罗眼镜英国官网:Linda Farrow英国
2021/01/19 全球购物
Laravel中Kafka的使用详解
2021/03/24 PHP
会计专业应届生求职信
2013/11/24 职场文书
单位办理社保介绍信
2014/01/10 职场文书
假面舞会策划方案
2014/05/29 职场文书
活动总结范文
2014/08/30 职场文书
物流管理专业推荐信
2014/09/06 职场文书
资源环境与城乡规划管理专业自荐书
2014/09/26 职场文书
JAVA SpringMVC实现自定义拦截器
2022/03/16 Python