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跳转小程序内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- HTML5<q> 与 <blockquote> 的区别
- h5人脸扫描代码(Html5调用手机摄像头并实现人脸识别的实现)
- Html5中的<section>标签
- html5循环及条件指令(html5实现滑块功能之type="range"属性)
- html5字体倾斜代码(html5响应式开发自动计算fontSize的方法)
- html5代码之翻页(HTML5实现直播间评论滚动效果的代码)
- html5浏览界面怎么设置(HTML5textarea高度自适应的两种方案)
- html5定位地理位置(html5 制作地图当前定位箭头的方法示例)
- html5炫酷代码(HTML5实现视频弹幕功能)
- html5能取数据库吗(HTML5 客户端数据库简易使用:IndexedDB)
- html5怎么将字体变为红色(Html5自定义字体解决方法)
- html5canvas图形怎么打印(HTML5 Canvas 实现K线图的示例代码)
- html5如何设置标签(HTML5中在title标题标签里设置小图标的方法)
- html5带放大镜的搜索代码(html5借用repeating-linear-gradient实现一把刻度尺ruler)
- html5标签怎么做(html5用video标签流式加载的实现)
- html5带图标下拉菜单(html5小程序飞入购物车抛物线绘制运动轨迹点)
- 销 售 买 卖 你真的了解这四个字了吗(销售买)
- 谢娜是得罪快乐大本营造型师了吗 全场被黑化(谢娜是得罪快乐大本营造型师了吗)
- 前《iLOOK》时装总监 《快乐大本营》御用造型师上线(快乐大本营御用造型师上线)
- 释小龙晒杀青照片 多重身份惹观众期待(释小龙晒杀青照片)
- 《九牛之人降魔传》开机 演员祁高坤化身九牛之人除魔卫道(九牛之人降魔传开机)
- 王铲铲的致富之路无限金币卡法攻略教学(王铲铲的致富之路无限金币卡法攻略教学)
热门推荐
- docker中mysql连接命令(docker 如何修改mysql的root密码)
- centos修改网络配置(CentOS设置IP连接网络实现过程图解)
- css选择器优先级
- asp.net中Session的操作
- linux中apache是否启动怎么查看(Linux apache取消300错误页面Multiple Choices简单步骤)
- docker 退出容器详解(Docker 使用nsenter工具进入容器的操作)
- 怎么写css效果最好(提高CSS代码效率的编写技巧)
- ftp服务器两种连接方式(FTP服务器 架设考虑三方面的安全因素)
- java连接mongodb(Docker连接mongodb实现过程及代码案例)
- 阿里云负载均衡搭建教程(阿里云主机中的云解析负载均衡相关设置)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9