小程序跳转:云开发之h5跳小程序

7 篇文章 0 订阅
7 篇文章 0 订阅
本文讲述了抖音通过H5页面中转微信小程序的实现过程,强调真机测试的重要性,并揭示了wx-open-launch-weapp在不同环境下的显示问题。作者还探讨了使用a标签作为替代方法可能导致的问题以及相关文档和博客资源。
摘要由CSDN通过智能技术生成

背景:

抖音通过链接跳转微信小程序。考虑使用h5页面中转实现,下面是实现步骤。

官方的文档上面写的还是比较详细的,可以仔细阅读,按照步骤去操作。

实践总结:

测试必须使用真机测试,模拟器之类的全部不行,只能是辅助开发。

h5页面放在云开发中的静态网站上,此种方式仅仅会导致在PC端通过链接打开,会停留在h5页面。配置的wx-open-launch-weapp开放标签按钮,需要主动点击才会打开目标小程序,避免了无感知和某些政策审核问题。

经过测试,发现中转的h5页面也可以放在自己公司的静态服务器上面,但带来的问题是在手机端微信内通过链接打开h5页,wx-open-launch-weapp开放标签按钮不显示,没有办法去到小程序。后面想到改用a标签,此种方式可以实现跳转,但是在一些机器上面(特别是安卓),会直接跳转到微信并打开目标小程序。如果是在PC端通过链接打开,会在h5页面自动跳转到空白页(blocked)

问题:

wx-open-launch-weapp开放标签按钮不显示,下面是一些参考文章。

微信官方开放标签使用文档地址 目录 | 微信开放文档

小程序跳转:h5避免中间页直接打开微信小程序_url link 跳转怎么去除中间页-CSDN博客

小程序跳转:云开发之h5跳小程序_新建一个云函数,名为 public,然后将其 index.js 设为以下内容:-CSDN博客

vue中使用wx-open-launch-weapp开放标签按钮不显示问题 | 微信开放社区

  • 11
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是实现 H5 网页跳转微信小程序的完整代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>跳转小程序</title> </head> <body> <button onclick="jumpToMiniProgram()">跳转到微信小程序</button> <script> // 小程序的 appid var appid = '小程序的appid'; // 跳转小程序的页面路径 var path = '/pages/index/index'; // 监听“跳转小程序”的按钮点击事件 function jumpToMiniProgram() { // 判断是否在微信浏览器中打开 if (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') { // 如果在微信浏览器中打开,则使用微信 JS-SDK 跳转 // 获取微信 JS-SDK 的配置信息 var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://yourserver/getJsSdkConfigInfo.php?url=' + encodeURIComponent(location.href.split('#')[0]), true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); if (data && data.appId) { // 配置微信 JS-SDK 的权限验证参数 wx.config({ debug: false, appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ['checkJsApi', 'chooseImage', 'previewImage', 'uploadImage', 'downloadImage', 'getNetworkType', 'getLocation', 'hideOptionMenu', 'showOptionMenu', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem', 'closeWindow', 'scanQRCode', 'chooseWXPay', 'openProductSpecificView', 'addCard', 'chooseCard', 'openCard', 'openLocation', 'onMenuShareTimeline', 'onMenuShareAppMessage'] }); // 配置微信 JS-SDK 的权限验证成功后的回调函数 wx.ready(function () { // 调用微信 JS-SDK 的跳转小程序接口 wx.miniProgram.navigateTo({ appId: appid, path: path, extraData: { // 携带的参数 key1: 'value1', key2: 'value2' }, success: function () { // 跳转成功的回调函数 } }); }); } } }; xhr.send(); } else { // 如果没有在微信浏览器中打开,则提示用户在微信中打开 alert('请在微信中打开!'); } } </script> <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script> </body> </html> ``` 需要注意的是,该代码需要在微信公众平台中进行配置,具体可以参考 [微信官方文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_JS-SDK.html)。同时,该代码需要在服务器中进行部署,具体可以参考 [微信官方文档](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Platform.html)。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值