详解微信小程序入门五: 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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
javascript对talbe进行动态添加、删除、验证实现代码
Mar 29 Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
《JavaScript高级编程》学习笔记之object和array引用类型
Nov 01 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
详解在Angular项目中添加插件ng-bootstrap
Jul 04 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
基于React+Redux的SSR实现方法
Jul 03 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 17 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/02 无线电
PHP面向对象编程快速入门
2006/10/09 PHP
PHP+DBM的同学录程序(2)
2006/10/09 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
php结合ACCESS的跨库查询功能
2015/06/12 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
NodeJS实现微信公众号关注后自动回复功能
2017/05/31 NodeJs
iscroll.js滚动加载实例详解
2017/07/18 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
详解微信小程序文件下载--视频和图片
2019/04/24 Javascript
babel7.x和webpack4.x配置vue项目的方法步骤
2019/05/12 Javascript
剖析Django中模版标签的解析与参数传递
2015/07/21 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
python3 读取Excel表格中的数据
2018/10/16 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
python创建属于自己的单词词库 便于背单词
2019/07/30 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
计算机专业应届毕业生自荐信
2013/09/26 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
交通安全寄语大全
2014/04/08 职场文书
小学二年级学生评语
2014/04/21 职场文书
2014年小班保育员工作总结
2014/12/23 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
开业庆典嘉宾致辞
2015/08/01 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书