微信公众号开发

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

本文主要是介绍微信公众号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页面跳转小程序开发踩坑的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航