H5跳轉(zhuǎn)微信小程序，通過獲取URL Scheme，實(shí)現(xiàn)短信跳轉(zhuǎn)小程序，微信跳轉(zhuǎn)小程序，郵件跳轉(zhuǎn)小程序，外部鏈接跳轉(zhuǎn)小程序

這篇具有很好參考價(jià)值的文章主要介紹了H5跳轉(zhuǎn)微信小程序，通過獲取URL Scheme，實(shí)現(xiàn)短信跳轉(zhuǎn)小程序，微信跳轉(zhuǎn)小程序，郵件跳轉(zhuǎn)小程序，外部鏈接跳轉(zhuǎn)小程序。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

微信urlscheme,微信小程序,小程序,微信

H5鏈接跳轉(zhuǎn)小程序有2種方式：
第一種：通過微信官方提供的標(biāo)簽wx-open-launch-weapp，打開小程序
第二種：通過獲取URL Scheme實(shí)現(xiàn)鏈接跳轉(zhuǎn)小程序

一、wx-open-launch-weapp

官方文檔https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

注意：

開放范圍：針對非個(gè)人主體小程序開放。

1、缺點(diǎn)

1）、wx-open-launch-weapp是在微信瀏覽器內(nèi)的H5頁面跳轉(zhuǎn)小程序
2）、已認(rèn)證的服務(wù)號，服務(wù)號綁定“JS接口安全域名”下的網(wǎng)頁可使用此標(biāo)簽跳轉(zhuǎn)任意合法合規(guī)的小程序。
所以在使用上我選擇了URL Scheme方式跳轉(zhuǎn)小程序
微信urlscheme,微信小程序,小程序,微信

代碼：

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打開小程序</button>
  </script>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>

在onload里進(jìn)行簽名驗(yàn)證

wx.config({
		  // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時(shí)才會打印
		  // debug: true, 
		  // 必填，公眾號的唯一標(biāo)識
		  appId: data.data.appId,
		  // 必填，生成簽名的時(shí)間戳
		  timestamp: data.data.timestamp,
		  // 必填，生成簽名的隨機(jī)串
		  nonceStr: data.data.nonceStr,
		  // 必填，簽名
		  signature: data.data.signature,
		  // 必填，需要使用的JS接口列表，且任意填寫
		  jsApiList: ['scanQRCode'],
		  // 可選，需要使用的開放標(biāo)簽列表，wx-open-launch-weapp 指H5跳轉(zhuǎn)小程序 wx-open-launch-app 指H5跳轉(zhuǎn)app
		  openTagList: ["wx-open-launch-weapp"],
		  wx.ready(function () {
		  var btn = document.getElementById('launch-btn');
		  // launch 用戶點(diǎn)擊跳轉(zhuǎn)按鈕并對確認(rèn)彈窗進(jìn)行操作后觸發(fā)
		  btn.addEventListener('launch', function (e) {
			  console.log(e,'success');
		   });
		   // error 用戶點(diǎn)擊跳轉(zhuǎn)按鈕后出現(xiàn)錯(cuò)誤
		   btn.addEventListener('error', function (e) {
			  console.log(e.detail,'fail');
		   });
	 });
	wx.error(function (res) {
		console.log(res, 'error');
	// config信息驗(yàn)證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗(yàn)證失敗，具體錯(cuò)誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名
	});

二、URL Scheme（我是通過獲取URL Scheme方法實(shí)現(xiàn)跳轉(zhuǎn)小程序的）

官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html

注意：

開放范圍：針對非個(gè)人主體小程序開放。

1、獲取URL Scheme

在2022年4月11日以前可以在小程序公眾平臺生成永久的URL Scheme
微信urlscheme,微信小程序,小程序,微信
但是在2022年4月11日之后就不在支持生成URL Scheme

微信urlscheme,微信小程序,小程序,微信
只能通過token去生成URL Scheme
1、通過小程序appid和secret密鑰獲取AccessToken
2、通過AccessToken獲取URL Scheme（配置路徑和參數(shù)）

完整代碼

<template>
  <div class="container">
    <img class="logo" src="./nyLogo.png" alt="">
    <div class="yh-name">實(shí)惠商城</div>
    <div class="miniprogram"><img src="./miniprogram.svg" alt="">小程序</div>
    <van-button class="open-miniprogram-btn" color="#58BE6B" block type="primary" @click="goMiniProgram">獲取</van-button>
  </div>
</template>

<script>
import {
  Button,
} from 'vant';
import axios from 'axios'

export default {
  name: "RegisterInfo",
  components: {
    [Button.name]: Button,
  },
  data() {

  },
  computed: {},
  mounted: function () {},
  watch: {
    'formData.cardType': function () {
      this.formData.cardno = ''
    }
  },
  methods: {
    goMiniProgram(){
      // 獲取AccessToken： auth.getAccessToken
      axios({
        url: '/cgi-bin/token?grant_type=client_credential&appid=wx222222222222222222222&secret=22222222333333333444444',
        method: 'get'
      }).then(res => {
        // 獲取URLscheme
        axios({
          url: `/wxa/generatescheme?access_token=${res.data.access_token}`,
          method: 'post',
          data: {
            "is_expire": true,
            "expire_time": new Date().getTime(),
            "jump_wxa": {
              //path為需要跳轉(zhuǎn)的小程序路徑
              "path": '/',
              //要打開的小程序版本。正式版為"release"，體驗(yàn)版為"trial"，開發(fā)版為"develop"。
              "env_version": 'trial',
              //參數(shù)跳轉(zhuǎn)過去攜帶的參數(shù)，最大1024個(gè)字符，只支持?jǐn)?shù)字，大小寫英文以及部分特殊字符
              "query": ''
            }
          }
        }).then(ret => {
          if (ret.data.errcode === 0) {
            location.href = ret.data.openlink
          }
        })
      })
    }
  },
}
</script>

<style scoped lang="less">
html,body{
  height: 100%;
}
.container {
  height: 100%;
  padding: 0.32rem;
  text-align: center;
}
.container .logo{
  width: 1.5rem;
  height: 1.5rem;
  display: inline-block;
  margin-top: 30%;
}
.container .yh-name{
  font-size: 0.4rem;
  color: #333;
  padding: 0.2rem;
}
.container .miniprogram{
  font-size: 0.32rem;
  color: #999;
  padding: 0.2rem;
}
.container .miniprogram img{
  width: 0.32rem;
  height: 0.32rem;
}
.open-miniprogram-btn{
  width: 4rem;
  height: 0.8rem;
  background-color: #58BE6B;
  color: #fff;
  border: none;
  font-size: 0.32rem;
  margin: 40% auto 0;
}
</style>

由于appid和secret寫在前端，存在暴露的情況，不安全，所以改到了后端獲取token，獲取URL Scheme

修改后代碼如下：

調(diào)后端接口，獲取URL Scheme，通過location.href實(shí)現(xiàn)跳轉(zhuǎn)文章來源地址http://www.zghlxwxcb.cn/news/detail-537625.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>實(shí)惠商城</title>
    <!--移動端適配-->
    <script>
        !function(){var a="@charset \"utf-8\";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",b=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(b),b.styleSheet)b.styleSheet.disabled||(b.styleSheet.cssText=a);else try{b.innerHTML=a}catch(c){b.innerText=a}}();!function(a,b){function c(){var b=f.getBoundingClientRect().width;b/i>540&&(b=540*i);var c=b/10;f.style.fontSize=c+"px",k.rem=a.rem=c}var d,e=a.document,f=e.documentElement,g=e.querySelector('meta[name="viewport"]'),h=e.querySelector('meta[name="flexible"]'),i=0,j=0,k=b.flexible||(b.flexible={});if(g){console.warn("灝嗘牴鎹凡鏈夌殑meta鏍囩鏉ヨ緗緝鏀炬瘮渚 ");var l=g.getAttribute("content").match(/initial\-scale=([\d\.]+)/);l&&(j=parseFloat(l[1]),i=parseInt(1/j))}else if(h){var m=h.getAttribute("content");if(m){var n=m.match(/initial\-dpr=([\d\.]+)/),o=m.match(/maximum\-dpr=([\d\.]+)/);n&&(i=parseFloat(n[1]),j=parseFloat((1/i).toFixed(2))),o&&(i=parseFloat(o[1]),j=parseFloat((1/i).toFixed(2)))}}if(!i&&!j){var p=(a.navigator.appVersion.match(/android/gi),a.navigator.appVersion.match(/iphone/gi)),q=a.devicePixelRatio;i=p?q>=3&&(!i||i>=3)?3:q>=2&&(!i||i>=2)?2:1:1,j=1/i}if(f.setAttribute("data-dpr",i),!g)if(g=e.createElement("meta"),g.setAttribute("name","viewport"),g.setAttribute("content","initial-scale="+j+", maximum-scale="+j+", minimum-scale="+j+", user-scalable=no"),f.firstElementChild)f.firstElementChild.appendChild(g);else{var r=e.createElement("div");r.appendChild(g),e.write(r.innerHTML)}a.addEventListener("resize",function(){clearTimeout(d),d=setTimeout(c,300)},!1),a.addEventListener("pageshow",function(a){a.persisted&&(clearTimeout(d),d=setTimeout(c,300))},!1),"complete"===e.readyState?e.body.style.fontSize=12*i+"px":e.addEventListener("DOMContentLoaded",function(){e.body.style.fontSize=12*i+"px"},!1),c(),k.dpr=a.dpr=i,k.refreshRem=c,k.rem2px=function(a){var b=parseFloat(a)*this.rem;return"string"==typeof a&&a.match(/rem$/)&&(b+="px"),b},k.px2rem=function(a){var b=parseFloat(a)/this.rem;return"string"==typeof a&&a.match(/px$/)&&(b+="rem"),b}}(window,window.lib||(window.lib={}));
    </script>
    <script src="./axios.min.js"></script>

    <script src="jquery-2.2.4.min.js"></script>
    <style>
    </style>
</head>
<body>
<div class="container" id="result">
</div>
</body>

<script>
    $(function () {
        var urlStr = window.location.href.split('?')[1];
        var query = encodeURIComponent(urlStr);//攜帶參數(shù)
        var expire_time = new Date().getTime();
        axios({
            url: 'https://xxxxx/WxAgentWeb/IMServlet?flag=2&path=/pages/index/index&env_version=trial&query=' + query + '&expire_time=' + expire_time,
            method: 'get'
        }).then(ret => {
            var reqData = JSON.parse(ret.data.data);
            if ('0' == reqData.errcode) {
                location.href = reqData.openlink;
            } else {
                alert(reqData.errmsg);
            }
        }).catch(err => {
            alert(err);
        })
    });
</script>
</html>

到了這里，關(guān)于H5跳轉(zhuǎn)微信小程序，通過獲取URL Scheme，實(shí)現(xiàn)短信跳轉(zhuǎn)小程序，微信跳轉(zhuǎn)小程序，郵件跳轉(zhuǎn)小程序，外部鏈接跳轉(zhuǎn)小程序的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！