【小程序】页面跳转

时间 2019-11-10 标签小程序页面跳转

页面跳转

小程序页面间跳转

`wx.navigateTo(Object object)`

保留当前页面，跳转到应用内的某个页面。可是不能跳到 tabbar 页面。使用 wx.navigateBack 能够返回到原页面。javascript

属性	类型	必填	说明
url	string	是	须要跳转的应用内非 tabBar 的页面的路径, 路径后能够带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不一样参数用 & 分隔；如 'path?key=value&key2=value2'
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

wx.navigateTo({
  url: 'test?id=1' })

// test/test.js Page({ onLoad(option) { console.log(option.query) } })

`wx.switchTab(Object object)`

跳转到 tabBar 页面，并关闭其余全部非 tabBar 页面html

属性	类型	必填	说明
url	string	是	须要跳转的 tabBar 页面的路径（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数。
success	function	否	接口调用成功的回调函数
fail	function	否	接口调用失败的回调函数
complete	function	否	接口调用结束的回调函数（调用成功、失败都会执行）

{
  "tabBar": { "list": [ { "pagePath": "index", "text": "首页" }, { "pagePath": "other", "text": "其余" } ] } }

wx.switchTab({
  url: '/index' })

小程序跳转H5

小程序有一个web-view的组件，是一个能够用来承载网页的容器，会自动铺满整个小程序页面。前端

home.wxml:
<view class="container"> <navigator url="/pages/wxpage/wxpage">点击跳转到H5页面</navigator> </view> wxpage.wxml： <web-view src="https://www.tairanmall.com"></web-view>

在小程序home.wxml页面中，咱们要跳到H5的https://www.tairanmall.com页面，在home.wxml，咱们跳到一个专门用来跳转网页的容器页面wxpage.wxml。在这个页面中，有一个web-view组件，会自动铺满整个小程序页面。须要注意的是，src指向的连接，须要登陆小程序管理后台配置业务域名。java

H5跳转小程序

H5跳转到小程序的方法，有两种：web

点击手机的返回键，让它自动根据层级返回
使用JSSDK 1.3.2提供的接口返回小程序接口，须要在H5页面引入相应的js文件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>H5跳转小程序</title> </head> <body> <h1 id="el">H5跳转小程序，请在小程序中打开</h1> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> <script> document.getElementById('el').addEventListener('click', function() { // 若是在微信小程序内,跳转到小程序的页面 if (window.__wxjs_environment === 'miniprogram') { // 跳转到小程序的页面，并传递了一个type=test的参数 wx.miniProgram.navigateTo({url: '/pages/home/home?type=test' }) } else { alert('不在小程序页面中') } }) </script> </body> </html>

H5跳转小程序的参数直接拼接在URL后面，在跳转到小程序页面后，能够在onload的options中获取到传递过来的参数json

----------------------------------------小程序

小程序系列：微信小程序

前言缓存

项目结构微信

基础使用： component使用、 wxs使用、节点操做、页面跳转、缓存

前端架构浅谈

----------------------------------------