h5跳转小程序

废话不多说,我看了那么多博客,对于新手来说有点看不懂,这篇文章新手也能看懂


使用步骤:

1.公众号后台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,比如:qxnyc.gzfzkj.com,并且下载它提供的文件挂到你测试的服务器

2.在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

3.通过config接口注入权限验证配置并申请所需开放标签

与使用JS-SDK配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个url仅需调用一次)。开放标签的申请和JS接口的申请相互独立,因此是可以同时申请的。

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

ps:注意这一步的必填字段通常是叫你们公司后端给你生成(jsApiList可以直接用它提供的),你通过调用接口获取的

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

二、示例代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0" />
		<title>小程序跳转测试</title>
	</head>
	<body style="text-aligin:center;">
		<wx-open-launch-weapp id="launch-btn" username="gh_*********" path="/pages/authorized/authorized.html">
			<template>
				<style>
					.btn {
						padding: 12px;
						width:200px;
						height: 50px;
					}
				</style>
				<button class="btn">打开小程序</button>
			</template>
		</wx-open-launch-weapp>

		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
		<script>
			$(function() {

				$.get(
					"url",//url就是你们后端给你提供的接口,给你返回了需要的字段
					function(response) {
						let info = response.data;
						console.log(info)
						wx.config({
							debug: false,
							appId: info .appId ,
							timestamp:info . timestamp,
							nonceStr:info. nonceStr,
							signature: info.signature,
							jsApiList: ["startRecord", "stopRecord", "onVoiceRecordEnd", "playVoice", "pauseVoice", "stopVoice",
								"onVoicePlayEnd", "uploadVoice", "downloadVoice", "chooseImage", "previewImage", "uploadImage",
								"downloadImage", "translateVoice", "getNetworkType", "openLocation", "getLocation"
							],
							openTagList: ['wx-open-launch-weapp']
						});

					});

			});
		</script>
	</body>
</html>

总结。

测试的话将此页面挂到第一步配置的域名下,通过手机微信端访问就可以了(微信开发者工具看不到按钮的),上面的url接口也要在此域名下才不会跨域。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值