明天有朋友遇到需求,需要用H5打开小程序。而且H5和小程序属于两个不同的东西,没有交集。想了想,也没有很好的打算。这里我根据不同的场景总结了可能的解决方案。
陌陌文档涉及的内容 公众号&陌陌网页开发
它可以使用开放标签来实现。陌陌开放标签是陌陌公共平台为网页开发者提供的标签扩展集合。通过陌陌的开放标签,Web 开发者可以安全、方便地使用陌陌或系统的能力,为陌陌用户提供更好的 Web 体验。
使用步骤:
陌陌开放标签的使用步骤与陌陌的JS-SDK类似,同样需要引入JS文件等步骤。如果是公众号的网页,需要绑定一个安全的域名。如果是小程序云开发的静态网站托管的小程序网页,可以直接使用,无需绑定安全域名(即跳过下面的“第一步:绑定”)。安全域名”)。
绑定域名
登录陌陌公众平台,进入“公众号设置”的“功能设置”,填写“JS socket安全域名”。
导入 JS 文件
在需要调用 JS 套接字的页面中引入如下 JS 文件:(支持 https)
为进一步提高服务稳定性,当上述资源无法访问时,可以更改访问:(支持https)
备注:支持使用 AMD/CMD 标准模块加载方式加载。
通过config socket注入权限,验证配置并申请需要的open标签
和使用JS-SDK的配置方法一样,所有需要使用open标签的页面都必须先注入配置信息,并通过openTagList数组申请需要的open标签,否则很难使用(相同的url只需要被调用一次)。开放标签应用和JS socket应用是相互独立的,所以可以同时应用。
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [], // 必填,需要使用的JS接口列表
openTagList: [] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
通过就绪套接字处理成功验证
wx.ready(function () {
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
});
通过错误套接字处理失败的验证
wx.error(function (res) {
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
});
使用打开选项卡 wx-open-launch-weapp 跳转到小程序
.btn { padding: 12px }
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
静态网站H5跳转小程序
非个人且经过身份验证(陌陌认证)的小程序,使用云开发静态网站托管的网页,无需信号即可跳转到任何合法且合规的小程序。即可以跳转到陌陌内部浏览器H5中的小程序,也可以跳转到陌陌外部浏览器或其他部分应用(如企业陌陌、QQ等)中的陌陌小程序。
在陌陌客户端打开静态网站页面时,wx.config可以传入小程序的AppID,无需估计签名,即无信号跳转到小程序的能力。
开通静态网站,绑定自定义域名,需要在“微信开发者工具-云开发-更多-静态网站”中进行,可以有自由信令的能力。
这是文档地址
在这个方案中,我个人的理解是,如果静态网站托管在小程序云开发的静态网站上,对应的小程序可以直接用H5打开。
文档外的方案生成H5中的小程序码或小程序二维码
对于发布的小程序,可以生成小程序代码网站直接生成小程序,将小程序代码放在H5界面,扫码打开小程序。
小程序代码或小程序二维码本质上是一个链接。如果能解析这个链接,就可以直接打开小程序了,这个链接(不是图片链接而是小程序代码对应的真实链接)不知道怎么解析。
扩展一下,如果H5生成小程序代码,假设可以调用原生扫码识别能力网站直接生成小程序,直接传入小程序代码。体验应该是直接打开小程序,需要扩展原生能力。
我觉得这个方案还是可行的。
网络套接字通信
使用websocket服务可以在H5和小程序之间进行通信,在H5中不能直接打开小程序。如果只是简单的通信,可以使用websocket,而这些方案并不能真正用H5直接打开小程序。
小程序的网络视图
小程序的web-view只能使小程序打开H5,H5的域名必须是小程序的业务域名。用web-view直接打开小程序实现H5是不可能的。