首页 > 软件系统 > 小程序 > 小程序中的页面跳转
2021
01-08

小程序中的页面跳转

小程序内部跳转

wx.switchTab(object):跳转到tabBar页面(需在app.json的tabBar字段定义),并关闭其他所有非tabBar页面,路径后不能带参数
wx.reLaunch(object):关闭所有页面,打开到应用内的某个页面,路径后可以带参数
wx.redirectTo(object):关闭当前页面,跳转到应用内的某个非tabBar页面,路径后可以带参数
wx.navigateTo(object):保留当前页面,跳转到应用内的某个非tabBar页面,路径后可以带参数

    events:Object,页面间通信接口,用于监听被打开页面发送到当前页面的数据。

wx.navigateBack(object):关闭当前页面,并后退指定页面数,delta属性(默认1)表示后退的页面数,如果大于现有页面数,则返回到首页

    url:string,要跳转的页面路径,参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔;如 'path?key=value&key2=value2'
    success(event):接口调用成功的回调函数
    fail(event):接口调用失败的回调函数
    complete(event):接口调用结束的回调函数(调用成功、失败都会执行)

跳转完成后再目标页面js文件中使用onLoad函数获取参数及参数值

Page({
    onLoad:function(option){
        console.log(option)
        this.setData({
            url:option.url
        })
    }
})
参数option为一个object包含所有传递的参数和参数值

小程序之间跳转

wx.navigateToMiniProgram(object):打开另一个小程序

    appId:string,要打开的小程序appId
    path:string,打开的页面路径,如果为空则打开首页
        path中?后面的部分会成为query
        在小程序的App.onLaunch、App.onShow和Page.onLoad的回调函数中可以获取到query数据。
    extraData:object,需要传递给目标小程序的数据,目标小程序可在App.onLaunch,App.onShow 中获取到这份数据
    envVersion:string(release),要打开的小程序版本。
        可选值develop(开发版)、trial(体验版)、release(正式版)
        仅当小程序为开发版或体验版次参数生效,如果版本为正式版,则打开小程序必定是正式版
    success(event):接口调用成功的回调函数
    fail(event):接口调用失败的回调函数
    complete(event):接口调用结束的回调函数(调用成功、失败都会执行)

wx.navigateBackMiniProgram(object):返回到上一个小程序。只有在当前小程序是被其他小程序打开时可以调用成功

    extraData:Object({}),需要返回给跳转目标小程序的数据,跳转目标小程序可在App.onShow中获取到这份数据。
    success(event):接口调用成功的回调函数
    fail(event):接口调用失败的回调函数
    complete(event):接口调用结束的回调函数(调用成功、失败都会执行)

组件navigator

用于页面链接,该组件的属性:

target:string(self),在哪个目标上发生跳转,可选值self(当前小程序),miniProgram(其他小程序)
    当target值为miniProgram时的附加属性:
    app-id:string,要打开的小程序appId
    path:string,打开的页面路径,如果为空则打开首页
    extra-data:object:需要传递给目标小程序的数据,目标小程序可在App.onLaunch(),App.onShow()中获取到这份数据
    version:string(release),要打开的小程序版本
        可选值develop(开发版)、trial(体验版)、release(正式版)
        仅当小程序为开发版或体验版次参数生效,如果版本为正式版,则打开小程序必定是正式版
    bindsuccess:string,跳转小程序成功
    bindfail:string,跳转小程序失败
    bindcomplete:string,跳转小程序完成
url:string,跳转链接地址(仅支持当前小程序内跳转)
open-type:string(navigate),跳转方式
    可选的值
    navigate:对应wx.navigateTo或wx.navigateToMiniProgram的功能	
    redirect:对应wx.redirectTo的功能
    switchTab:对应wx.switchTab的功能
    reLaunch:对应wx.reLaunch的功能
    navigateBack:对应 wx.navigateBack的功能
    exit:退出小程序,target="miniProgram"时生效
delta:number(1),当open-type为'navigateBack'时有效,表示回退的层数
hover-class:string(navigator-hover),指定点击时的样式类,值为"none"时,没有点击态效果
hover-stop-propagation:boolean(false),指定是否阻止本节点的祖先节点出现点击态
hover-start-time:number(50),按住后多少毫秒出现点击态
hover-stay-time:numbe(600),手指松开后点击态保留多少毫秒

组件web-view

是承载网页的容器,会自动铺满整个小程序页面,个人类型的小程序暂不支持使用,小程序插件中不能使用

该组件的属性:

src:string,webview指向网页的链接。
    可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。
bindmessage:网页向小程序postMessage时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。
    e.detail = { data },data是多次 postMessage 的参数组成的数组
bindload:网页加载成功时候触发此事件,e.detail={src}
binderror:网页加载失败的时候触发此事件,e.detail={src}
最后编辑:
作者:qingheluo
这个作者貌似有点懒,什么都没有留下。

留下一个回复

你的email不会被公开。