提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
前言
由于微信官方限制了URL Scheme跳轉，本文實現(xiàn)的是html跳轉微信小程序，僅限微信內部調轉。如果需要外部跳轉微信小程序，可使用urlscheme.generate，后端獲取openlink官方文檔。短信、網頁場景的話建議使用openlink。
提示：以下是本篇文章正文內容，下面案例可供參考
一、開發(fā)前準備
1.擁有一個認證的微信公眾號（是公眾號不是訂閱號）
2.公眾號關聯(lián)（）微信小程序（關聯(lián)方法可以登錄微信公眾平臺查找）
3.配置IP白名單（也在微信公眾平臺）；
4.配置js安全域名（也在微信公眾平臺，需要把一個文件放在你的本地服務上，其實也可以寫一個request。具體流程百度一下）
二、前端
1.官方文檔鏈接: 點擊這里
代碼如下（示例）：
<wx-open-launch-weapp id="launch-btn" username="gh_*****" path="pages/home/home"> <template> <!-- 樣式方法 --> <style> </style> <div class="btn-card"><h5 class="btn">打開小程序</h5></div> </template> </wx-open-launch-weapp>導入<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script><
說明一下：建議看官方文檔（雖然文檔垃圾一bi）。
1.標簽是微信的所以我們要引入jwei-xin-1.6.0.js
2.username是小程序原始id，gh_開頭的（點你的小程序-更多資料，就可以就看到了
3.template里放的是打開小程序的那個按鈕，這里有個巨坑！按鈕不顯示的問題：要先wx.config簽名驗證成功它才會顯示出來，所以我們要在onload里進行簽名驗證。如果你是云開發(fā)的話，就不需要簽名了。
2.簽名wx.config
代碼如下（示例）：
wx.config({
// 開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會打印
// debug: true,
// 必填，公眾號的唯一標識
appId: data.data.appId,
// 必填，生成簽名的時間戳
timestamp: data.data.timestamp,
// 必填，生成簽名的隨機串
nonceStr: data.data.nonceStr,
// 必填，簽名
signature: data.data.signature,
// 必填，需要使用的JS接口列表，且任意填寫
jsApiList: ['scanQRCode'],
// 可選，需要使用的開放標簽列表，wx-open-launch-weapp 指H5跳轉小程序 wx-open-launch-app 指H5跳轉app
openTagList: ["wx-open-launch-weapp"],
wx.ready(function () {
var btn = document.getElementById('launch-btn');
// launch 用戶點擊跳轉按鈕并對確認彈窗進行操作后觸發(fā)
btn.addEventListener('launch', function (e) {
console.log(e,'success');
});
// error 用戶點擊跳轉按鈕后出現(xiàn)錯誤
btn.addEventListener('error', function (e) {
console.log(e.detail,'fail');
});
});
wx.error(function (res) {
console.log(res, 'error');
// config信息驗證失敗會執(zhí)行error函數，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數中查看，對于SPA可以在這里更新簽名
});1.這個就是簽名了，可以用ajax請求后臺拿到timestamp，nonceStr，signature，
2.拿到signature后可以在微信官方驗證一下鏈接: 簽名驗證
2.打開debug：true，失敗的話會返回錯誤信息的。我這里是js安全域名沒配置
3.成功的話他會返回errMsg：config：ok，然后標簽按鈕就會顯示出來，點擊就可以跳轉了，跳不了的話，btn.addEventListener（）它會返回錯誤信息給你的
三、后端
后端主要就是一個獲取簽名返回給前端進行驗證的一個作用了，步驟的話：
1.獲取微信access_token
2.用access_token獲取jsapi_ticket
3.對jsapi_ticket等字段拼接進行sha1算法得到singature，返回給前端
1.獲取access_token鏈接: 官方文檔
// An highlighted blockpublic static String getAccessToken() {
String access_token = "";
String grant_type = "client_credential";//獲取access_token填寫client_credential
String AppId="APPID";//第三方用戶唯一憑證
String secret="APPSECRET";//第三方用戶唯一憑證密鑰，即appsecret
//這個url鏈接地址和參數皆不能變
String url = "https://api.weixin.qq.com/cgi-bin/token?grant_type="+grant_type+"&appid="+AppId+"&secret="+secret;
try {
URL urlGet = new URL(url);
HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
http.setRequestMethod("GET"); // 必須是get方式請求
http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");
http.setDoOutput(true);
http.setDoInput(true);
System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 連接超時30秒
System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 讀取超時30秒
http.connect();
InputStream is = http.getInputStream();
int size = is.available();
byte[] jsonBytes = new byte[size];
is.read(jsonBytes);
String message = new String(jsonBytes, "UTF-8");
JSONObject demoJson = JSONObject.fromObject(message);
access_token = demoJson.getString("access_token");
is.close();
} catch (Exception e) {
e.printStackTrace();
}
return access_token;}2.獲取jsapi_ticket鏈接: 官方文檔
圖片: 
1.ticket有效期是2小時。后面你要是需要調微信api的話，有個時效性，所以我們需要放入緩存。
// An highlighted blockpublic static String getTicket(String access_token) {
String ticket = null;
String url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+ access_token +"&type=jsapi";//這個url鏈接和參數不能變
try {
URL urlGet = new URL(url);
HttpURLConnection http = (HttpURLConnection) urlGet.openConnection();
http.setRequestMethod("GET"); // 必須是get方式請求
http.setRequestProperty("Content-Type","application/x-www-form-urlencoded");
http.setDoOutput(true);
http.setDoInput(true);
System.setProperty("sun.net.client.defaultConnectTimeout", "30000");// 連接超時30秒
System.setProperty("sun.net.client.defaultReadTimeout", "30000"); // 讀取超時30秒
http.connect();
InputStream is = http.getInputStream();
int size = is.available();
byte[] jsonBytes = new byte[size];
is.read(jsonBytes);
String message = new String(jsonBytes, "UTF-8");
JSONObject demoJson = JSONObject.fromObject(message);
ticket = demoJson.getString("ticket");
is.close();
} catch (Exception e) {
e.printStackTrace();
}
return ticket;}3.sha1加密 官方文檔
注.sha1算法自己百度或者照著我這版敲（100%可用）
//時間戳和隨機字符串
String noncestr = UUID.randomUUID().toString().replace("-", "").substring(0, 16);//隨機字符串
String timestamp = String.valueOf(System.currentTimeMillis() / 1000);//時間戳
//對str進行sha1加密，注意拼接順序不可變，注意大小寫！這個url為前端動態(tài)獲取的url，url的格式要注意一下（https://******）
String str = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;圖片: 
把前端wx.config需要的這幾個值，在controller層弄個map返回給前端就行了。文章來源：http://www.zghlxwxcb.cn/news/detail-501066.html
總結
坑還是不少的
1.timeStamp大小寫要注意下。
2.appid為公眾號appid，并不是小程序的appid。
3.wx-open-launch-weapp標簽內按鈕不顯示，需要在onload先wx.config先驗簽，才會顯示。
4.js安全域名配置（直接配置一級域名就行了，不要把https：加在上面了）
5.公眾號和小程序都要是認證過且關聯(lián)的。
6.微信版本要求為：7.0.12及以上。 系統(tǒng)版本要求為：iOS 10.3及以上、Android 5.0及以上。
7.其它的暫時想不起來了，有問題百度。（上面的代碼，除sha1算法外，其它的要根據個人實際情況進行開發(fā)。不要全搬）
8.感謝閱讀~有用的話，點個贊吧，Thanks?(?ω?)?文章來源地址http://www.zghlxwxcb.cn/news/detail-501066.html
到了這里，關于HTML實現(xiàn)微信小程序跳轉全指南，附代碼示例和開發(fā)注意事項的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
