微信小程序开发实战(19):页面导航
在前面的章节尽管介绍了很多API和组件,但所有的代码都放在了一个页面中(布局放在了wxml文件中,JS代码写在了js文件中),然而,对于一个有实际应用价值的小程序,不可能只有一个页面,如果小程序中包含了多个页面,就需要从一个页面切换到另一个页面,这被称为页面导航。
要实现页面导航,需要使用<navigator>标签,该标签允许在当前页面显示另一个页面,也允许显示一个新页面。例如,下面的布局代码中使用了两个<navigator>标签。
<view style="margin:30px">
<navigator url="page1?title=跳转到新页面" >
<button >跳转到新页面</button>
</navigator>
<navigator style="margin-top:20px" url="page2?title=在当前页面打开&color=red" redirect >
<button >在当前页打开</button>
</navigator>å
</view>
<navigator>标签有一个非常重要的属性url,该属性用于指定要跳转的页面和要传递的值。这个url的格式类似于web地址。页面和参数之间用问号(?)分隔,如果传递多个参数,参数之间用&分隔。其中page1和page2是与当前页面同一个目录下的页面。第二个<navigator>标签不仅通过url传递了title参数,还传递了一个color参数,用于设置page2中文本的颜色。在这个<navigator>标签中还指定了redirect属性,表示在当前页面中打开新页面,默认是在另一个页面中打开新页面。
现在选择当前页面的目录,然后单击鼠标右键,会弹出如图1所示的菜单。
图1 新建页面
现在新建4个文件:page1.wxml、page1.js、page2.wxml和page2.js。这4个文件中的代码如下:
page1.wxml
<view style="margin:30px">
<text>{{title}}</text>
</view>
page1.js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title
})
}
})
page2.wxml
<view style="margin:30px">
<text style="color:{{color}}">{{title}}</text>
</view>
page2.js
Page({
onLoad: function(options) {
console.log(options)
this.setData({
title: options.title,
color:options.color
})
}
})
从page1.js和page2.js文件中的代码可以看出,通过onLoad事件的options参数返回传入的参数(title和color),并将这两个参数值赋给title和color变量。
注意:新添加的页面,要在app.json文件的pages中注册,否则无法使用新建立的页面。注册代码如下:
"page/component/component-pages/wx-view/page1",
"page/component/component-pages/wx-view/page2",
现在点击第一个按钮,会跳转到如图2所示的页面,点击左上角的“返回”按钮,会返回到当前页面。
图2 在另一个页面显示新页面
点击第二个按钮,会跳转到如图3所示的页面,点击左上角的“返回”按钮,会返回到当前页面的上一个页面。
图3 在当前页面显示新页面
- 这三要素,让区块链技术成为颠覆世界的技术
- 代码实现 WordPress 反垃圾评论功能
- Flash/Flex学习笔记(39):弹性运动
- 兼容Mono的下一代云环境Web开发框架ASP.NET vNext
- ASP.NET vNext 概述
- 丰富排版页面——为你的wordpress主题添加短代码形式美化框
- 开放式管理基础结构 OMI
- 人类设计了游戏和AI 2017年AI在游戏中打败了人类
- WordPress 代码实现相关文章(列表模式)功能
- 自动刷新页面
- Python语言被列入全国计算机等级考试科目中
- WordPress纯代码高仿 无觅相关文章 图文模式功能
- 各种序列化库的性能数据
- WordPress内置搜索结果只有一篇文章时自动跳转到该文章
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- SpringMVC配置字符过滤器的两种方式
- SpringMvc使用Json(Java配置方式)
- 使用IDEA创建SpringMvc并整合Thymeleaf(Java配置版)
- Junit报错:Argument(s) are different! Wanted:
- RocketMQ使用过滤器filterServer(4.3版本后)
- Python+Appium运行简单的demo,你需要理解Appium运行原理!
- 网站日志分析完整实践【技术创造101训练营】
- HTML前端知识
- 掌握 AST,轻松落地关键业务「技术创作101训练营」
- 一文轻松学会linux字符设备驱动
- leetcode树之N叉树的前序遍历
- 2020-09-20:如何判断一个数是质数?
- 金九银十Android面试复习题集:关于四大组件中的Activity你了解多少?
- HaseMap的循环姿势你真的懂了吗?
- 历经14天自定义3个注解解决项目的3个Swagger难题