一、navigator--完成页面之间的跳转

1、新建一个页面文件夹

2、在app.json文件中引入页面
"pages": [
"pages/index/index",
"pages/ranking/ranking"
],

3、在wxml页面中用navgator标签实现跳转

<navigator url="../ranking/ranking">排行榜</navigator>

二、页面间跳转和传值

1、在地址后面用 ?属性=属性值  的方式传值,多个属性之间用 & 连接

<navigator url="../ranking/ranking?name=月排行榜&age=1">排行榜</navigator>

2、在跳转后的页面的 .js 文件中接收值,options中数据就是页面跳转时传递的值

Page({
onLoad: function (options) {
console.log(options)
}
})

注:reditect跳转,这个跳转是没有过度的,不能返回,适用于只出现一次的页面

  <navigator url="../ranking/ranking?name=月排行榜&age=1" redirect>排行榜</navigator>

三、微信小程序使用API跳转

<!-- index.wxml -->
<view>
<navigator url='../demo1/demo1'>普通页面跳转</navigator>
<button bindtap='ondemo1'>通过API跳转</button>
<button bindtap='ondemo2'>通过API跳转,不能返回</button>
</view>
//index.js
//获取应用实例
const app = getApp() Page({
ondemo1:function(){
wx:wx.navigateTo({
url: '../demo1/demo1',
success: function(res) {
console.log("通过API跳转成功")
},
// 成功时的回调函数
fail: function(res) {},
//失败时的回调函数
complete: function(res) {},
//完成时的回调函数,无论成功或失败都会执行
})
},
ondemo2:function(){
wx:wx.redirectTo({
url: '../demo2/demo2',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
})
<!--pages/demo1/demo1.wxml-->
<text>pages/demo1/demo1.wxml</text>
<button bindtap='toback'>返回上一级</button>
// pages/demo1/demo1.js
Page({
toback:function(){
// wx:wx.navigateBack()
wx:wx.navigateBack({
delta: ,
//delta指定返回的页面,默认是1
})
}
})

微信小程序开发--页面之间的跳转的更多相关文章

  1. 微信小程序开发--页面结构

    一.微信小程序开发--页面文件组成 [page.name].js 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理 [page.name].wxml wxml指的是Wei Xin M ...

  2. 微信小程序和H5之间相互跳转

    1.微信小程序跳转小程序 wx.navigateToMiniProgram <script src='https://res.wx.qq.com/open/js/jweixin-1.3.0.js ...

  3. 微信小程序之页面之间传递值

    页面之间传值有三种方式 1.url传值 2.本地存储传值 3.全局变量传值 1.url传值: 通过url传值的需要通过option来获取参数值. 更多详情可以访问小程序-navigateTo章节. A ...

  4. 认识微信小程序开发页面

    先认识一下开发界面,当前是上节中刚刚新建好的一个小程序. 模拟窗口当前页面的路径可以查看左下角Page Path,可以看到当前页面的路径为pages/index/index,正好和app.json里面 ...

  5. 微信小程序6 - 页面之间传参及通知系统封装

    1. 简单传参 wx.navigateTo({ url: '/pages/demo/index/index?id=1' }) /pages/demo/index/index.js 中 onLoad(o ...

  6. 微信小程序开发:学习笔记[8]——页面跳转及传参

    微信小程序开发:学习笔记[8]——页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...

  7. 微信小程序开发系列七:微信小程序的页面跳转

    微信小程序开发系列教程 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 微信小程序开发系列二:微信小程序的视图设计 微信小程序开发系列三:微信小程序的调试方法 微信小程序开发系列四:微信小程序 ...

  8. 微信小程序开发06-一个业务页面的完成

    前言 接上文:微信小程序开发05-日历组件的实现 github地址:https://github.com/yexiaochai/wxdemo 这里来说一说我们的理念,我们也学习小程序开发有一周多了,从 ...

  9. 微信小程序开发07-列表页面怎么做

    接上文:微信小程序开发06-一个业务页面的完成 github地址:https://github.com/yexiaochai/wxdemo 我们首页功能基本完成,我对比了下实际工作中的需求,完成度有7 ...

随机推荐

  1. c# log4net 配置使用

    新增配置文件log4net.config,内容如下 <?xml version="1.0" encoding="utf-8" ?> <conf ...

  2. 使用sikuli软件进行自动化编程

    因为工作上的需要,某个信息系统不健全,因此仅仅需要一个一个的点击确认,客户端是网页版本的,抓包太复杂了,如何快速的能够自动化操作? 想到了之前学习python的时候,发现了一个基于java的图片编程软 ...

  3. 发布一个Django项目

    一.部署环境准备,准备python3和虚拟环境解释器,virtualenvwrapper 1.修改python3的环境变量 PATH=/opt/python36/bin:/usr/local/sbin ...

  4. Jenkins持续部署-自动生成版本号

    目录 Jenkins持续部署-自动生成版本号 目录 前言 目的 详细流程 获取SVN Reversion 获取需求号 设置编译前读取版本号 总结 参考文献 Jenkins持续部署-自动生成版本号 目录 ...

  5. Java项目接入sso单点登录

    最近在落地cat(java开发的一款开源监控系统)接入公司的内部项目,其中有项需求是接入公司的sso单点登录系统.研究了公司之前java项目接入sso系统,大部分是采用spring框架,然后依赖spr ...

  6. Python自学day-1

    一.Python介绍 1.python擅长领域:     WEB开发:Django. pyramid. Tornado. Bottle. Flask. WebPy     网络编程:Twisted(牛 ...

  7. 纯异步nodejs文件夹(目录)复制

    思路: 1.callback 驱动 2.递归所有需要复制文件 3.在一定阀值下并发复制文件 4.运行需要安装 async.js     npm install async 代码如下: var asyn ...

  8. maven_nexus私服搭建

    搭建很简单,但是新版本运行方式有所区别,于此记录一下: 1.下载程序包:http://www.sonatype.org/nexus/downloads/ 官网比较慢,下了一小时.期间在csdn花了一积 ...

  9. Python开发【第八篇】: 网络编程

    内容概要 楔子 软件开发架构 网络基础 套接字(socket) 粘包 socketserver模块 一. 楔子 现在有两个python文件a.py和b.py,分别运行,这两个程序之间需要传递一个数据, ...

  10. Smobiler与Windows的异步回调差别

    Smobiler与Windows的异步回调差别--基于.NET的APP开发和Windows开发差别 基于.NET的APP开发和Windows开发,异步回调差别 Windows app开发 异步回调 S ...