uniapp 微信公众号H5/app/小程序跳转小程序

news2024/12/24 9:07:34

1.微信公众号H5跳转小程序使用微信标签wx-open-launch-weapp

a.在init.vue使用标签(要实现跳转的页面)
		<wx-open-launch-weapp
            id="launch-btn"
            style="width: 100%; display: block"
            :appid="pageParam.appId"
            :path="pageParam.path" >
            <script type="text/wxtag-template">
              <view style="border: 2rpx solid rgb(73, 162, 238) !important;border-radius: 34rpx;color: rgb(73, 162, 238);padding: 10rpx 10rpx;text-align: center;font-weight: 200;font-size: 32rpx;" class="realNameAuth">前往实名</view></script>
         </wx-open-launch-weapp>
//b.从接口获取配置信息并调用,
created() {
    let query = {
      url: window.location.href,
      appId: store.state.user.appId,
    };
    if (this.payInfo.operator == 1) {
      getSignature(query)
        .then((res) => {
          let iccidNum = this.iccid.substring(0, 19);
          this.pageParam.path = "/pages/login/index?iccid=" + iccidNum;

          this.handlesWeiXin(res.data);
        })
        .catch((err) => {});
    }
  },
  //配置wx.config
    handlesWeiXin(params) {
      const { appId, nonceStr, signature, timestamp } = params; //从接口获取
      wx.config({
        // debug: true,
        appId: appId, // 必填,公众号的唯一标识
        timestamp: timestamp, // 必填,生成签名的时间戳
        nonceStr: nonceStr, // 必填,生成签名的随机串
        signature: signature, // 必填,签名
        jsApiList: ["checkJsApi"], // 必填,需要使用的JS接口列表
        openTagList: ["wx-open-launch-weapp"], // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp','wx-open-launch-app']
      });
      wx.ready(function () {
        //config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
      });
      wx.error(function (res) {
        // uni.showToast({
        //     title:res.err,
        //     duration: 500
        // });
        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
      });
    },
c.如果上述跳转没成功,那么是因为uni自带的window.wx给污染了js文件的wx全局变量;需要在APP.vue页面的method方法里面加上如下代码,并在onLaunch中调用;然后就可以跳转了
 onLaunch: function () {
    console.log("App Launch");
    this.addScript();
  },
   methods: {
    //wx.config配置无效解决---(原因是uni自带的window.wx给污染了js文件的wx全局变量)
    addScript() {
      const that = this;
      window.wx = null;
      const script1 = document.createElement("script");
      script1.type = "text/javascript";
      script1.src = "https://res.wx.qq.com/open/js/jweixin-1.6.0.js";
      document.head.appendChild(script1);
      script1.onload = function () {
        const script2 = document.createElement("script");
        script2.type = "text/javascript";
        script2.src =
          "https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js";
        document.head.appendChild(script2);

        script2.onload = function () {
          // TODO something
        };
      };
    },
  },

2.APP跳转小程序

a.通过uniapp开发的APP跳转小程序实现,首先用到APP分享功能,需要在manifest.json中APP常用配置勾选share分享中的微信分享,填上APPid
在这里插入图片描述
b.在需要跳转的按钮绑定如下方法,就可以实现跳转了

appJumpMiniPro() {
      // console.log("isok------", this.pageParam.path);
      let that = this
      // 获取分享服务列表
      plus.share.getServices(
        function (res) {
          var sweixin = null;
          for (var i = 0; i < res.length; i++) {
            var t = res[i];
            if (t.id == "weixin") {
              sweixin = t;
            }
          }
          if (sweixin) {
            sweixin.launchMiniProgram({
              id: "gh_xxxxxx", //这里写你的小程序原始id(以gh开头),可以在需要跳转的小程序中可以找到
              type: 0, //这里是不同的环境(默认0)
              path: that.pageParam.path, //这里是指定页的路径,如需传参直接字符串拼接(首页可以省略)
            });
          }else{
            plus.nativeUI.alert('当前环境不支持微信操作!')
          }
        },
        function (res) {
          console.log(JSON.stringify(res),'---9898989');
        }
      );
    },

3.小程序跳小程序,就简单很多使用下面这个方法就可以实现了

	wx.navigateToMiniProgram({
	    appId: '目标小程序appid',
	    path: '目标小程序页面路径',
	    //develop开发版;trial体验版;release正式版
	    envVersion: 'release', 
	    success(res) {
	      // 打开成功
	      console.log("跳转小程序成功!",res);
	    } 
	})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2216507.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

机器学习中的回归分析:理论与实践

引言 回归分析是统计学和机器学习中广泛使用的技术&#xff0c;主要用于建立因变量与自变量之间的关系模型。在实际应用中&#xff0c;回归分析不仅可以帮助我们理解数据&#xff0c;还能进行有效的预测。本文将深入探讨回归分析的基本概念、常用的回归算法、应用场景&#xf…

【算法题解】二分查找的经典问题解析

文章目录 什么是二分&#xff1f;关于二分的一些题目1.分巧克力解题思路编写代码 2.数组中数值和下标相等的元素3.0到n-1中缺失的数字4.数列分段 II解题思路编写代码 总结 什么是二分&#xff1f; 二分是一种思想&#xff0c;用于有序数组中快速查找目标元素。 用动图展示一下…

如何实现前端低代码?

昨天收到在后台收到一封朋友的私信。内容如下&#xff1a; 你好&#xff0c;我关注你很久了&#xff0c;看你经常在发低代码的内容&#xff0c;内容也很好&#xff0c;所以想跟您请教一下。 最近练手在写一个低代码项目&#xff0c;实现前后端可视化应用搭建 后端采用c#&#x…

过期大米被重新销往乡村学校?论EasyCVR平台如何构建校园食品卫生安全视频监管方案

近期&#xff0c;重庆市市场监管局发布的一则通报引起了社会广泛关注。通报指出&#xff0c;酉阳县某公司存在将过期大米重新包装并销往乡村学校的行为&#xff0c;这一事件再次将校园食品卫生安全问题推向了风口浪尖。 面对这样的食品安全隐患&#xff0c;如何加强监管、确保…

【linux问题】Linux命令行终端窗口的输出,显示不全问题

Linux命令行终端窗口的输出&#xff0c;显示不全问题 问题&#xff1a; 图中显示的是一个Linux命令行终端窗口&#xff0c; nmcli dev wifi 是一个命令——列出所有能用的Wi-Fi。 执行命令后&#xff0c;窗口输出了显示了所有能用的Wi-Fi网络列表。 但是在每一行末尾有一个“…

使用API有效率地管理Dynadot域名,删除域名服务器(Name Server)

前言 Dynadot是通过ICANN认证的域名注册商&#xff0c;自2002年成立以来&#xff0c;服务于全球108个国家和地区的客户&#xff0c;为数以万计的客户提供简洁&#xff0c;优惠&#xff0c;安全的域名注册以及管理服务。 Dynadot平台操作教程索引&#xff08;包括域名邮箱&…

2-STM32入门

STM32入门 意法半导体公司推出STM32芯片。 只需动手。 第一步安装开发环境。 STM32CubeIDE 点灯大师 1.新建工程 File -> New -> STM32 Project 选择自己的开发版型号&#xff0c;输入项目名称&#xff0c;创建一个STM32工程。 点亮红色小灯的引脚为PB0(不了解的…

头戴式耳机性价比高的品牌有哪些?五款头戴式耳机200元左右推荐

耳机作为最被广大用户接受的数码产品&#xff0c;相信很多小伙伴都会拥有一个&#xff0c;甚至多个。但…在众多耳机样式中&#xff0c;如果论音质&#xff0c;同价位中头戴式应该是最好的&#xff0c;毕竟全包耳设计&#xff0c;能够让其有效隔绝外界噪音&#xff0c;实现更加…

svg全链路流程轨迹

直接上效果 <template><div class"right-page"><div class"container"><div class"line-wrap"><svgversion"1.1"xmlns"http://www.w3.org/2000/svg"xmlns:xlink"http://www.w3.org/1999/…

如何在极速浏览器中实现谷歌浏览器的扩展功能

在当今数字化时代&#xff0c;浏览器扩展功能极大地增强了我们的在线体验。尤其是谷歌浏览器&#xff0c;以其丰富的扩展生态而闻名。但是&#xff0c;如果你想在极速浏览器中使用这些谷歌浏览器的扩展功能&#xff0c;该怎么办呢&#xff1f;本文将为你详细解析如何实现这一目…

【Golang】Go语言http编程底层逻辑实现原理与实战

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

前端全栈混合之路Deno篇:Deno2.0与Bun对比,谁更胜一筹?它们分别适合怎样的项目,谁更适合前端转全栈?

在前端全栈开发中&#xff0c;工具的不断演变让开发者们始终在寻找更高效、更现代化的解决方案。继Node.js之后&#xff0c;Deno和Bun 成为了两个比较火热的运行时。Deno2.0的近期的发布让它在性能和兼容性方面大幅提升-尤其是兼容了npm包&#xff08;但我感觉应该不是全部兼容…

Linux源码阅读笔记-设备驱动程序

基础知识 Linux 内核输入子系统是对分散、多种不同类别的输入设备&#xff08;鼠标、键盘、触摸屏、手写板等&#xff09;进行统一的驱动程序。优势&#xff1a;统一物理形态各异相似输入设备处理功能&#xff1b;提供分发输入报告给用户应用程序的简单事件接口&#xff1b;抽…

DW-大模型生图安全疫苗注入作业记录

Task1.跑通baseline Task2.赛题评测方法 //------------------------------------------------------------------------- Task1-BaseLine 创建实例后与你运行代码&#xff0c;git clone model 太慢了 上modelspace 找到通义千问下载 模型下载慢问题 解决办法 modelscope do…

【数据分析】估算问题(费米估算问题)

1. 费米估算 费米估算问题是一种估算方法&#xff0c;它要求在没有足够信息的情况下&#xff0c;通过合理的假设和简化模型来计算一个复杂问题的大致答案。这种估算方法以意大利物理学家恩里科费米命名&#xff0c;他以能够在没有精确数据的情况下进行快速而准确的估算而闻名。…

ssm基于Web的老年公寓信息管理+jsp

系统包含&#xff1a;源码论文 所用技术&#xff1a;SpringBootVueSSMMybatisMysql 免费提供给大家参考或者学习&#xff0c;获取源码请私聊我 需要定制请私聊 目 录 目 录 III 第1章 绪论 1 1.1 课题背景 1 1.2 课题意义 1 1.3 研究内容 2 第2章 开发环境与技术 3 …

web3还未真正普及,网页已经漂亮的不像话了。

尽管 Web3 还未真正普及开来&#xff0c;但如今的网页已经呈现出令人惊叹的美丽景象。设计师们凭借着先进的技术和无限的创意&#xff0c;打造出一个个精美绝伦的网页界面。 色彩的搭配和谐而富有吸引力&#xff0c;布局合理且充满艺术感。动画效果生动活泼&#xff0c;为用户…

YOLOv8模型改进 第七讲 一种新颖的注意力机制 Outlook Attention

随着目标检测技术的不断发展&#xff0c;YOLOv8 作为最新一代的目标检测模型&#xff0c;已经在多个基准数据集上展现了其卓越的性能。然而&#xff0c;在复杂场景中&#xff0c;如何进一步提升模型的检测精度和鲁棒性依然是一个重要挑战。本文将探讨将 Outlook Attention 机制…

头戴式耳机300元预算选择有哪些?头戴式耳机300元左右五款推荐!

晚上下班或周末在家&#xff0c;想要沉浸式观影、游戏&#xff0c;肯定少不了一款头戴式耳机&#xff0c;它的两个大耳罩既不会像入耳式耳机那样对耳仓产生压迫不适感&#xff0c;也能全面包裹耳朵必要时尽可能的隔绝外界环境音&#xff0c;比那种把耳朵开放在外的骨传导耳机更…

FreeRtos到底是什么?

一&#xff0c;RTOS的全称是Real time operating system&#xff0c;中文就是实时操作系统 FreeRTOS是一个迷你的实时操作系统内核。作为一个轻量级的操作系统&#xff0c;功能包括&#xff1a;任务管理、时间管理、信号量、消息队列、内存管理、记录功能、软件定时器、协程等&…