精华内容
下载资源
问答
  • h5跳转小程序
    千次阅读
    2022-01-11 20:05:59

    h5跳转小程序

    我的所写的项目是react框架,在h5跳转小程序时,需要引入wx-jssdk,具体操作看我上篇文章:https://blog.csdn.net/weixin_45315794/article/details/122448088

    wx-open-launch-weapp使用所需条件:

    • 微信 JS-SDK 版本:1.6.0 及以上。
    • 微信版本要求为:7.0.12 及以上。
    • 系统版本要求为:iOS 10.3 及以上、Android 5.0 及以上。
    • 此功能的开放对象:
      必须具备下面条件,不然就渲染不出来,就是加了代码,在真机也显示不出来的。
      1 、已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
      2、已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。

    wx.config配置

    增加参数:openTagList: [ ‘wx-open-launch-weapp’ ]

    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
      appId: '', // 必填,公众号的唯一标识
      timestamp: '', // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [], // 必填,需要使用的JS接口列表
      openTagList: [ 'wx-open-launch-weapp' ] // 可选,需要使用的开放标签列表
    })
    

    使用标签wx-open-launch-weapp

    • userName :必填,所需跳转的小程序原始 id,即小程序对应的以 gh_ 开头的 id。(非小程序 APPID)
    • path: 非必填,所需跳转的小程序内页面路径及参数。( 对于path属性,所声明的页面路径必须添加.html后缀,如pages/index/index.html。
    let userName = ''; //必填,所需跳转的小程序原始 id,即小程序对应的以 gh_ 开头的 id。(非小程序 APPID)
    let path = '';// 非必填,所需跳转的小程序内页面路径及参数。( 对于path属性,所声明的页面路径必须添加.html后缀,如pages/index/index.html。
    
    <wx-open-launch-weapp
    	id="launch-btn"
        username={username}
        path={path}
        style={{ width: '100%', height: '100%', backgroundColor: '#fd0000', opacity: 0 }}
      >
        <script type="text/wxtag-template">
          <div id="test-btn" style={{ textAlign: 'center' }}>
            <span
              style={
                btnStyle || { color: '#fff', fontSize: '16px', lineHeight: '48px', height: '48px', cursor: 'default' }
              }
            >
             跳转
            </span>
          </div>
        </script>
    </wx-open-launch-weapp>
    
    
    更多相关内容
  • H5跳转小程序

    千次阅读 2022-01-10 15:05:08
    H5跳转微信小程序

    找了很多资料,整理一下。

    静态网站托管跳转:静态网站 | 微信开放文档(任意H5都可以跳转)

    H5跳转小程序:H5如何跳转微信小程序? - 简书(需要依赖微信jssdk)

    官方文档开放标签:目录 | 微信开放文档(需要依赖微信jssdk)

    但最终我发现只需要在小程序的后台有一个生成 URL Scheme。生成的链接在浏览器中直接跳转即可。

    window.location.href = weixin://dl/business/?********

    关于URL Scheme官方解释:

    通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。适用于从短信、邮件、微信外网页等场景打开小程序。 通过 URL Scheme 打开小程序的场景值为 1065。

    iOS系统支持识别 URL Scheme,可在短信等应用场景中直接通过Scheme跳转小程序。
    Android系统不支持直接识别 URL Scheme,用户无法通过 Scheme 正常打开小程序,开发者需要使用 H5 页面中转,再跳转到 Scheme 实现打开小程序

    展开全文
  • 微信内打开H5页面,选择跳转任意微信小程序
  • H5跳转小程序 (成功案例)

    千次阅读 2022-01-13 15:49:31
    H5 跳转微信小程序 微信官方最新文档开发 成功案例

    H5跳转小程序 (踩坑记-成功案例)

    自我的一段独白 找到这篇文章之前我相信你也踩了不少坑,遇到了不少bug,请认真阅读步骤,带你走出雾霾;项目的需求是H5跳转微信小程序,H5项目是原生的html方法写的,并不是vue、react,在开发之前查阅官方文档等相关资料,在这个过程中还是遇到了不少bug,然后查阅了一些文档,但最终还不是那么详细,结合自己的项目案例,分享经验如下;

    一、准备工作

    根据官方文档提供的资料,需要准备一下几点方法:

    1. 认证服务号;
    2. 绑定JS接口安全域名
    3. 配置IP白名单;
    4. 将小程序和H5公众号进行关联;
    5. 需要跳转的小程序页面path和原始ID (gh_xxxxxx);
    6. 引入微信jweixin-1.6.0.js;

    二、流程配置是否正确

    先看看官方的文档需求:

    老规矩传送门【开发前必读文档】

    老规矩传送门\【微信JS-SDK说明文档】]

    三、配置

    1. 认证服务号;

    指微信公众号,不是订阅号,在做之前一定要检查清楚;

    2. 绑定JS接口安全域名;

    这里有很多小伙伴找不到入口,入口在微信公众号后台配置,不是小程序后台;

    3. 配置IP白名单;

    IP白单也是在公众号后台配置:进入公众号》设置与开发》安全中心》找到IP白名单区设置》ok

    4. 将小程序和H5公众号进行关联;

    微信公众后台链接:https://mp.weixin.qq.com/
    关联公众号登录 “公众号管理后台-小程序管理” 完成关联
    查看关联公众号在小程序后台配置:进入小程序后台》设置》关联设置》关联的公众号》ok

    5. 需要跳转的小程序页面path和原始ID (gh_xxxxxx);

    这里跳转的页面可以是任意页面,非tabbar页面,可以大胆尝试;
    打开微信小程序后台:版本管理》修改页面路径》页面路径(选填)》ok

    原始ID及gh_开头;
    打开微信小程序后台:设置》帐号信息》原始ID》ok
    代码中的实操方法:【传送门】

    6. 引入微信jweixin-1.6.0.js;

    微信文档虽然写了一个示例,却不是很详细:

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>测试</title>
    	// 引入微信jweixin-1.6.0.js
    	<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    	<body>
    			
    	</body>
    </html>
    

    以上配置好后,说明我们已经解决的很多不必要出现的bug;下面开始代码分析!

    四、代码如何写

    1、页面布局代码模块(重点)
    2、script js模块(重点)
    为什么要分两步将,写法很重要,两步敲定实现功能,请看下面:

    1、页面布局代码模块

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>测试</title>
    	<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    	<body>
    		<!-- 第一部分代码 -->
    		<div id="public-web" class="wrapper hidden">
    			<div class="logo">
    				<img src="xxxxxxxxxxxxxx" alt="">
    				<p>旅行的足迹</p>
    			</div>
    			<div class="icon-card">
    				<img src="xxxxxxxxxxxxxxx" alt="">
    				<span>小程序</span>
    			</div>
    			<!--  
    				username为小程序的原始id
    				path对应的是小程序的链接地址 -->
    			<wx-open-launch-weapp 
    				id="launch-btn" 
    				username="gh_4bad38c1581f" 
    				path="pages/home/home">
    				<!-- 这里的script 插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。 -->
    				<script type="text/wxtag-template">
    					<!-- 样式方法 -->
    					<style type="text/css">
    						.btn-card { display: flex; 
    							align-items: center; justify-content: center;
    							border-radius: 8px; background-color: #07c160;
    							padding: 12px 60px 12px 60px; margin-top: 66%;}
    						.btn-card p { color: #fff;font-size: 16px;margin: 0;}
    						.btn-card:hover {background-color: #08b65c;}
    						.btn-card:active {background-color: #03994c;}
    					</style>
    					<div class="btn-card"><p class="btn">打开小程序</p></div>
    			</script>
    			</wx-open-launch-weapp>
    		</div>
    	
    		<div id="desktop-web-container" class="hidden">
    			<p >请在手机打开网页链接</p>
    			<p></p>
    		</div>
    	</body>
    </html>
    

    pc端显示:

    小程序端展示:

    2、script js模块

    <!-- 为了方便大家能够直接拷贝运行代码,这里用线上jq链接 -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- 微信 jweixin-1.6.0.js -->
    <script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
    	$(function () {
    		// 方便快捷的判断一下端口(是否为小程序端)
    		const ua = navigator.userAgent.toLowerCase();
    		if (ua.match(/MicroMessenger/i) != "micromessenger") {
    			console.log('微信端')
    			var containerEl = document.getElementById('public-web')
    			containerEl.classList.remove('hidden')
    			containerEl.classList.add('public-web')
    			$.ajax({
    				type: 'post',
    				url: ' 自己或公司的url请求 ',
    				data: { url: window.location.href},
    				dataType: 'json',
    				success: function (data) {
    					console.log(data);
    					if (data.state) {
    						wx.config({
    						// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
    						// debug: true, 
    						// 必填,公众号的唯一标识
    						appId: data.data.appId,
    						// 必填,生成签名的时间戳
    						timestamp: data.data.timestamp,
    						// 必填,生成签名的随机串
    						nonceStr: data.data.nonceStr,
    						// 必填,签名
    						signature: data.data.signature,
    						// 必填,需要使用的JS接口列表,且任意填写
    						jsApiList: ['scanQRCode'],
    						// 可选,需要使用的开放标签列表,wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app
    						openTagList: ["wx-open-launch-weapp"],
    					});
    					// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
    					wx.ready(function () {
    						var btn = document.getElementById('launch-btn');
    						// launch 用户点击跳转按钮并对确认弹窗进行操作后触发
    						btn.addEventListener('launch', function (e) {
    							console.log(e,'success');
    						});
    						// error 用户点击跳转按钮后出现错误
    						btn.addEventListener('error', function (e) {
    							console.log(e.detail,'fail');
    						});
    					});
    					wx.error(function (res) {
    						console.log(res, 'error');
    						// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
    					});
    
    					wx.error(function (res) {
    						console.log(res,'如签名过期导致验证失败');
    						// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    					});
    				}
    			}
    		})
    		} else {
    			console.log('非小程序端')
    			// 在 pc 上则给提示引导到手机端打开
    			var containerEl = document.getElementById('desktop-web-container')
    			containerEl.classList.remove('hidden')
    			containerEl.classList.add('desktop-web-container')
    		}
    	});
    </script>
    

    3、css 样式

    <style>
    	body {
    		margin: 0;
    		padding: 0;
    		position: absolute;
    		top: 0;
    		left: 0;
    		right: 0;
    		bottom: 0;
    		z-index: -100;
    		width: 100%;
    		height: 100%;
    	}
    	.wrapper {
    		display: flex;
    		flex-direction: column;
    		-webkit-box-align: center;
    		align-items: center;
    		height: 100%;
    	}
    	.wrapper .logo {
    		padding-top: 147px;
    	}
    	.wrapper .logo img {
    		width: 64px;
    		height: 64px;
    	}
    	.wrapper .logo p {
    		font-size: 17px;
    		color: #242627;
    		margin: 10px 0 9px;
    	}
    	.icon-card {
    		color: rgba(0, 0, 0, 0.3);
    		font-size: 14px;
    	}
    	.icon-card {
    		display: flex;
    		align-items: center;
    	}
    	.icon-card img {
    		width: 16px;
    		height: 16px;
    		padding-right: 7px;
    	}
    	.desktop-web-container {
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    	}
    	.desktop-web-container p {
    		position: absolute;
    		top: 40%;
    	}
    	.hidden {
    		display: none;
    	}
    </style>
    

    4、献上完整代码

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>测试</title>
    	<!-- H5内测工具 -->
    	<script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
    	<script>
    		//初始化
    		let vConsole = new VConsole();
    		console.log('测试11');
    	</script>
    </head>
    	<style>
    		body {
    			margin: 0;
    			padding: 0;
    			position: absolute;
    			top: 0;
    			left: 0;
    			right: 0;
    			bottom: 0;
    			z-index: -100;
    			width: 100%;
    			height: 100%;
    		}
    		.wrapper {
    			display: flex;
    			flex-direction: column;
    			-webkit-box-align: center;
    			align-items: center;
    			height: 100%;
    		}
    		.wrapper .logo {
    			padding-top: 147px;
    		}
    		.wrapper .logo img {
    			width: 64px;
    			height: 64px;
    		}
    		.wrapper .logo p {
    			font-size: 17px;
    			color: #242627;
    			margin: 10px 0 9px;
    		}
    		.icon-card {
    			color: rgba(0, 0, 0, 0.3);
    			font-size: 14px;
    		}
    		.icon-card {
    			display: flex;
    			align-items: center;
    		}
    		.icon-card img {
    			width: 16px;
    			height: 16px;
    			padding-right: 7px;
    		}
    		.desktop-web-container {
    			display: flex;
    			flex-direction: column;
    			align-items: center;
    		}
    		.desktop-web-container p {
    			position: absolute;
    			top: 40%;
    		}
    		.hidden {
    			display: none;
    		}
    	</style>
    	<body>
    		<!-- 第一部分代码 -->
    		<div id="public-web" class="wrapper hidden">
    			<div class="logo">
    				<img src="xxxxxxxxxxxxxx" alt="">
    				<p>旅行的足迹</p>
    			</div>
    			<div class="icon-card">
    				<img src="xxxxxxxxxxxxxxx" alt="">
    				<span>小程序</span>
    			</div>
    			<!--  
    				username为小程序的原始id
    				path对应的是小程序的链接地址 -->
    			<wx-open-launch-weapp 
    				id="launch-btn" 
    				username="gh_4bad38c1581f" 
    				path="pages/home/home">
    				<!-- 这里的script 插槽模版及样式均需要通过<script type="text/wxtag-template"></script>进行包裹。 -->
    				<script type="text/wxtag-template">
    					<style type="text/css">
    						.btn-card { display: flex; 
    							align-items: center; justify-content: center;
    							border-radius: 8px; background-color: #07c160;
    							padding: 12px 60px 12px 60px; margin-top: 66%;}
    						.btn-card p { color: #fff;font-size: 16px;margin: 0;}
    						.btn-card:hover {background-color: #08b65c;}
    						.btn-card:active {background-color: #03994c;}
    					</style>
    					<div class="btn-card"><p class="btn">打开小程序</p></div>
    			</script>
    			</wx-open-launch-weapp>
    		</div>
    	
    		<div id="desktop-web-container" class="hidden">
    			<p >请在手机打开网页链接</p>
    			<p></p>
    		</div>
    		<!-- 为了直接拷贝代码能用这里用的是链接jq -->
    		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    		<!-- 微信 jweixin-1.6.0.js -->
    		<script typet="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    		<script>
    			$(function () {
    				// 方便快捷的判断一下端口(是否为小程序端)
    				const ua = navigator.userAgent.toLowerCase();
    				if (ua.match(/MicroMessenger/i) != "micromessenger") {
    					console.log('微信端')
    					var containerEl = document.getElementById('public-web')
    					containerEl.classList.remove('hidden')
    					containerEl.classList.add('public-web')
    					$.ajax({
    						type: 'post',
    						url: ' 自己或公司的url请求 ',
    						data: { url: window.location.href},
    						dataType: 'json',
    						success: function (data) {
    							console.log(data);
    							if (data.state) {
    								wx.config({
    									// 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
    									// debug: true, 
    									// 必填,公众号的唯一标识
    									appId: data.data.appId,
    									// 必填,生成签名的时间戳
    									timestamp: data.data.timestamp,
    									// 必填,生成签名的随机串
    									nonceStr: data.data.nonceStr,
    									// 必填,签名
    									signature: data.data.signature,
    									// 必填,需要使用的JS接口列表,且任意填写
    									jsApiList: ['scanQRCode'],
    									// 可选,需要使用的开放标签列表,wx-open-launch-weapp 指H5跳转小程序 wx-open-launch-app 指H5跳转app
    									openTagList: ["wx-open-launch-weapp"],
    								});
    								// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
    								wx.ready(function () {
    									var btn = document.getElementById('launch-btn');
    									// launch 用户点击跳转按钮并对确认弹窗进行操作后触发
    									btn.addEventListener('launch', function (e) {
    										console.log(e,'success');
    									});
    									// error 用户点击跳转按钮后出现错误
    									btn.addEventListener('error', function (e) {
    										console.log(e.detail,'fail');
    									});
    								});
    								wx.error(function (res) {
    									console.log(res, 'error');
    									// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
    								});
    
    								wx.error(function (res) {
    									console.log(res,'如签名过期导致验证失败');
    									// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    								});
    							}
    						}
    					})
    				} else {
    					console.log('浏览器')
    					// 在 pc 上则给提示引导到手机端打开
    					var containerEl = document.getElementById('desktop-web-container')
    					containerEl.classList.remove('hidden')
    					containerEl.classList.add('desktop-web-container')
    				}
    			});
    		</script>
    	</body>
    </html>
    

    五、bug回馈

    开启debug: true后会提示!

    1、errMsg: “config:invalid signature” 签名错误,需后端提供接口处理!

    2、为什么签名出成功后一直提示 errMsg: “invokeMiniProgramAPI:ok”
    【a、检查代码抒写格式;b、检查wx-open-launch-weapp;c、wx.config和wx.ready执行顺序】

    以上是我在做H5跳转小程序所踩过的坑,走过的路,望大家不要重复踩坑!

    总结:

    前端路上 | 所知甚少,唯善学。
    各位小伙伴有什么疑问,欢迎留言探讨。

    展开全文
  • h5页面跳转微信小程序流程

    一、H5跳转小程序

    wx-open-launch-weapp官网文档
    jsapi_ticket 生成 官方文档
    jsapi_ticket加密时官方说url不加#及后面部分,但尝试后会debug报错,加上后正常显示按钮。可自行尝试
    在这里插入图片描述

    一定要先看文档很重要很重要!!!

    1. 准备工作

    1. 已认证的服务号
    2. 已认证的非个人主体的小程序(暂不提小程序云开发的网页)

    缺一不可,出现问题时先检测这两项是否具备

    2. 露一手

    1. 绑定“JS接口安全域名”下的网页所在域名
    2. 公众号的appId,小程序的原始id

    3. 代码编写(附上全码-记得修改里面的appid,原始id,路径等参数)

    <!--
     * @Author: Li
     * @Date: 2022-02-18 11:09:12
     * @LastEditTime: 2022-03-03 11:15:37
     * @LastEditors: Please set LastEditors
     * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
     * @FilePath: \newChat\src\views\home.vue
    -->
    <template>
      <div style="height:100px;display: flex;justify-content: center;">
        <wx-open-launch-weapp id="launch-btn" 
        path="目标小程序路径.html"
        username="gh_xxxxx"
        env-version="trial">
        <!-- 记得加.html-->
        <!-- 目标小程序的原始id:gh_开头的--> 
        <!--正式版release、开发版develop、体验版tria-->
          <script type="text/wxtag-template">
            <style>
              .btn {
    				margin-top: 100px;
    				padding: 12px;
    				width: 150px;
    				border: 2px solid green;
    				background-color: #fff;
    				border-radius: 5px;
    			}
    			.btn:focus{
    				outline: none;
    			}
            </style>
            <button class="btn" id="clickMe">立即打开小程序</button>
          </script>
        </wx-open-launch-weapp>
      </div>
    </template>
    
    <script>
      import wx from 'weixin-js-sdk' // 安转依赖 "weixin-js-sdk": "^1.6.0" 
      import sha1 from 'sha1' // 前端加密 所以安转了sha1
      export default {
        name: 'home',
        created() {
          this.toOpen(); // 初始化微信配置
        },
        methods: {
          async toOpen() {
            var path = window.location.href;
            let jsapi_ticket = " " // 记得看官方文档的附录,自己生成,或者后台提供接口获取 链接
            let timestamp = Date.parse(new Date()) / 1000;
            let nonceStr = this.randomWord(16)
            let url = path
            let string = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" +url
            let signature = sha1(string)
            // console.log(timestamp, nonceStr, jsapi_ticket, signature)
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印
              appId: 'wx开头的公众号appid', // 必填,公众号的唯一标识
              timestamp: timestamp, // 必填,生成签名的时间戳
              nonceStr: nonceStr, // 必填,生成签名的随机串
              signature: signature, // 必填,签名
              jsApiList: [
                "checkJsApi",
                "chooseImage",
                "uploadImage",
                "previewImage"
              ], // 必填,需要使用的JS接口列表
              openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-weapp']
            });
            // 通过ready接口处理成功验证
            wx.ready(function (res) {
              // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
              wx.checkJsApi({
                jsApiList: [
                  'wx-open-launch-weapp'
                ],
                success: function (res) {
                  // console.log("验证接口是否注册完成-成功");
                },
                fail: function (res) {
                  // console.log(res);
                }
              });
            });
            // 通过error接口处理失败验证
            wx.error(function (res) {
              console.log(res)
              // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
            });
          },
          randomWord(range) {
            var str = "",
              arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
                'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E',
                'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
              ];
            // 随机产生
            for (var i = 0; i < range; i++) {
              let pos = Math.round(Math.random() * (arr.length - 1));
              str += arr[pos];
            }
            return str;
          }
        }
      }
    
    </script>
    
    <style>
    
    </style>
    
    

    运行结果(一遍过,完美)
    在这里插入图片描述
    另外附上.html打开小程序的源码
    和vue几乎无差 vue用 script type=“text/wxtag-template” 标签

    HTML用 template 标签

    <!--
     * @Author: your name
     * @Date: 2022-02-28 10:07:42
     * @LastEditTime: 2022-03-02 09:37:17
     * @LastEditors: Please set LastEditors
     * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
     * @FilePath: \newChat\test.html
    -->
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    		<title></title>
    		<style type="text/css">
    			*{
    				margin: 0;
    				padding: 0;
    			}
    			#app{
    				display: flex;
    				justify-content: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<wx-open-launch-weapp path="路径.html" id="launch-wxapp" username="gh_xxxx"
    				env-version="trial">
    				<template>
    					<style>
    						.btn {
    							margin-top: 100px;
    							padding: 12px;
    							width: 150px;
    							border: 2px solid green;
    							background-color: #fff;
    							border-radius: 5px;
    						}
    						.btn:focus{
    							outline: none;
    						}
    					</style>
    					<button class="btn">点击进入小程序</button>
    				</template>
    			</wx-open-launch-weapp>
    		</div>
    	</body>
    	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    	<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js "></script>
    	<script>
    		getStoreList()
    		function getStoreList() { //调用后台接口获取config信息验证
    			var path = window.location.href;
    			var that = this;
    			let jsapi_ticket = "" 
    			let timestamp = Date.parse(new Date()) / 1000;
    			let nonceStr = randomWord(16)
    			let url = path
    			let string = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + nonceStr + "&timestamp=" + timestamp + "&url=" + url
    			let signature = sha1(string)
    			wx.config({
    				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    				appId: "", // 必填,公众号的唯一标识
    				timestamp: timestamp, // 必填,生成签名的时间戳
    				nonceStr: nonceStr, // 必填,生成签名的随机串
    				signature: signature, // 必填,签名
    				jsApiList: ['onMenuShareTimeline', 'chooseImage'], // 必填,需要使用的JS接口列表
    				openTagList: ['wx-open-launch-weapp'] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']
    			})
    			wx.ready(function(res) {
    			// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
    			});
    			wx.error(function(res) {
    				// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
    			});
    		}
    
    		function randomWord(range) {
    			var str = "",
    				arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j',
    					'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E',
    					'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'
    				];
    			// 随机产生
    			for (var i = 0; i < range; i++) {
    				let pos = Math.round(Math.random() * (arr.length - 1));
    				str += arr[pos];
    			}
    			return str;
    		}
    
    		function encodeUTF8(s) {
    			var i, r = [],
    				c, x;
    			for (i = 0; i < s.length; i++)
    				if ((c = s.charCodeAt(i)) < 0x80) r.push(c);
    				else if (c < 0x800) r.push(0xC0 + (c >> 6 & 0x1F), 0x80 + (c & 0x3F));
    			else {
    				if ((x = c ^ 0xD800) >> 10 == 0) //对四字节UTF-16转换为Unicode
    					c = (x << 10) + (s.charCodeAt(++i) ^ 0xDC00) + 0x10000,
    					r.push(0xF0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3F));
    				else r.push(0xE0 + (c >> 12 & 0xF));
    				r.push(0x80 + (c >> 6 & 0x3F), 0x80 + (c & 0x3F));
    			};
    			return r;
    		}
    
    		// 字符串加密成 hex 字符串
    		function sha1(s) {
    			var data = new Uint8Array(encodeUTF8(s))
    			var i, j, t;
    			var l = ((data.length + 8) >>> 6 << 4) + 16,
    				s = new Uint8Array(l << 2);
    			s.set(new Uint8Array(data.buffer)), s = new Uint32Array(s.buffer);
    			for (t = new DataView(s.buffer), i = 0; i < l; i++) s[i] = t.getUint32(i << 2);
    			s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
    			s[l - 1] = data.length << 3;
    			var w = [],
    				f = [
    					function() {
    						return m[1] & m[2] | ~m[1] & m[3];
    					},
    					function() {
    						return m[1] ^ m[2] ^ m[3];
    					},
    					function() {
    						return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];
    					},
    					function() {
    						return m[1] ^ m[2] ^ m[3];
    					}
    				],
    				rol = function(n, c) {
    					return n << c | n >>> (32 - c);
    				},
    				k = [1518500249, 1859775393, -1894007588, -899497514],
    				m = [1732584193, -271733879, null, null, -1009589776];
    			m[2] = ~m[0], m[3] = ~m[1];
    			for (i = 0; i < s.length; i += 16) {
    				var o = m.slice(0);
    				for (j = 0; j < 80; j++)
    					w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
    					t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
    					m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
    				for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0;
    			};
    			t = new DataView(new Uint32Array(m).buffer);
    			for (var i = 0; i < 5; i++) m[i] = t.getUint32(i << 2);
    
    			var hex = Array.prototype.map.call(new Uint8Array(new Uint32Array(m).buffer), function(e) {
    				return (e < 16 ? "0" : "") + e.toString(16);
    			}).join("");
    			return hex;
    		}
    	</script>
    </html>
    
    

    二、小程序跳转小程序

    小程序跳转小程序比较简单,微信提供的方法 wx.navigateToMiniProgram

    先看它的使用限制:
    在这里插入图片描述
    总结一下:需要用户主动触发,且有弹窗提示确认,跳转名单和数量不在限制一句话,只要你知道目标小程序的appId和页面路径。就可以跳转

    wx.navigateToMiniProgram({
      appId: '',
      path: 'page/index/index?id=123',
      extraData: {
        foo: 'bar'
      },
      envVersion: 'develop',
      success(res) {
        // 打开成功
      }
    })
    

    若是uniapp开发的微信小程序wx.navigateToMiniProgram 改为 uni.navigateToMiniProgram

    展开全文
  • H5跳转小程序(1).pdf

    2021-04-30 11:20:51
    H5跳转小程序
  • H5跳转小程序
  • 实现H5跳转小程序

    千次阅读 2022-05-21 17:53:34
    第一种:公众号跳转小程序其实就是简单的采用“wx-open-launch-weapp”开放标签就可以实现了,具体可以查看“公众号开放标签”,注意:该种方式如果是嵌套在小程序webview内的话是不起作用的。 第二种则是采用小...
  • H5跳转小程序 小程序跳转小程序(通用,包括企微和浏览器)
  • 公众号H5跳转小程序

    千次阅读 2022-04-06 08:47:56
    1、配置微信公众号js安全域名–前端域名 2、配置公众号关联小程序–经测试不关联也可以 3、获取公众号APPID、开发者秘钥—后端接口需要、还需设置服务器Ip白名单 4、根据开发标签使用步骤 ...5、需要注意本地开发...
  • 方法一:通过服务端接口或在小程序管理后台「生成 URL Scheme」 ...开发者需要使用 H5 页面中转,再跳转到 Scheme 实现打开小程序跳转代码如下: location.href = 'weixin://dl/business/?t=1qFTj3VcOqc' 参考:
  • 微信内H5跳转小程序

    2022-01-04 16:40:13
    微信跳转小程序 H5跳转小程序
  • h5跳转小程序、短信跳转小程序、详细使用,附带bug和避免一些坑
  • 微信小程序webView H5跳转小程序
  • 目录 问题描述 原因分析 ...官方说明: 网页会判断所在的环境来觉得采用哪种跳转方式,如检测到微信客户端内,则免鉴权使用开放标签跳转,如检测到在外部浏览器或 App,则使用 URL Scheme 跳转小程序
  • 今天开发微信H5页面跳转小程序,安卓和开发者工具都没问题,IOS第一次进入会报错验签失败,我的是vue项目。 实测添加一行代码解决,只传原始地址,不能传完整url,看其他人什么刷新,什么判断都无效 还有这个跳转...
  • web-view页面内的H5页面跳转小程序页面 一般的,web-view组件的src属性指定的H5页面之间,可以正常的采用超级链接a标记对进行页面之间的条转。但是web-view页面要想通过手指触碰返回小程序页面,就无法使用超级...
  • 主要介绍了微信小程序H5页面间相互跳转代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • vue H5跳转小程序

    千次阅读 2020-12-17 18:07:34
    使用此标签后,用户需在网页内点击标签按钮方可跳转小程序H5 通过开放标签打开小程序的场景值为 1167. 此功能的开放对象: 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合
  • 1登录微信公众平台进入...3通过config接口注入权限验证配置并申请所需开放标签(签名算法)测试跳转小程序下面是按钮id="launch-btn"username="gh_64f20a68865d"path="__plugin__/wx2b03c6e691cd7370/pages/live-pla...
  • H5跳转小程序,uniapp跳转小程序

    千次阅读 2021-04-27 20:11:54
    网页跳转小程序需要使用微信的开放标签wx-open-launch-weapp ,使用开放标签需要使用微信的jssdk,然后sdk的版本不能低,低版本点击无效。 先给官方文档的链接点击跳转 建议认真看完,这个坑有点多 1.必须有插槽...
  • 支付宝h5跳转小程序

    千次阅读 2021-03-12 11:12:07
    其他 APP 或 外部 H5 跳转小程序目前有两种方式可以跳转: Scheme 拼接方式: 前缀https://ds.alipay.com/?scheme= 后拼接 Scheme alipays://platformapi/startapp?appId=xxx&page=x/y/z&query=xx%3dxx 小...
  • }, mounted() { //补充一下 ios跳转小程序首次进入页面的时候 可能 wx-open-launch-weapp 不显示 刷新一下页面再次进入就可以 //勉强解决的方法 if (!sessionStorage.getItem("reloadpage")) { sessionStorage....
  • > testurl.php 小程序跳转测试 2323 testurl.html 0,'data'=>actionSqrcode()]; print_r(json_encode($res)); function actionSqrcode() { //时间戳 $wx['timestamp'] = time(); //appid $wx['...
  • 支付宝小程序: h5跳转 小程序

    千次阅读 2020-07-27 11:27:51
    比如 你是 h5跳转小程序是吧 但必须是 微信内置得浏览器才可以跳转 而不是你拿着链接去 手机自带的浏览器 或者下载一个uc浏览器进行跳转 这样好像不行 反正我试了 不行 但是支付宝的小程序 你在 支付宝和钉钉中都可
  • vue3 H5跳转小程序

    2022-04-24 09:55:33
    微信jssdk有这个跳转小程序开发功能(仅限再微信浏览器中使用),简单查阅了一下文档和家人们的分享,似乎好像没啥难度,页面签名,点击的时候调用wx-open-launch-weapp这个开放标签,传入相应的值,就OK了!...
  • H5跳转小程序填坑笔记

    千次阅读 2021-02-05 10:21:28
    一、H5跳转小程序必须满足的几个条件 1、开发使用者必须是已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2、开发使用者必须是已认证的非个人主体的小程序,使用小...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 15,920
精华内容 6,368
关键字:

h5跳转小程序