h5打开小程序点允许(html5跳转小程序wx-open-launch-weapp踩坑)
类别:Web前端 浏览量:1678
时间:2021-10-22 07:31:06 h5打开小程序点允许
html5跳转小程序wx-open-launch-weapp踩坑因为IOS最新版微信取消了浮窗功能,小程序后台狠毒用户反馈进入不方便了,目前公众号还支持浮窗,于是需求出来了,浮窗一个H5,在H5中一键打开小程序,阅读文档得知,微信对公众号网页开发有开放标签,可以打开App或小程序,但是过程中遇到不少坑以下为记录爬坑。
1.正常操作,公众号后台绑定域名
2.引入weixin.js 目前是1.6.0版本
3.调用wx.config 在openTagList中加入要使用的开放标签
接下来坑来了,文档上使用示例如下
<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> <script> 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>
贴在vue中 无法使用,排查发现是template标签的问题
<li class="center" style="width: 100%" ref="launchBtnHome"> <wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxx" path="pages/index/index/index" ref="launchBtn"> <script type="text/wxtag-template"> <style> .jump-btn { height: 44px; line-height: 44px; border: none; font-size: 16px; color: #ffffff; background-color: #f94048; text-align: center; } </style> <li class="jump-btn">打开小程序</li> </script> </wx-open-launch-weapp> </li>
这样基本功能就实现了,但是样式没法居中,在里面写的style很多不生效,最后解决方案是: 给开放标签外部套一个li 给li写样式,开放标签本身也可以通过ID选择器直接写样式, 至此开发完成,后续老板想在created中直接模拟点击按钮唤起小程序,试了ref获取dom后调用click方法可是不生效,发现论坛上也没有相关解决方案,微信开放社区中也有相关问题挂起并未解决,大家要是有什么好的方法可以下面讨论下一起解决下
另附微信开放社区问题挂起的地址https://developers.weixin.qq.com/community/develop/doc/0004604a1d8df03099ba91c965b400
到此这篇关于html5跳转小程序wx-open-launch-weapp踩坑 的文章就介绍到这了,更多相关html5跳转小程序内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html元素和属性的区别(HTML5 HTMLCollection和NodeList的区别详解)
- html5基本代码文字颜色(html5默认气泡修改的代码详解)
- html5页面布局框架(html5移动端自适应布局的实现)
- html5的表单怎么写(HTML5新增form控件和表单属性实例代码详解)
- html5 postMessage(html5关于外链嵌入页面通信问题postMessage解决跨域通信)
- php 处理html表单(PHP使用HTML5 FormData对象提交表单操作示例)
- html5播放代码(html5 video全屏播放/自动播放的实现示例)
- html5canvas怎么改扇形起始角(HTML5 Canvas实现放大镜效果示例)
- html5 video标签
- HTML5离线缓存
- html5的文件类型声明(浅析HTML5中的download属性使用)
- HTML5面试题
- html5input标签的默认属性(移动端HTML5 input常见问题小结)
- html5游戏新手引导开发(使用数据结构给女朋友写个Html5走迷宫游戏)
- HTML5 播放 RTSP 视频的实例代码(HTML5 播放 RTSP 视频的实例代码)
- 看完《夺冠》,黄渤的演技我实在夸不起来,彭昱畅反令人惊喜(黄渤的演技我实在夸不起来)
- 黄渤泪目 我的痴呆父亲,我内心永远的痛(黄渤泪目我的痴呆父亲)
- 蒜苔和鱿鱼尾巴一起炒,味道特别棒,又脆又嫩,有滋又有味(蒜苔和鱿鱼尾巴一起炒)
- 鱿鱼炒蒜苔不是黑暗料理,这样做清香扑鼻,鲜美脆嫩,开胃又下饭(鱿鱼炒蒜苔不是黑暗料理)
- 蒜苔炒鱿鱼(蒜苔炒鱿鱼)
- 远离 五毛食品 洛阳80后妈妈发明的 飞行棋 成校园爆款 玩具(远离五毛食品)
热门推荐
- cssfloat和position功能(理解CSS浮动float、定位position)
- python中的数据类型和数字类型(Python数据类型之Number数字操作实例详解)
- php多维数组怎么转换json(php实现的数组转xml案例分析)
- 织梦网址首页如何布局(去掉织梦建站或者仿站时首页访问地址后的index.html)
- docker安装mysql后无法连接(Docker 安装 MySQL 并实现远程连接教程)
- mysql中的默认mysql数据库作用(MySQL安装后默认自带数据库的作用详解)
- uni app开发教程(uniapp+Html5端实现PC端适配)
- html5怎么设置倾斜(HTML5 body设置自适应全屏)
- web服务器架构(常用的WEB服务器简介)
- docker swarm 集群(用Docker swarm快速部署Nebula Graph集群的教程)