微信小程序页面跳转的方法有哪些？

新橄榄网小编给大家带来了微信小程序页面跳转的方法有哪些？相关文章，一起来看一下吧。

本文目录一览：

• 1、微信小程序页面跳转的方法有哪些？
• 2、微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计
• 3、微信小程序webview跳转小程序内路由

微信小程序页面跳转的方法有哪些？

微信小程序路由跳转，共有三种形式，页面中使用navigator组件做页面链接形式路由跳转，js中可以使用wx.navigateTo--保留当前页面，跳转到应用内的某个页面，wx.redirectTo--关闭当前页面，跳转到应用内的某个页面wx.navigateBack()--关闭当前页面，回退前一页面。 新橄榄网

微信小程序开发系列 (四) ：微信小程序的页面跳转路由设计

笔者由于工作需要，曾经参加过一个微信小程序同 SAP 系统集成的项目，因此从零开始学习了微信小程序的开发知识。这里通过系列文章把自己所学分享出来，希望对相关学习者有所帮助。

本教程前面三篇文章：

通过本系列前面三篇文章的介绍，大家对微信小程序的视图和控制器，微信调试器的用法，以及如何消费微信平台提供的 Public API，已经有了一个最基本的认识了。在这个基础上，本文让我们进一步学习微信小程序的页面跳转路由设计。

这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图，然后实现从第一个视图到第二个视图的跳转。
首先开发第二个视图：

做过 Angular 开发的朋友们对上面的视图设计一定不会陌生。这个视图的数据源由模型 logs 提供，是一个列表结果，列表每个元素的数据源是模型 logs 里的一条记录，用 log 代表。

为了让 log 看起来显示更整齐，在 log 内容之前，显示每条 log 的索引。因为 log 的索引从 0 开始，所以用 {{index + 1}} 在索引前加一，这样显示的索引更符合普通人的阅读习惯。

这个视图的控制器：

控制器 logs.js 的实现：

在控制器里调用 Page 构造函数，给当前控制器指定名为 logs 的数据模型。
这个数据模型的值填充，通过微信框架提供的 API wx.getStorageSync 来获取。

wx.getStorageSync 的含义在微信小程序 官网 上有定义：从本地缓存中同步获取指定 key 对应的内容。

第二个视图的 UI 和控制器都开发完毕，剩下的事情就是在第一个视图里定义一个触发点，让它能触发到第二个视图的跳转。
我在第一个视图上通过属性 bindtap 绑定了一个点击函数 bindViewTap :

bindViewTap 在第一个控制器 index.js 里的实现：

跳转还是通过微信小程序提供的 API wx.navigateTo :

保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面。

学习了微信小程序页面路由跳转之后，我们来进行一个实际的需求开发。

效果：我在手机上打开微信小程序，自动显示出我当前所在的地理位置：

具体步骤：

ReservationService.getGeocode 的实现：

看下面一个使用高德地图 API 将经纬度转换成文字描述的地址的例子，使用 postman 发送请求：

API 响应：

假设我用 vue 开发了一个 web 应用,需要在手机微信里访问并调试, 可以按照本文介绍的步骤,使用微信开发者工具来调试。

假设我的 web 应用的访问入口是如下公众号菜单的"预约"按钮:

那么为了能够在微信开发者工具里调试,需要首先进入该公众号的后台,在 web 开发者工具里,将开发者本人的微信号添加进去:

点击"绑定开发者账号":

输入待绑定的微信账号:

点击绑定,该微信号会收到一条消息,询问是否绑定:

点击同意操作完成绑定。

接下来, 把要调试的 web 应用的 url 放到微信开发者工具地址栏里，回车之后，微信开发者工具就会弹出一个询问窗口，点击 Allow 之后，就可以在微信开发者工具提供的类似 Chrome 开发者工具调试器一样的界面里进行单步调试了。

这个粘贴到地址栏的 url 很有讲究。



其中 appid= 后面的值，是从微信公众号控制台里拷贝出来的 appid ：

redirect_uri, 即为我们开发的 web 应用，部署到服务器之后生成的 url，需要经过 url encode 处理：


这个 url 准备好之后，将其粘贴到微信开发者工具地址栏里，回车，即可看到一个对话窗口，要求获得我们公开信息的许可：

点击 Allow 之后，就可以像使用 Chrome 开发者工具的调试器一样，在微信开发者工具里进行单步调试了：

本文首先介绍了微信小程序多页面内的路由跳转设计，接着通过获得手机当前经纬度并转换成地址的需求实现，进一步深入了解了微信小程序如何消费微信平台提供 Public API 的方法。

本教程前面三篇文章：

微信小程序webview跳转小程序内路由

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。同时提供一系列工具帮助开发者快速接入并完成小程序开发。关于如何注册配置就不多言了，本文主要还是体验了下 web-view 的功能。

有了这个组件之后，小程序可以很好的嵌入一些页面，可以环境小程序 size 告急的问题，同样也使开发更加便捷，毕竟小程序开发者基本都对前端开发较为了解。

说再多还是需要去看官方文档， web-view文档 ,

首先就需要注意：兼容问题， 版本库和对应版本比例

目前而言，基本 80% 的用户会升级微信，所以其实不必担心版本问题，官方截止 2017-12-01 提供的数据也说明 88% 的用户支持 web-view 。

web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面；

属性： src 是 String 类型，是一个网站的 url ，默认值是 none ， webview 指向网页的链接。需登录小程序管理后台配置域名白名单。

可以配合 Page 实例的 onLoad 方法来获取 url 的具体值，也就是一个微信小程序页面中只有一个 web-view ，但是这个 web-view 的内容可以根据上一个页面传递的参数来获取页面 URL ，后面会讲如何实践，

官方提供如下接口：

1. 由小程序到 web-view ,其实本质上 WEB-VIEW 也是小程序的一个页面，所以小程序到 web-view 是正常的小程序间的通信，通过 wx.navigateTo 、 wx.redirectTo ，带上 url 参数, query 参数就像正常 url 的参数一样跟着后面，然后在 web-view 的页面的 Page 实例里面通过 onLoad 的方法的参数来获取 url 的值，设置给 web-view 的 src 属性为改值即可。
2. 由 web-view 到小程序，由于在 web-view 的跳转通常是在 src 对应的网页中的操作来处理的，所以需要结合 jssdk 来处理，不需要 wx.config 配置，直接通过 script 标签来引入 [ ]( %3A//res.wx.qq.com/open/js/jweixin-1.3.0.js ) ，就可以使用 wx.miniProgram.navigateTo 、 wx.miniProgram.navigateBack 、 wx.miniProgram.switchTab 、 wx.miniProgram.reLaunch 、 wx.miniProgram.redirectTo 接口，就像小程序之间的跳转一样，单是只能在当前小程序页面内跳转。

// web-view下的页面内 console.log(window.__wxjs_environment === 'miniprogram') // true

在目前实践了部分 web-view 的功能，

在这个 web-view 中，指向的就是 的内容，所以在在 中跳转出回到小程序，需要修改 中的 JavaScript ,

如果需要使用一些其他的的 jssdk 的方法，那就需要参照公众号的开发配置了。

由于很多使用中的一些问题

以上就是新橄榄网小编给大家带来的微信小程序页面跳转的方法有哪些？，希望能对大家有所帮助。