js 多个小程序之间互相跳转,a小程序带参跳转到b小程序中

news/2024/7/20 0:59:18 标签: 小程序, javascript, 微信小程序

小程序中实现两个或者多个小程序之间互相跳转,a小程序带参跳转到b小程序中。
官方入口:wx.navigateToMiniProgram(Object object)

https://developers.weixin.qq.com/miniprogram/dev/api/navigate/wx.navigateToMiniProgram.html

在这里插入图片描述
实现步骤:

一、配置双方小程序的appid

a小程序:app.json: //数组是其他小程序的appid

“navigateToMiniProgramAppIdList”: [“wx344d57363fac…”]

在这里插入图片描述
b小程序中: app.json: //数组是其他小程序的appid

“navigateToMiniProgramAppIdList”: [“a小程序的appid”]
在这里插入图片描述

二、跳转- a小程序

1、页面标签跳转

<navigator 
    app-id="b小程序的appid"
    path="/pages/index/index?a=1" //b小程序的打开路径
    bindsuccess="successFun"      //跳转成功以后的回调函数
    version="develop"             //跳转 b小程序的版本号,如果是线上则不需要
    target="miniProgram" 
    open-type="navigate" 
    extra-data="{{message}}">
    跳转
</navigator>

2、js方法跳转

<button bindtap=‘goOtherPage’>点我跳转</button>


//跳转到别的小程序
goOtherPage:function() {
 
    wx.navigateToMiniProgram({
       appId: 'wx344d57363fac558a',
       path: '/pages/login/login?a=1',//跳转目标页面+携带参数
       extraData: {
           a: '123'//携带参数
        },
        envVersion: 'develop',
        success(res) {
            // 打开成功
            debugger
        }
    })
},

三、接收参数-b小程序

1、/pages/login/login?a=1 获取 a=1

***在跳转的页面里面,onLoad这个函数里面可以获取到

在这里插入图片描述
2、获取extraData

message对象获取需要在小程序B的app.js的 onshow 或者 onlaunch 函数里面获取


//login.js
Page({
    
  onLaunch: function (e) {
    let path = e.path //路由 = pages/login/login
    let obj = e.referrerInfo
    let extraData = obj.extraData  //参数
    let appID= obj.appId          //参数
 
  },
 
  onShow:function(e){
    let path = e.path //路由 = pages/login/login
    let obj = e.referrerInfo
    let extraData = obj.extraData  //参数
    let appID= obj.appId          //参数
 
 
 
    let a = extraData.a  //拿到我们a小程序传的值了
  }
 
 
})

http://www.niftyadmin.cn/n/1553.html

相关文章

Java类的生命周期和子类实例化对象的过程

一、类的生命周期 1.加载 ①找到需要加载的类并把类的信息加载到jvm的方法中&#xff0c;然后在堆区中实例化一个java.lang.Class对象&#xff0c;作为方法区中这个类的信息入口 ②类的加载方式 据类的全路径名找到相应的class文件&#xff0c;然后从class文件中读取文件内容 从…

C6678/C6657+ZYNQ/K7/A7 FPGA+AD+北斗的软硬件设计方案

针对当前北斗导航定位接收机在高动态和复杂电磁环境下定位精度不高的问题&#xff0c;本文在了解卫星导航原理的基础上&#xff0c;介绍了一种基于DSPFPGA 的嵌入式北斗导航接收机的设计&#xff0c;以满足在高动态和复杂电磁环境下无人机、单兵、机器人等高精度导航定位的要求…

客快物流大数据项目(八十二):Kudu的读写原理

Kudu的读写原理 一、​​​​​​​工作模式 Kudu的工作模式如下图&#xff0c;有些在上面的内容中已经介绍了&#xff0c;这里简单标注一下&#xff1a; 每个kudu table按照hash或range分区为多个tablet&#xff1b;每个tablet中包含一个MemRowSet以及多个DiskRowSet&#x…

双指针总结

双指针的作用&#xff1a; 通过两个指针在一个for循环下完成两个for循环的工作。 如果存在在每次循环中都使用erase函数的情况&#xff0c;就可以用双指针法降低时间复杂度&#xff0c;实现erase的效果。 数组 例题&#xff1a;27. 移除元素 - LeetCode 在移除数组元素时&…

git cherry-pick 报错 fatal: bad object [commitID]

背景 项目不同模块的功能建立了不同的分支进行开发&#xff0c;后期要将这部分代码从附属分支往主分支上合并&#xff0c;合并过程中出现这个问题&#xff0c;特此纪要&#xff01; 问题 git cherry-pick [commitID]时报错&#xff1f; 错误图录&#xff1a; 说明 cherry-pick做…

搭建自己的电影网站 3 (使用cpolar发布本地maccms10网站)

在之前的介绍中&#xff0c;我们向大家详细展示了如何在本地搭建起一个电影网站&#xff0c;并在本地进行了一些基本设置&#xff0c;使我们的电影网站看起来也能像点样。在我们本地网站搭建完成后&#xff0c;就需要使用cpolar建立的内网穿透数据隧道&#xff0c;将其发布到公…

设计模式-单例模式-注册式单例模式-枚举式单例模式和容器式单例模式在Java中的使用示例

场景 设计模式-单例模式-饿汉式单例模式、懒汉式单例模式、静态内部类在Java中的使用示例&#xff1a; 设计模式-单例模式-饿汉式单例模式、懒汉式单例模式、静态内部类在Java中的使用示例_霸道流氓气质的博客-CSDN博客 上面讲了单例模式的三种方式&#xff0c;另外还有一种…

应用软件漏洞排名

摘要 随着计算机网络技术的发展&#xff0c;全球互联网 体量急速膨胀&#xff0c;网络安全形势日益严峻&#xff0c;国家政治、经济、 文化、社会及公民在网络空间的合法权益面临严峻挑战。近些年来安全漏洞数量呈现递增趋势&#xff0c;基于漏 洞的网络安全事件层出不穷&…