h5唤起微信小程序、支付宝小程序_h5拉起微信小程序
一、需求
写一个h5页面，将其生成为二维码，扫码二维码根据环境判断唤起微信小程序or支付宝小程序，跳转到指定的webview页面（小程序里嵌套的h5页面）。
已经遇见好几次这样的需求了，记录下方便以后使用
二、实现
思路：根据UA头判断环境，利用URL Scheme唤起小程序，再根据参数重定向到目标页面
获取方式
①微信小程序
链接组成：
weixin://dl/business/?appid=APPID&path=PATH&query=QUERY&env_version=ENV_VERSION
appid为微信小程序的appid;path为小程序目标页面路径，注：不要带/，query为想携带的参数，要进行url_encode。
在我的需求里，需要跳转到小程序的页面后，利用小程序的webview打开目标h5。举例：weixin://dl/business/?appid=123456&path=pages/webview/index&query=url%3D
https%3A%2F%2Fmpbeta.csdn.net%2Fscheme.html
跳转到小程序123456里，利用pages/webview/index页面（和小程序开发约定好，query传参格式也是），打开https://mpbeta.csdn.net/页面
官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html
坑：1.小程序要打开-隐私与安全 - 明文Scheme拉起此小程序的权限2.目标url在白名单中3.看清楚参数名的大小写4.通过window.location.href跳转5.跳转时使用延时（否则打不开）
setTimeout(function () { window.location.href = \"weixin://dl/business/?appid=123456&path=pages/webview/index&query=url%3Dhttps%3A%2F%2Fmpbeta.csdn.net%2Fscheme.html\"; }, 1000);②支付宝小程序
格式：alipays://platformapi/startapp?appId=[appId]&page=[page]&query=[query]
let url = `https://ds.alipay.com/?scheme=` + encodeURIComponent( \"alipays://platformapi/startapp?appId=123456&page=pages/webview/index%3Furl%3Dhttps%3A%2F%2Fmpbeta.csdn.net%2Fscheme.html\" ); window.location.replace(url);坑：看清楚和微信的参数名不一样。
官方文档：写的比vx清楚！！！
https://opensupport.alipay.com/support/FAQ/65b9bd584e1f5304773568ddprod
附上整个页面的代码
<!DOCTYPE html><html lang=\"en\"> <head> <meta charset=\"UTF-8\" /> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /> <title>我的应用</title> </head> <style> * { padding: 0; margin: 0; } html, body { width: 100%; height: 100%; } body { padding-top: 40vh; box-sizing: border-box; } .pageBox { width: 100vw; text-align: center; font-size: 20px; } </style> <body> <div class=\"pageBox\" id=\"zfb\" style=\"display: none\"> 支付宝小程序跳转中... </div> <div class=\"pageBox\" id=\"wx\" style=\"display: none\"> 微信小程序跳转中... <br /> </div> <div class=\"pageBox\" id=\"app\" style=\"display: none\"> app跳转中... <br /> </div> <div class=\"pageBox\" id=\"other\" style=\"display: none\"> 请用app、支付宝或者微信扫码 </div> </body> <script> let ua = navigator.userAgent.toLocaleLowerCase(); if (ua.includes(\"micromessenger\")) { document.getElementById(\"wx\").style.display = \"block\"; setTimeout(function () { window.location.href = \"weixin://dl/business/?appid=123456&path=pages/webview/index&query=url%3Dhttps%3A%2F%2Fmpbeta.csdn.net%2Fscheme.html\"; }, 1000); } else if (ua.includes(\"alipay\")) { document.getElementById(\"zfb\").style.display = \"block\"; //支付宝 let url = `https://ds.alipay.com/?scheme=` + encodeURIComponent( \"alipays://platformapi/startapp?appId=123456&page=pages/webview/index%3Furl%3Dhttps%3A%2F%2Fmpbeta.csdn.net%2Fscheme.html\" ); window.location.replace(url); } else if (ua.includes(\"app\")) { document.getElementById(\"app\").style.display = \"block\"; let url = \"https://mpbeta.csdn.net/\"; window.location.replace(url); } else { document.getElementById(\"other\").style.display = \"block\"; } </script></html>
