公众号中的H5页面跳转小程序

主要是使用微信的开放标签 wx-open-launch-weapp 详细参考官网：developers.weixin.qq.com/doc/offiacc…

uniapp实现代码

视图部分

<template>
    <view class="home" style="margin-top: 20rpx;">
	<wx-open-launch-weapp
		id="launch-btn"
		username="gh_xxxx"
		path="pages/home/index.html?type=123&name=1234"
		@launch="handleLaunchFn"
		@error="handleErrorFn">
		<script type="text/wxtag-template">
			<style>
			.btn { padding: 12px;width: 300px;border-radius: 5px;background-color:#2F89DC;border: none;outline: none;color: #FFFFFF; }
			</style>
			<button class="btn">跳去小程序</button>
		</script>
        </wx-open-launch-weapp>
     </view>
</template>

这里要注意的就是样式要写在内部

js部分

刚开始我直接引入外部的js文件有问题，后来我就直接使用npm 官网上说是res.wx.qq.com/open/js/jwe… 注意版本

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
直接这样引入，可以尝试一下，非必要代码

npm install weixin-js-sdk

uniapp中使用的话可以通过import引入

import wx from 'weixin-js-sdk'

接下来就是比较重要的鉴权wx.config，在使用任何微信提供的api都需要经过wx.config

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

注意：jsApiList 里面一定要写一个东西，随便什么Api都可以，timestamp，nonceStr，signature 签名等 最好是后端返回给前端，前端直接用，注意在签名的时候需要传地址，当前页面的路径地址，一般使用

url：window.location.href.split('#')[0]

然后函数部分，这里就完成了，点击按钮就可以弹出下图的提示

methods：{
    handleLaunchFn:function(e){
	console.log("模板成功",e)
    },
    handleErrorFn:function(e){
	console.log("模板报错",e)
    },
}

如果在浏览器中报错信息如下，则不用担心，在真机上测试没有问题