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 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
基于DOM+CSS3实现OrgChart组织结构图插件
Mar 02 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
HTML5梦幻之旅——炫丽的流星雨效果实现过程
Aug 06 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 HTML / CSS
html5画布旋转效果示例
Jan 27 HTML / CSS
利用html+css实现菜单栏缓慢下拉效果的示例代码
Mar 30 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 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
使用PHP计算两个路径的相对路径
2013/06/14 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
Zend Framework教程之Zend_Registry对象用法分析
2016/03/22 PHP
PHP实现的随机IP函数【国内IP段】
2016/07/20 PHP
php实现登录页面的简单实例
2019/09/29 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
基于PHP实现解密或加密Cloudflar邮箱保护
2020/06/24 PHP
Nodejs中自定义事件实例
2014/06/20 NodeJs
jQuery插件pagination实现分页特效
2015/04/12 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
js模拟百度模糊搜索的实例
2017/08/04 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
基于vue cli 通过命令行传参实现多环境配置
2018/07/12 Javascript
vue.js中toast用法及使用toast弹框的实例代码
2018/08/27 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
使用vuex较为优雅的实现一个购物车功能的示例代码
2019/12/09 Javascript
js的Object.assign用法示例分析
2020/03/05 Javascript
python实现rest请求api示例
2014/04/22 Python
Python中的两个内置模块介绍
2015/04/05 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python Series从0开始索引的方法
2018/11/06 Python
Python的UTC时间转换讲解
2019/02/26 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
这可能是最好玩的python GUI入门实例(推荐)
2019/07/19 Python
浅析python表达式4+0.5值的数据类型
2020/02/26 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
Nike挪威官网:Nike.com (NO)
2018/11/26 全球购物
写给保洁员表扬信
2014/01/08 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
公诉意见书范文
2015/06/05 职场文书
《岳阳楼记》原文、译文赏析
2019/09/10 职场文书