微信公众号h5页面跳转小程序开发踩坑

2021/9/14 11:34:52

编程Tag： 微信标签跳转 function console log 程序开发 launch btn

本文主要是介绍微信公众号h5页面跳转小程序开发踩坑，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

前言:网上搜这个问题很多答案都是 wx.navigateToMiniProgram(Object object) 我只想说我搜的是h5跳转小程序这帮人给的答案都是小程序跳小程序我服了

正式开始:

1.目录 | 微信开放文档打开这个网址我们要使用的是开放标签

2.文档很清楚了走微信jssdk

核心就是这里还是类似微信jssdk 分享或者扫一扫这种走验证签名的流程

这里需要注意的几个细节点

a. jsApiList 的数组里建议还是写一个验证js接口虽然我们不用不过有文章说这里需要写一个

b. openTagList 里要放我们要使用的开放标签 weapp是跳转小程序 app 是跳转app的

c.页面细节处理

如果你没有使用vue的框架那么可以使用template标签那么按照下面官网的例子就可以了

<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>
App跳转按钮：

如果你使用了vue的框架例如我使用了uniapp的框架那么template标签就会起冲突这个时候就需要换个写法要用script 标签 type注意用text/wxtag-template 并且因为这个插槽是与外界隔离的所以 css 要写在标签里可以用style标签也可以像我一样直接写style即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	</head>
	<body>
		测试页面
		<wx-open-launch-app
		  id="launch-btn1"
		  appid="xxxxxxxxx"
		  extinfo="name=gq&age=123"
		>
		  <script type="text/wxtag-template">
		    <style>.btn { padding: 12px }</style>
		    <button class="btn">App内查看</button>
		  </script>
		</wx-open-launch-app>
		
		<wx-open-launch-weapp
		  id="xxxxxxxxx"
		  username="xxxxxx"
		  path="page/my/login/login"
		>
		  <script type="text/wxtag-template">
		    <style>.btn { padding: 12px }</style>
		    <button class="btn">打开小程序</button>
		  </script>
		</wx-open-launch-weapp>

	</body>
	<script src="./vconsole.js"></script>
	<script src="./jquery.js"></script>
	<script>
	new VConsole()
	$.get("https://xxxxxxxxxx",{url:location.href},function(data,status){
	        console.info(data)
			var obj = data.obj
			wx.config({
			  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
			  appId: 'xxxxxxxxx', // 必填，公众号的唯一标识
			  timestamp: obj.timestamp, // 必填，生成签名的时间戳
			  nonceStr: obj.nonceStr, // 必填，生成签名的随机串
			  signature: obj.signature,// 必填，签名
			  jsApiList: [
				  'onMenuShareTimeline'
			  ], // 必填，需要使用的JS接口列表
			  openTagList: [
				  'wx-open-launch-app',
				  'wx-open-launch-weapp'
			  ] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
			});
	    });
	
	  var btn = document.getElementById('launch-btn1');
	  btn.addEventListener('launch', function (e) {
	    console.log('success app');
	  });
	  btn.addEventListener('error', function (e) {
	    console.log('fail app', e.detail);
	  });
	  var btn2 = document.getElementById('launch-btn2');
	  btn2.addEventListener('launch', function (e) {
	    console.log('success 小程序');
	  });
	  btn2.addEventListener('error', function (e) {
	    console.log('fail 小程序', e.detail);
	  });
	</script>
</html>

最后告诉几个你可能会遇到的问题

1.h5页面是要公司且认证过的然后h5的页面要是在h5后台的安全域名里

2.小程序也是要公司认证过的然后h5的页面也是要配置在小程序里安全域名里具体叫什么我忘记了

3.开放标签的 username属性要用小程序的原始id 就是gh开头的很好找到

4.path的路径尽管小程序

1. 开放标签的 username属性要用小程序原始id

这篇关于微信公众号h5页面跳转小程序开发踩坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

微信公众号h5页面跳转小程序开发踩坑

前言:网上搜这个问题 很多答案都是 wx.navigateToMiniProgram(Object object) 我只想说 我搜的是h5跳转小程序 这帮人给的答案都是小程序跳小程序 我服了

正式开始:

a. jsApiList 的数组里 建议还是写一个验证js接口 虽然 我们不用 不过有文章说这里需要写一个

b. openTagList 里要放我们要使用的开放标签 weapp是跳转小程序 app 是跳转app的

c.页面细节处理

最后 告诉几个 你可能会遇到的问题

相关编程文章

前言:网上搜这个问题很多答案都是 wx.navigateToMiniProgram(Object object) 我只想说我搜的是h5跳转小程序这帮人给的答案都是小程序跳小程序我服了

a. jsApiList 的数组里建议还是写一个验证js接口虽然我们不用不过有文章说这里需要写一个

最后告诉几个你可能会遇到的问题