微信H5跳转微信小程序

官方文档：目录 | 微信开放文档

方法一：微信浏览器打开的h5跳转方式

HTML代码

<wx-open-launch-weapp 
	id="launch-btn" 
	username="所需跳转的小程序原始id"  
	path="pages/pay/pay">
	<script type="text/wxtag-template">
		<style>.go_recharge{
			width: 90px;
			border:1px solid #fff;
			border-radius: 12px;
			height:24px;
	    	line-height: 24px;
	    	margin:0 auto;
	    	margin-top:5px;
	    	display: block;
	    	text-align:center;
	    	color:#fff;
	    	font-size:14px;
		}</style>								
		<div class="go_recharge">充值</div>			
	</script>
</wx-open-launch-weapp>

<!-- 载入微信官方js -->
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

js代码

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

后端代码我就不写了

方法二：微信小程序web-view内打开的h5跳转方式

HTML代码

<div class='go_recharge'>充值</div>

<!-- 载入微信官方js -->
<script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

js代码

$('.go_recharge').click(function(){
	wx.miniProgram.navigateTo({
		url: '/pages/pay/pay'
	})
})