前端实现短信中的链接跳转至微信小程序

前端实现短信中的链接跳转至微信小程序

前言

注意此处的实现场景：
（1）不是：小程序内嵌h5跳转小程序
（2）不是：微信环境下的h5跳转小程序

此种场景请查看

（3）不是：短信链接-链接是URL Scheme形式跳转小程序

此处需要说明：
iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，

（4）而是：短信链接-https://xxx形式跳转小程序

一、生成URLSCheme

去微信公众平台生成小程序的urlScheme

位置：

生成：

如果没有特殊需求的话，参数不用填写，直接生成即可，默认跳转的是小程序主页面
生成后的形式大致是这样的：weixin://dl/business/?loveyou

二、h5页面的处理

<template>
  <div class="webView">  
     跳转小程序
  </div>

</template>

<script>
// 引入微信jssdk（不用）
//import wx from 'weixin-js-sdk'
import {
  getJumpConfig
} from '@/api/issue'
export default {
  data() {
    return {
      webview:''
    }
  },
  mounted() {
  	//重点来了-关键逻辑，就这一句
     location.href = 'weixin://dl/business/?loveyou'
  },
  methods: {}

</script>

注意：在这里我想说的是，不需要微信jssdk环境，就是普通的h5页面，跳转的时候会自动进入微信环境。
此处h5的作用就是跳板。

图片中的关键：

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。
Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序

三、短信中配置上h5链接

比如：

总结

以上完成之后就可以点击短信中的链接实现跳转到小程序啦。