html5跳转小程序wx-open-launch-weapp踩坑


Posted in HTML / CSS onDecember 02, 2020

因为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标签的问题

<div 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>
          <div class="jump-btn">打开小程序</div>
        </script>
      </wx-open-launch-weapp>
    </div>

这样基本功能就实现了,但是样式没法居中,在里面写的style很多不生效,最后解决方案是: 给开放标签外部套一个div 给div写样式,开放标签本身也可以通过ID选择器直接写样式, 至此开发完成,后续老板想在created中直接模拟点击按钮唤起小程序,试了ref获取dom后调用click方法可是不生效,发现论坛上也没有相关解决方案,微信开放社区中也有相关问题挂起并未解决,大家要是有什么好的方法可以下面讨论下一起解决下

另附微信开放社区问题挂起的地址https://developers.weixin.qq.com/community/develop/doc/0004604a1d8df03099ba91c965b400

到此这篇关于html5跳转小程序wx-open-launch-weapp踩坑 的文章就介绍到这了,更多相关html5跳转小程序内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
推荐10个CSS3 制作的创意下拉菜单效果
Feb 11 HTML / CSS
纯CSS3实现滚动的齿轮动画效果
Jun 05 HTML / CSS
实例教程 纯CSS3打造非常炫的加载动画效果
Nov 05 HTML / CSS
一款纯css3实现的tab选项卡的实列教程
Dec 11 HTML / CSS
css3边框_动力节点Java学院整理
Jul 11 HTML / CSS
利用HTML5画出一个坦克的形状具体实现代码
Jun 20 HTML / CSS
html5中svg canvas和图片之间相互转化思路代码
Jan 24 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
原生 JS+CSS+HTML 实现时序图的方法
Jul 31 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
Bootstrap File Input文件上传组件
Dec 01 #HTML / CSS
HTML5单选框、复选框、下拉菜单、文本域的实现代码
Dec 01 #HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
Nov 30 #HTML / CSS
使用HTML5加载音频和视频的实现代码
Nov 30 #HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 #HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 #HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 #HTML / CSS
You might like
ThinkPHP的L方法使用简介
2014/06/18 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
微信公众平台开发教程④ ThinkPHP框架下微信支付功能图文详解
2019/04/10 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
理解Javascript_01_理解内存分配原理分析
2010/10/11 Javascript
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
详谈javascript中DOM的基本属性
2015/02/26 Javascript
javascript原始值和对象引用实例分析
2015/04/25 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
js验证真实姓名与身份证号,手机号的简单实例
2016/07/18 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
JavaScript触发onScroll事件的函数节流详解
2016/12/14 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
JavaScript实现精美个性导航栏筋斗云效果
2017/10/29 Javascript
详解基于Node.js的HTTP/2 Server实践
2018/05/31 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
Python网站验证码识别
2016/01/25 Python
Python使用Matplotlib模块时坐标轴标题中文及各种特殊符号显示方法
2018/05/04 Python
Pytorch 使用不同版本的cuda的方法步骤
2020/04/02 Python
Python图片处理模块PIL操作方法(pillow)
2020/04/07 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
python编写实现抽奖器
2020/09/10 Python
python 获取域名到期时间的方法步骤
2021/02/10 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
关于HTML5的安全问题开发人员需要牢记的
2012/06/21 HTML / CSS
南非领先的在线旅行社:Travelstart南非
2016/09/04 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
P/Invoke是什么
2015/07/31 面试题
乡村文明行动实施方案
2014/03/29 职场文书
大学生自我推荐信范文
2015/03/24 职场文书
详解Javascript实践中的命令模式
2021/05/05 Javascript