H5和小程序是属于两个不同的东西(组图)

明天有朋友遇到需求,需要用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是不可能的。

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 网站程序 H5和小程序是属于两个不同的东西(组图) https://www.wkzy.net/game/8321.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务