h5跳转小程序,云函数跳转小程序, vue3

兼容微信内跳转 和 h5跳转

第一步

在index.html 里面引入 SKD

<!-- 公众号 JSSDK -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 云开发 Web SDK -->
<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

第二步

部署云函数, 如果只用微信内打开小程序, 可以跳过这一步
文档地址
https://developers.weixin.qq.com/minigame/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
index.js

const cloud = require('wx-server-sdk')

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  return getUrlScheme(event.options)
}

async function getUrlScheme(options) {
  var url = options.url;
  var arr = url.split("?");
  var params = "";
  if(arr.length > 1){
    params = arr[1];
  } 
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: arr[0],
      query: params,
    },
    isExpire: true,
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}

第三步

这里包含了微信内跳转 和 普通浏览器跳转

<template>
  <div class="open-applet" :style="{ height: '100vh' }">
    <template v-if="isDesktop">
      <div class="wb-pc-wrap">
        <p class="message">请在手机打开网页链接</p>
      </div>
    </template>
    <template v-else>
      <template v-if="isWeixin">
        <div class="wx-h5-wrap">
          <wx-open-launch-weapp id="launch-btn" :username="username" :path="path" @ready="onReady">
            <div v-is="'script'" type="text/wxtag-template">
            <!-- 此处代码可以替换成自己的 -->
              <div :style="{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 1 }">
                <img
                  class="img-wrap"
                  src="你的图片"
                  alt=""
                  style="width: 100%"
                />
              </div>
            </div>
          </wx-open-launch-weapp>
        </div>
      </template>

      <template v-else>
        <div class="public-h5-wrap" @click="openWeapp">
          <!-- 此处代码可以替换成自己的 -->
          <img src="你的图片" alt="" />
        </div>
      </template>
    </template>
  </div>
</template>
<script lang="ts">
  import { defineComponent, PropType, onMounted, ref } from 'vue';
  import { openAppletType } from '../props';
  import { getQueryVariable } from '../util';

  export default defineComponent({
    name: 'openApplet',
    props: {
      config: {
        type: Object as PropType<openAppletType>,
        default: () => ({}),
      },
    },
    setup() {
      let cloudApi: any = {};

      const appId = ref<string>(''); // appid
      const resourceEnv = ref<string>('');// 云函数id
      const username = ref<string>('');//小程序原始id

      const isWeixin = ref<boolean>(false); // 是否微信
      const isMobile = ref<boolean>(false); // 是否手机
      const isDesktop = ref<boolean>(false); // 是否桌面
      const path = ref<any>('/pages/index/index'); // 小程序路径

      onMounted(() => {
        // 这里的逻辑是如果 链接带路径path=xxxx, 就会替换path替换掉
        const query = decodeURIComponent(window.location.search.substring(1));
        path.value = query.substring(5);
        // gdtevent();
        load();
      });

      async function load() {
        const ua: any = navigator.userAgent.toLowerCase();
        let isWXWork = ua.match(/wxwork/i) == 'wxwork'; // 企微环境
        isWeixin.value = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'; // 不是企微环境 && 是微信浏览器
        if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
          isMobile.value = true;
        } else {
          isDesktop.value = true;
        }

        // 微信环境下
        if (isWeixin.value) {
          wx.config({
            // debug: true, // 调试时可开启
            appId: appId.value,
            timestamp: 0, // 必填，填任意数字即可
            nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
            signature: 'signature', // 必填，填任意非空字符串即可
            jsApiList: ['chooseImage'], // 必填，随意一个接口即可
            openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
          });
        } else {
          // 非微信环境h5
          cloudApi = new cloud.Cloud({
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: appId.value,
            // 资源方环境 ID
            resourceEnv: resourceEnv.value,
          });

          await cloudApi.init();
          await openWeapp();
        }
      }

      // 这里是云函数调用接口
      async function openWeapp() {
        const res = await cloudApi.callFunction({
          name: 'public',
          data: {
            action: 'getUrlScheme',
            options:{
              url: path.value // 传递给云函数的跳转路径, 云函数根据路径返回openlink地址
            }
          },
        });
        // openlink是h5跳转小程序的地址
        window.location.href = res.result.openlink;
      }

      function onReady(val) {
        console.log('onReady');
      }

      return {
        openWeapp,
        isWeixin,
        isMobile,
        isDesktop,
        onReady,
        path,
        username,
      };
    },
  });
</script>
<style scoped lang="less">
  .open-applet {
    .img-wrap {
      display: block;
      margin: 0 auto;
      top: 50%;
      left: 50%;
      position: absolute;
      width: 90%;
      transform: translate(-50%, -50%);
    }

    .wx-h5-wrap,
    .public-h5-wrap {
      width: 100%;
      height: 100%;
    }

    .wb-pc-wrap {
      width: 100%;
      height: 100%;
      position: relative;

      .message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 16px;
      }
    }
  }

  wx-open-launch-weapp,
  wx-open-launch-weapp {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: pink;
    display: block;
  }
</style>
****