草庐IT

uniapp h5跳转微信小程序(wx-open-launch-weapp)

清许~ 2023-04-14 原文

目录

一、注意事项

二、使用步骤 

 三、调整样式


一、注意事项

  • 微信版本要求为:7.0.12及以上
  • 系统版本要求为:iOS 10.3及以上、Android 5.0及以上
  • 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  • 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。
  • 对于有 CSP 要求的页面,需要添加白名单frame-src https://*.qq.com webcompt:
  • 引入的版本是1.6.0,如(http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)或者http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)或者下载的版本"weixin-js-sdk": "^1.6.0"
  • <script type="text/wxtag-template"></script> 标签中的内容在浏览器及开发工具中都无法显示,需要真机调试才有效

二、使用步骤 

1、下载或者引入插件

        因为我用的是uniapp编写的h5,我是直接npm下载了插件weixin-js-sdk

        npm i weixin-js-sdk(一定要下载1.6.0版本)

        uniapp需要在main.js中引入:Vue.config.ignoredElements.push('wx-open-launch-weapp')

2、引入请求

        uniapp 在 script 标签里引入 import wx from 'weixin-js-sdk'

3、请求wx.config

        此处是后端返回给我的签名认证,appID填写自己的公众号的appID

wx.config({
						// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
						appId: '填写自己的的公众号ID', // 必填,企业号的唯一标识,此处填写企业号corpid
						timestamp: res.timestamp, // 必填,生成签名的时间戳
						nonceStr: res.noncestr, // 必填,生成签名的随机串
						signature: res.signature, // 必填,签名
						jsApiList: ['wx-open-launch-weapp'], // 必填,需要使用的JS接口列表
						openTagList: ['wx-open-launch-weapp']
					}),
					wx.ready(() => {
						console.log('成功')
					});
					wx.error(function(res1) {
						console.log('出错', res1, res1.errMsg)
			        });

注意:签名一定要返回ok,如果签名报错是不会成功的

 4、在页面中使用

        如果是使用vue框架,如uniapp,为避免冲突wx-open-launch-weapp标签内用script(需要真机调试才有效

         普通的直接用template即可

<wx-open-launch-weapp
		  id="launch-btn"
		  username="所需跳转的小程序原始id,即小程序对应的以gh_开头的id(gh_xxxxxxxx)"
		  path="所需跳转的小程序内页面路径"
		>
		  <script type="text/wxtag-template">
		    <style>.btn { padding: 12px }</style>
		    <button class="btn">打开小程序</button>
		  </script>
</wx-open-launch-weapp>

到这里页面中就会显示出打开小程序的按钮啦,点击就可以跳转了

 三、调整样式

相信很多小伙伴需要其他的样式或者图片,这时候我们可以将wx-open-launch-weapp标签跟样式定位,设置透明 

 外面的盒子和里面自己的样式可以定义class

<!-- 给最外面的盒子定义你需要的宽高 相对定位 -->
<view style="width: 200px; height: 200px; position: relative;">
			<!-- 你自己的样式,可以添加图片和其他样式,只要绝对定位到位置就好了 -->
			<view style="width: 200px; height: 200px;position: absolute;top:0px;left: 0px;"></view>
            <!-- 给标签里的内容都绝对定位,宽高100% -->
            <!-- 不放心可以设置层级z-index:;需要调试的话可以在style里面添加背景颜色background: 'red'; opacity: 0.3;-->
			<wx-open-launch-weapp id="launch-btn" username="所需跳转的小程序原始id,即小程序对应的以gh_开头的id(gh_xxxxxxxx)"
		        path="所需跳转的小程序内页面路径"
				style="position: absolute; top: 0; left: 0; width: 100%; height:100% ; opacity: 0;">
				<script type="text/wxtag-template">
					<style></style>
					<view style="position: absolute;top: 0; left: 0; width: 100%;height: 100% ; opacity: 0;">
					</view>
			    </script>
			</wx-open-launch-weapp>
</view>

到这里就结束啦

如果对样式还是有疑问的话,可以看这篇文章https://www.jianshu.com/p/262658b8d19c

对于一些细节也可以查看官方文档
微信官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

有关uniapp h5跳转微信小程序(wx-open-launch-weapp)的更多相关文章

  1. 微信小程序通过字典表匹配对应数据 - 2

    前言一般来说,前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可,但要是匹配的code码比较多或者多个页面用到时,为了便于后期维护,后台就会使用字典表让前端匹配,下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs?{{method(a,b)}}可以看到,上述代码是一个调用方法传值的操作,在vue中很常见,多用于数据之间的转换,但由于微信小程序诸多限制的原因,你并不能优雅的这样操作,可能有人会说,为什么不用if判断实现呢?但是if判断的局限性在于如果存在数据量过大时,大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  4. ruby-on-rails - Ruby 的 'open_uri' 是否在读取或失败后可靠地关闭套接字? - 2

    一段时间以来,我一直在使用open_uri下拉ftp路径作为数据源,但突然发现我几乎连续不断地收到“530抱歉,允许的最大客户端数(95)已经连接。”我不确定我的代码是否有问题,或者是否是其他人在访问服务器,不幸的是,我无法真正确定谁有问题。本质上,我正在读取FTPURI:defself.read_uri(uri)beginuri=open(uri).readuri=="Error"?nil:urirescueOpenURI::HTTPErrornilendend我猜我需要在这里添加一些额外的错误处理代码...我想确保我采取一切预防措施来关闭所有连接,这样我的连接就不是问题所在,但是我

  5. Ruby:read_timeout 和 open_timeout 之间的区别 - 2

    标题本身就说明了......read_timeout和open_timeout之间有什么区别? 最佳答案 open_timeout是您愿意等待“打开连接”的时间。在TCP上下文中,在放弃尝试并引发超时错误之前等待握手完成的时间量。read_timeout您可能会猜到,是您愿意等待从连接方接收到某些数据的时间。一个例子可能会清楚地说明这一点:在SOAPoverHTTPoverTCP上下文中(简化):您尝试与服务器建立TCP连接。如果建立连接的时间比open_timeout长,则放弃连接尝试并引发/发出/返回超时错误。如果连接成功,您发

  6. ruby - 使用 File.open 从 ruby​​ 中的目录打开文件 - 2

    我是Ruby的新手,我正在尝试以如下方式打开文件:#!/usr/bin/envrubydata_file='~/path/to/file.txt'file=File.open(data_file,'r')但是我得到“没有这样的文件或目录”(该文件确实存在于该目录中)。如果我将该文件路径作为命令行参数,它会起作用,例如:#!/usr/bin/envrubyfile=File.open(ARGV[0],'r')然后从命令行运行,如:rubyscript.cgi~/path/to/file.txt关于如何让它以第一种方式工作的任何想法? 最佳答案

  7. 用于从 Open3.popen3 标准输出中提取值的正则表达式 - 2

    如何获取外部命令的输出并从中提取值?我有这样的东西:stdin,stdout,stderr,wait_thr=Open3.popen3("#{path}/foobar",configfile)if/exit0/=~wait_thr.value.to_srunlog.puts("Foobarexitednormally.\n")puts"Testcompleted."someoutputvalue=stdout.read("TX.*\s+(\d+)\s+")puts"Outputvalue:"+someoutputvalueend我没有在标准输出上使用正确的方法,因为Ruby告诉我它不能

  8. ruby-on-rails - 无法捆绑安装 'open-uri' - 2

    关闭。这个问题不符合StackOverflowguidelines.它目前不接受答案。关于您编写​​的代码问题的问题必须在问题本身中描述具体问题—并且包括有效代码以重现它。参见SSCCE.org寻求指导。关闭8年前。Improvethisquestion我是Rails的新手。我正在制作一个网络应用程序,我在其中使用nokogiri搜索不同的网站以从中提取文本。所以在Gemfile中,我写了require'nokogiri'和'open-uri',但是当我捆绑安装时我得到这个错误:Couldnotfindgem'open-uri(>=0)ruby'inthegemsavailableon

  9. Ruby—Open3.popen3/如何打印输出 - 2

    我有一个执行mysql的小ruby脚本导入方式:mysql-u-p-h,但利用Open3.popen3这样做。这就是我到目前为止所拥有的:mysqlimp="mysql-u#{mysqllocal['user']}"mysqlimp这实际上是在做工作,但有一件事困扰着我,与我希望看到的输出有关。如果我将第一行更改为:mysqlimp="mysql-v-u#{mysqllocal['user']}"#notethe-v然后整个脚本永远挂起。我猜,发生这种情况是因为读流和写流相互阻塞,我也猜想stdout需要定期冲洗,以便stdin将继续被消耗。也就是说,只要stdout的buffer已满

  10. Ubuntu20.04系统WineHQ7.0安装微信 - 2

    提供3种Ubuntu系统安装微信的方法,在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信:ubuntu20.04安装最新版微信--可以支持微信最新版,但是适配的不是特别好;比如WeChartOCR.exe报错。2.原生微信安装:linux系统下的微信安装(ubuntu20.04)--微信适配的最好,反应最快,但是微信版本只到2.1.1,版本太老,很多功能都没有。3.深度deepin-wine6安装微信:ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好,当前个人使用此种方法1个月,微信版本3.4;没什么大问题,尚可。一、WineHQ7.0安装微信

随机推荐