uniapp开发h5,引入微信开放标签实现h5跳转小程序功能,全网最全最细踩坑记录

先贴上微信开放标签的官方文档

一、概述流程

首先需要在项目中引入微信的sdk,具体引入方式详见我写的另一篇文章,里面包含了引入sdk以及配置wx.config的详细教学以及踩坑记录。如果引入完微信sdk的前提下接下来就是根据微信文档提供的demo来引入开放标签

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [], // 必填,需要使用的JS接口列表
  openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp']
});
<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </script>
</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>

别以为就这么简单的结束了!! 接下来 才是关键的的时候!!!

上面提到的引入微信sdk文章中用自己申请的测试号进行本地测试微信sdk的接口是否可用,这种方式不能完全测试开放标签,因为微信官方提到开发使用者必须是已认证的服-务-号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。这就意味着测试号只能通过wx.config来判断微信sdk是否引入成功,但是不代表开放标签是可用的。然后之后的测试只能用公司提供的认证过的服务号来测试,也就是要发布线上然后去真机测试。

接下来是需要特别注意的点:

1、开发使用者必须是已认证的服-务-号(服务号可以置顶,订阅号不能),服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、开发使用者必须是已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
3、必须部署到正式服务器,测试公众号不显示图标。
4、必须是在已认证的服务号中做JS接口安全域名验证,“JS接口安全域名”和“IP白名单”都要,IP是指获取微信签名的服务器的IP

注意:1、2两个条件必须满足其中一个;3、4两个条件必须满足,否则标签中的按钮不会显示

 问题一:openTagList 是空数组

如果log里面返回的openTagList 是空数组的话,那么肯定是你使用的公众号,不是认证过的服务号(所以上面提到测试号是不能测试开放标签的),并且一定要用真机测试。

问题二、在Vue中使用

开放标签属于自定义标签,Vue会给予未知标签的警告,可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。 

//main.js
Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

开放标签模板中需要注意不能使用rem单位。

问题三、跳转小程序的按钮不显示、

这个引起的原因有很多种,如果wx.config配置首先都报错了,那就先解决这个,如果wx.config调用成功的前提下,那么需要检查使用的服务号是否是认证过的,服务号绑定“JS接口安全域名”下的网页才可以使用开放标签跳转任意合法合规的小程序。

动态渲染开放标签:

<div v-for="(item,index) in list" :key="index" v-html="renderDom(item)"></div>
// 动态渲染微信开发标签 跳转小程序
renderDom (item) {
  let script = document.createElement('script')  
  script.type = 'text/wxtag-template'
  let image = item.imgUrl  
  script.text = `<div style="height:100%;width:100%;text-align:center;"> <img src="${image}" width="46px" height="46px"/><p style="color: #333;font-size: 12px;">${item.name}</p></div>` 
  let html = `<wx-open-launch-weapp style="width:100%;display:block;height:100%;" username="小程序原始id"path="小程序页面路径和参数">${script.outerHTML}</wx-open-launch-weapp>`
  return html
}

最后需要注意几点:

1.微信版本要求为:7.0.12及以上。 系统版本要求为:iOS 10.3及以上、Android 5.0及以上

2.小程序的web-view不支持wx-open-launch-weapp。

到这里就结束了。主要是细心xdm。可能我的描述还有遗漏,也可能我的表述不清晰。如有疑问,可以评论区告诉我。看到必回!   码字不易,还请一键三连!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/489715.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

绘图技巧 | 双变量映射地图可视化绘制方法

本期推文我们绘制不常见的双变量主题地图&#xff0c;该类地图可以很好的在地图上用颜色展示两个变量的信息&#xff0c;相较于单一变量映射地图&#xff0c;此类地图表达的信息更加丰富和全面。本期推文主要涉及的内容如下&#xff1a; 双变量映射地图(Bivariate Choropleth M…

商城小程序项目实现监控的可观测性最佳实践

前言 微信小程序是一种轻量级的应用程序&#xff0c;用户可以在微信内直接使用&#xff0c;无需下载安装。它具有独立的开发框架和生态系统&#xff0c;支持丰富的功能和交互&#xff0c;包括社交、购物、服务等。 观测云对微信小程序的监控能够实时收集性能指标、错误日志和…

su怎么做展厅模型---模大狮模型网

要在SketchUp中创建展厅模型&#xff0c;你可以按照以下基本步骤进行&#xff1a; 绘制基本结构&#xff1a; 使用SketchUp的绘图工具(线条、矩形、圆形等)来创建展厅的基本结构&#xff0c;包括墙壁、地板和天花板等。确保按照实际尺寸和比例进行绘制。 添加家具和展品&…

Mysql新建数据库报错1044

mysql创建数据库报错 1044 - Access denied for user ‘root‘%‘ to database ‘XXX‘ 解决参考&#xff1a;MySQL新建表&#xff1a;1044 - Access denied for user ‘root‘%‘ to database ‘XXX‘终极解决方案_cannot create table [sheet]: 1044 - access denied -CSDN博…

windows允许指定IP段访问本地端口

虚拟机内部应用有时候需要访问windows的一些端口&#xff0c;例如数据库或Redis等&#xff0c;默认情况下&#xff0c;需关闭windows上的防火墙才可正常访问。本文通过在防火墙设置允许指定IP段进行访问来处理&#xff0c;不用每次操作都关闭防火墙。 入站规则-》新建规则 完成…

【Python】输出一个 Python 项目下需要哪些第三方包

方法一 pycharm 方法二 要分析一个 Python 项目下需要哪些第三方包并生成 requirements.txt 文件&#xff0c;你可以使用 pipreqs 工具。以下是具体的步骤&#xff1a; 首先&#xff0c;确保你已经安装了 pipreqs 工具。如果未安装&#xff0c;可以使用以下命令进行安装&a…

ArcGIS二次开发(一)——搭建开发环境以及第一个简单的ArcGIS Engine 程序

Arcgis10.2、Arcgis Engine10.2与Microsoft Visual Studio 2012的版本进行安装 1、推荐教程与安装包2、安装顺序3、安装成功测试VS新建项目可以创建ArcGIS项目&#xff0c;并且在VS中拖拽ArcGIS工具 4、搭建第一个简单的ArcGIS Engine 程序 ArcEngine和VS版本是有对应的&#x…

【已解决】Vue 3+TS项目,无法找到模块“XXX”的声明文件,项目报错无法找到声明文件

前言 最近在做vue 3 TS项目&#xff0c;创建项目时需要引入vue-router 4&#xff0c;在main根文件中引入路由时出现了无法找到引入文件的报错。 解决 最后发现是创建router文件中的index文件时错误的创建为了.js文件&#xff0c;但是在创建框架时默认使用的是TS。将文件类型…

Nginx log文件写入失败?log文件权限设置问题

首先,请确保在Nginx配置文件nginx.conf里允许日志写入,就是如下面这句(样例),把句前的#号去掉: access_log /home/wwwlogs/access.log;或者 access_log /home/wwwlogs/www.mysite.com/access.log;下面是log文件夹及文件权限设置。 1、wwwlogs文件夹权限设置 wwwlogs文…

【嵌入式——QT】多语言界面

【嵌入式——QT】多语言界面 多语言页面开发步骤tr()函数 多语言页面开发步骤 第一步 在你编写的代码中添加tr()函数&#xff0c;方便之后可以精准的定位到你所需要翻译的部分。 第二步 在.pro文件中添加以下代码&#xff0c;这样会让你生成相应的.ts文件&#xff0c;ts文件是…

一身素衣凭栏观景,携几缕清风伴皓月入梦

这个国风两件套真的很难不爱一套上身简直就是梦中的白月光素净优雅又不失清冷气质波浪型门襟绣加上花枝缠绕的绣花图案增添了设计感的同时又不失美感半裙做的是A摆小伞裙的版型裙摆的分割和收褶处理增加了层次感半裙里布很贴心的做了裤里&#xff0c;不易走光夏天穿上这套出街一…

宜搭低代码高级认证实操题1 todolist

进行中待办 已完成待办 待办事项 待办事项远程api和变量配置 回调函数 function didFetch(content) {//console.log(content.data);// content.b 1; 修改返回数据结构中的 b 字段为1let res content.data;let todoList [];for(let i in res){todoList.push(res[i]);}consol…

基于Springboot Vue医院管理系统+数据库脚本+文档(万字)

项目效果视频: 基于Springboot Vue医院管理系统 一、 项目介绍 角色&#xff1a;管理员、患者、医生 基于springboot vue实现的医院管理系统&#xff0c;有管理员、医生和患者三种角色。系统拥有丰富的功能&#xff0c;能够满足各类用户的需求&#xff0c;系统提供了登录和注册…

Reactor设计模式和Reactor模型

Reactor设计模式 翻译过来就是反应堆&#xff0c;所以Reactor设计模式本质是基于事件驱动。 角色 Handle&#xff08;事件&#xff09;EventHandler&#xff08;事件处理器&#xff09;ConcreteEventHandler&#xff08;具体事件处理器&#xff09;Synchronous Event Demult…

day07-缓存商品、购物车

1. 缓存菜品 1.1 问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大。 结果&#xff1a; 系统响应慢、用户体验差 1.2 实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓…

分享全栈开发医疗小程序 -带源码课件(课件无解压密码),自行速度保存

课程介绍 分享全栈开发医疗小程序 -带源码课件&#xff08;课件无解压密码&#xff09;&#xff0c;自行速度保存&#xff01;看到好多坛友都在求SpringBoot2.X Vue UniAPP&#xff0c;全栈开发医疗小程序 - 带源码课件&#xff0c;我看了一下&#xff0c;要么链接过期&…

Docker 容器编排利器 Docker Compose

文章目录 一、Docker Compose 简介二、Docker Compose 安装2.1 Mac、Windows 平台默认支持2.2 Linux 安装(通过包管理)2.2.1 安装2.2.2 测试2.2.3 卸载 2.3 使用PIP 安装与卸载2.3.1 PIP安装2.3.2 PIP 卸载 三、基本使用3.1 术语3.2 部署Flask 应用 四、Compose 常用命令4.1 命…

【Java程序设计】【C00351】基于Springboot的疫情居家办公系统(有论文)

基于Springboot的疫情居家办公系统&#xff08;有论文&#xff09; 项目简介项目获取开发环境项目技术运行截图 项目简介 项目获取 &#x1f345;文末点击卡片获取源码&#x1f345; 开发环境 运行环境&#xff1a;推荐jdk1.8&#xff1b; 开发工具&#xff1a;eclipse以及i…

windows环境安装,GOPATH设置,编写Go代码:

目录 windows环境安装 GOPATH设置&#xff1a; 开始编写Go代码&#xff1a; Go Hello World 实例 执行 Go 程序 注意 使用编译器&#xff1a;Sublime Text - 先进的代码编辑器 windows环境安装 windows环境下&#xff0c;go安装包安装成功后&#xff0c;会自动将go添加到…

cad不用插件怎么批量打印?分享2种轻松的方法!

在工程设计、建筑制图等领域&#xff0c;CAD软件是不可或缺的工具。然而&#xff0c;对于很多用户来说&#xff0c;批量打印CAD文件却是一个让人头疼的问题。难道每次都需要安装繁琐的插件才能实现吗&#xff1f;其实不然&#xff0c;今天我们就来介绍几种无需插件&#xff0c;…