简要
首先非常开心，微信终于支持H5 HTML页面可以跳转到小程序。又多个一个扩展功能。官方API地址
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html
一、配置“JS接口域名”公众号开发肯定需要配置安全域名的，必须
二、直接上html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" /> <title>小程序跳转测试</title> </head> <body style="text-aligin:center;"> <wx-open-launch-weapp id="launch-btn" username="gh_e16de8f****" <!-- 这里填写小程序的原始ID --> path="/pages/index/index.html"> <!-- 这里填写跳转对于小程序的页面 注意这里的 .html --> <template> <style>.btn { padding: 12px width:200px;height:50px;}</style> <button class="btn">打开小程序</button> </template> </wx-open-launch-weapp> <script src="/js/jquery-1.12.4.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <!-- 至少必须是1.6版本 --> <script> $(function () { // config 的参数以及签名= var url = location.href; $.get("url", function(response){ if(response.status == 0) { var info = response.data; wx.config({ debug: false, appId: info.appId, timestamp: info.timestamp, nonceStr: info.nonceStr, signature: info.signature, jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice", "onVoicePlayEnd", "uploadVoice", "downloadVoice", "chooseImage", "previewImage", "uploadImage", "downloadImage", "translateVoice", "getNetworkType", "openLocation", "getLocation"],//必须要不调用小程序标签渲染不出来 openTagList: ['wx-open-launch-weapp']//必须必须要不调用小程序标签渲染不出来 }); } }); //=== 获取 config 的参数以及签名=== end 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> </body> </html>完活！
总结 1、H5调用小程序开放标签<wx-open-launch-weapp>,weapp代表是H5调用标签，wx-open-launch-app是带有APP的 2、HTML中使用对应<wx-open-launch-weapp>
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/home/index.html?user=123&action=abc" > <template> //在这里单独添加设计样式 <style>.btn { padding: 12px }</style> <button class="btn">打开小程序</button> </template> </wx-open-launch-weapp>3、path:页面路径一定要加后缀.html,username：是小程序原始ID 4、config配置中一定要加入openTagList: [’wx-open-launch-weapp’] 5、微信版本要求为：7.0.12及以上。 系统版本要求为：iOS 10.3及以上、Android 5.0及以上。
