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

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

html 复制代码
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>
javascript 复制代码
//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可以在这里更新签名。
      });
    },
xml 复制代码
c.如果上述跳转没成功,那么是因为uni自带的window.wx给污染了js文件的wx全局变量;需要在APP.vue页面的method方法里面加上如下代码,并在onLaunch中调用;然后就可以跳转了
javascript 复制代码
 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.在需要跳转的按钮绑定如下方法,就可以实现跳转了

javascript 复制代码
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.小程序跳小程序,就简单很多使用下面这个方法就可以实现了

javascript 复制代码
	wx.navigateToMiniProgram({
	    appId: '目标小程序appid',
	    path: '目标小程序页面路径',
	    //develop开发版;trial体验版;release正式版
	    envVersion: 'release', 
	    success(res) {
	      // 打开成功
	      console.log("跳转小程序成功!",res);
	    } 
	})
相关推荐
wechatbot88813 小时前
企业微信API开发:登录-联系人查询-消息发送完整开发流程分享
汇编·微信·自动化·企业微信·ai编程·rpa
结网的兔子20 小时前
【前端开发】Web端迁移至 uni-app 及鸿蒙扩展方案对比
前端·uni-app·harmonyos
2501_9159090621 小时前
iOS 应用反调试技详解术 检测调试器的原理与防护实践
android·ios·小程序·https·uni-app·iphone·webview
AI多Agent协作实战派1 天前
AI多Agent协作系统实战(二十八):顶栏统一战争——从1个页面异常到31个页面全量对齐
数据库·人工智能·uni-app
00后程序员张1 天前
iOS加固技术路线全面解析:Bitcode模式、源码模式与汇编模式对比及爱加密优势
android·汇编·ios·小程序·uni-app·cocoa·iphone
海纳百川·纳海川1 天前
租房行业数字化:换个思路解决“老问题”
大数据·微信小程序·小程序
上海云盾-小余2 天前
CC 高频请求 + DDoS 流量攻击实战防御:全链路 WAF 流量清洗部署完整流程
网络·爬虫·安全·小程序·ddos
2501_916008892 天前
iOS IPA文件反编译与打包操作方法,拆包分析防护和加固打包
android·macos·ios·小程序·uni-app·cocoa·iphone
2301_810313182 天前
海外教育APP定制发展现状与开发选型核心要点解析
小程序·团队开发·软件需求
name好难取诶2 天前
通过对云基座和离线基座的对比,帮助开发者理解如何在不同场景下选择合适的打包方案。 什么是“基座” 在 UniApp 中,基座(也称“ ...
开发语言·uni-app·php