h5跳转小程序短链Scheme方式

h5跳转小程序三种方式。

1 sc短链跳转

限制：
每个独立的URL Scheme被用户访问后，仅此用户可以再次访问并打开对应小程序
每天生成 URL Scheme 和 URL Link 总数量上限为50万
只能生成已发布的小程序的URL Scheme

2 引入js-web，开放标签open跳转

3 云开发开通，api调用

仅推荐1，没有长期短链存在了，最长我30天只需考量每天上限50万。

image.png

从H5跳转到小程序（获取小程序Scheme码）
https://blog.csdn.net/qiao_shi/article/details/121852432

相关准备
小程序id ：
小程序密钥 ：
备注：临时accesstoken 2小时最长

通过接口生成短链接：
1 获取accesstoken https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/mp-access-token/getAccessToken.html
2 获取短链 https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html
3 生成返回错误 https://blog.csdn.net/qiao_shi/article/details/121852432

vue文件；状态提示为uni可自行去除

<template>
  <view class="login">
    <view class="login__logo">
      <img width="100%" height="100%" :src="schoolLogo" />
    </view>
    <view class="login__btns">
      <view
        class="btn login__btn"
        :class="{ 'btn--disable': !schoolId }"
        @click="handleClick"
        >立即登录</view
      >
    </view>
    <view class="u-margin-top-80 u-text-center">
      <view style="color: #999">当前仅web调试，一般secrect放后端</view>
     <view style="color: #999">且结合文档做accesstoken缓存处理</view>
    </view>
  </view>
</template>
<script>
export default {
  name: 'Login',
  data() {
    return {
      //
      schoolId: '',
      schoolName: 'ty熊猫压缩',
      schoolLogo:
        ''https://tinypng.com/images/pro/panda-pro.png'',
    }
  },
  computed: {},
  async onLoad() {
    let timer = setTimeout(() => {
      this.schoolId = 1
    }, 300)

    uni.setNavigationBarTitle({
      title: this.schoolName,
    })
  },
  methods: {
    getAccessToken() {
      uni.request({
        url: '/api/cgi-bin/token', //仅为示例，并非真实接口地址。
        data: {
          grant_type: 'client_credential',
          appid: '小程序id',
          secret: '小程序密钥',
        },
        header: {
          'Content-Type': 'application/json',
        },
        success: (res) => {
          console.log(res.data)
          localStorage.setItem('res', res.data.access_token)
        },
      })
    },
    handleClick() {
       //  不要频繁调用会微信会给返回错的，失效时调用时存储下就行  
      //  this.getAccessToken()
    // 调试的accesstoken存str用
      let str =
        '66_A5ICn86Xb0LoX4RIME_ZNJ6Fa19qlZb0-FFrwK_4sdehua2j5Hy4PYDWReAJANGB'
      // 获取短链
      uni.request({
        url: '/api/wxa/generatescheme?access_token=' + str, //仅为示例，并非真实接口地址。
        data: {
          jump_wxa: {
            //path为需要跳转的小程序路径
            path: 'pages/login/index',
            //要打开的小程序版本。正式版为"release"，体验版为"trial"，开发版为"develop"。
            env_version: 'trial',
            //参数跳转过去携带的参数，最大1024个字符，只支持数字，大小写英文以及部分特殊字符
            query: 'merge=1&key=100000',
          },
        },
        method: 'POST',
        header: {
          'Content-Type': 'application/json',
        },
        success: (res) => {
          console.log(res.data)
          if (res.data.errcode) {
            uni.showToast({
              title: res.data.errmsg,
              icon: 'none',
              duration: 3000,
            })
          } else {
            uni.showModal({
              title: '获取的短链',
              content: res.data.openlink,
              cancelText: '取消', // 取消按钮的文字
              confirmText: '确认', // 确认按钮的文字
              showCancel: true, // 是否显示取消按钮，默认为 true
              confirmColor: '#18c183',
              // cancelColor: '#39B54A',
              success: (res2) => {
                if (res2.confirm) {
                  uni.setClipboardData({
                    data: res.data.openlink,
                  })
                  // weixin://dl/business/?t=ToaaaaakEn
                  let timer = setTimeout(() => {
                    clearTimeout(timer)
                    location.href = res.data.openlink
                  }, 500)
                  // console.log('comfirm') //点击确定之后执行的代码
                } else {
                  console.log('cancel') //点击取消之后执行的代码
                }
              },
            })
          }
        },
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.login {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  &__logo {
    position: relative;
    width: 278rpx;
    height: 278rpx;
    overflow: hidden;
    margin-top: 220rpx;
    margin-bottom: 160rpx;
  }
  &__btns {
    position: relative;
    align-items: center;
    border-radius: 45rpx;
    text-align: center;
    background: #18c183;
    color: #fff;
  }
  &__btn {
    width: 390rpx;
    height: 90rpx;
    line-height: 90rpx;
  }
}

.u-margin-top-80 {
  margin-top: 80rpx !important;
}
</style>