微信游览器跳转跳转APP

微信游览器跳转跳转APP
1.需要导入微信SDK
//<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
//npm 安装:npm install weixin-js-sdk --save
//配置如下
  jumpApp: async() => {
    let url = window.location.href
    const platform = uni.getSystemInfoSync().platform
    if (platform === 'ios') {
      url = uni.getStorageSync('bbcIosUrl')
    }
    try {
      const { data } = await http.request({
        url: '/p/wx/jsapi/createJsapiSignature?v='+new Date().getTime(),
        method: 'POST',
        data: url
      })
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: data.appId, // 必填,公众号的唯一标识
        timestamp: data.timestamp, // 必填,生成签名的时间戳
        nonceStr: data.nonceStr, // 必填,生成签名的随机串
        signature: data.signature, // 必填,签名,见附录1
        jsApiList: ["onMenuShareAppMessage", "openLocation", 'wx-open-launch-app','checkJsApi','updateAppMessageShareData'], // 必填,需要使用的JS接口列表, 我们这里填个这个就能唤起app了
        openTagList: ['wx-open-launch-app']// 必填,需要使用的JS接口列表,所有JS接口列表见附录2
      })
    } catch (error) {
      console.log('初始化微信SDK出现异常', e)
      return false
    }
    return new Promise((reslove, reject) => {
      wx.ready(function (e) {
        console.log('ready', e);
        reslove(true)
      });
      wx.error(function (err) {
        console.log(err, "微信跳转app报错了");
        reject(false)
      });

    })
  },
<template>
![image.png](https://upload-images.jianshu.io/upload_images/14002157-e3851366a45ceea2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)![微信图片_20250219173520.png](https://upload-images.jianshu.io/upload_images/14002157-d59245e190a3d1de.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


//配置移动APPID  https://open.weixin.qq.com/cgi-bin/frame?t=home/app_tmpl&lang=zh_CN
 <wx-open-launch-app id="launchBtn" @launch="handleLaunchFn" @error="handleErrorFn" appid="绑定APP的微信appId"
        :extinfo="opUrl" style="position: fixed;width: 171px;height: 37px; left: 4px;top: 0;z-index: 999;">
        <component :is="'script'" type="text/wxtag-template">
          <button class="linj-btn" style="
            border: none;
            padding:1px;
            font-size: 0.8rem;
            display: block;
            color: white;opacity: 0;">
            打开快快当APP
          </button>

        </component>
      </wx-open-launch-app>


</template>


//成功
const handleLaunchFn = () => {
  console.log('111111');
}
//失败
const handleErrorFn = (err) => {
  console.log('err===========================》', err);
  uni.navigateTo({
    url: '/pages/ZeroPurchase/ZeroPurchase'
  })

}

//下面是APP接收传递的参数 APP.vue入口文件
//判断是否是H5跳转的app
const jsH5Scheme = () => {
  const platform = uni.getSystemInfoSync().platform
  if (['android', 'ios'].includes(platform)) {
    if (typeof plus == 'undefined') return false
    handleArguments()
  }
}
//执行跳转App
const handleArguments = () => {
  setTimeout(() => {
    let launchInfo = plus.runtime.arguments;
    if (launchInfo) {
      let decodedUrl = decodeURIComponent(launchInfo);
      // 提取目标部分(去掉协议和域名部分)
      let targetUrl = decodedUrl?.split('https://dlchm.cn/h5/#')?.[1]
      if (!targetUrl) {//微信游览器跳转
        const dataUrl = JSON.parse(decodedUrl)
        if (dataUrl.deepLink) {
          const iosAnd = dataUrl.deepLink.split("xipuy5grf://")[1]
          uni.navigateTo({ url: '/' + iosAnd });
        }
        return
      }
      // 在此处理 shopUrl,比如跳转到指定页面
      uni.navigateTo({ url: targetUrl });
    }
  }, 200);

}

onHide(() => {
  // #ifdef APP-PLUS
  // 进行清除是因为从其他app跳过来之后,不清除的话 当app在后台自唤起的时候启动参数没有自动清空 还是原来的值
  plus.runtime.arguments = '';
  // #endif
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容