微信小程序开发实战(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 在当前页面显示新页面
- 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 数组属性和方法
- Thinkphp5.0 框架的请求方式与响应方式分析
- Yii框架视图、视图布局、视图数据块操作示例
- 用php定义一个数组最简单的方法
- laravel-admin自动生成模块,及相关基础配置方法
- laravel-admin select框默认选中的方法
- Laravel-admin之修改操作日志的方法
- php使用curl伪造浏览器访问操作示例
- 关于laravel后台模板laravel-admin select框的使用详解
- 基于Laravel-admin 后台的自定义页面用法详解
- php解决约瑟夫环算法实例分析
- 浅谈laravel-admin的sortable和orderby使用问题
- 使用composer安装使用thinkphp6.0框架问题【视频教程】
- 基于laravel-admin 后台 列表标签背景的使用方法
- 解决laravel-admin 自己新建页面里 js 需要刷新一次的问题
- laravel-admin 中列表筛选方法