详解微信小程序入门五: 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 相关文章推荐
Js+Dhtml:WEB程序员简易开发工具包(预先体验版)
Nov 07 Javascript
Javascript的一种模块模式
Mar 22 Javascript
js实现具有高亮显示效果的多级菜单代码
Sep 01 Javascript
JavaScript函数基础详解
Feb 03 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
微信小程序wx.previewImage预览图片实例详解
Dec 07 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
react同构实践之实现自己的同构模板
Mar 13 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
解决layui table表单提示数据接口请求异常的问题
Sep 24 Javascript
JS操作json对象key、value的常用方法分析
Oct 29 Javascript
详解ES6数组方法find()、findIndex()的总结
May 12 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
php统计时间和内存使用情况示例分享
2014/03/13 PHP
php三元运算符知识汇总
2015/07/02 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
FireFox JavaScript全局Event对象
2009/06/14 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
js中的前绑定和后绑定详解
2013/08/01 Javascript
在每个匹配元素的外部插入新元素的方法
2013/12/20 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
JavaScript中连接操作Oracle数据库实例
2015/04/02 Javascript
js实现向右横向滑出的二级菜单效果
2015/08/27 Javascript
浅谈Javascript中substr和substring的区别
2015/09/30 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
Javascript中将变量转换为字符串的三种方法
2017/09/19 Javascript
Three.js开发实现3D地图的实践过程总结
2017/11/20 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
Vue 进入/离开动画效果
2017/12/26 Javascript
在Python的Django框架中为代码添加注释的方法
2015/07/16 Python
django定期执行任务(实例讲解)
2017/11/03 Python
python读取excel指定列数据并写入到新的excel方法
2018/07/10 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python sorted对list和dict排序
2020/06/09 Python
Nisbets爱尔兰:英国最大的厨房和餐饮设备供应商
2019/01/26 全球购物
毕业生自荐书
2013/12/18 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
函授药学自我鉴定
2014/02/07 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
关于元旦的广播稿
2014/02/16 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
工作会议通知
2015/04/15 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
教师教育教学随笔
2015/08/15 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL
golang协程池模拟实现群发邮件功能
2021/05/02 Golang