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

方法一：微信浏览器打开的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'})
})