uniapp h5打开微信小程序

首先贴代码之前有几个需要注意的点：
1、当获取不到微信小程序APPSECRET时只能在微信浏览器打开小程序
2、此代码只能在微信环境打开小程序
3、需要在线上域名调试，本地看不到效果，可将本地host反向代理到线上域名进行调试
4、wx-open-launch-weapp标签内样式只支持px，要自适应需再将rpx转px
5、需要服务端的接口生成签名和公众号的一些数据给前端
6、前端安装模块 npm install jweixin-module --save
7、main.js 添加一行代码 Vue.config.ignoredElements.push(‘wx-open-launch-weapp’)
8、标签（username是以 gh_ 开头的公众号id）

<wx-open-launch-weapp id="launch-btn"  username="gh_xxxxxxxx">	<script type="text/wxtag-template">			<>"display:block;>"aspectFit" src="https://sysadm.cditv.cn/Uploads/Picture/2022-03-09/622855ef457ad.png"></image><view >">"item-menu-name-normal">跳转小程序</view>	 </script></wx-open-launch-weapp>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

9、js

// 引入微信jssdkvar jweixin = require('jweixin-module')onLoad() {// 在微信环境才去进行小程序标签配置	if (this.$util.isWeixin()){		this.getWxGlobal()	}},methods: { // 判断是否是微信浏览器    isWeixin() {        const ua = navigator.userAgent.toLowerCase();        if (ua.match(/MicroMessenger/i) == 'micromessenger') {            return true;        } else {            return false;        }    },	// 标签内图片和文字大小自适应，rpx转px	// 如果375的设计稿，量出100px,即在uniapp中是200rpx，这里num就传200	getRealSize(num){		return uni.upx2px(num)	},	getWxGlobal(){				const _this  = this;					// 此处请求接口获取签名以及基本信息，可省略不看，直接看拿到数据后的操作					_this.$util.getAPIData('https://www.doker.com.cn/api/wechat/getconfig', 'GET', {					account: 'gh_d08583fe3034',					url: window.location.> res.data;					const appId = str.substring(_this.findStr(str, '"', 2) + 1, _this.findStr(str,						'"', 3));					const timestamp = str.substring(_this.findStr(str, ':', 1) + 1, _this.findStr(						str, ',', 1));					let nonceStr = str.substring(_this.findStr(str, '"', 8) + 1, _this.findStr(str,						'"', 9))					let signature = str.substring(_this.findStr(str, '"', 12) + 1, _this.findStr(						str, '"', 13))						// 关键代码					jweixin.config({						debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印						appId: appId, // 必填，公众号的唯一标识						timestamp: timestamp, // 必填，生成签名的时间戳						nonceStr: nonceStr, // 必填，生成签名的随机串						signature: signature, // 必填，签名						jsApiList: ['wx-open-launch-weapp'],						openTagList: ['wx-open-launch-weapp']					});					jweixin.ready((e) => {						console.log(e, '成功验证')					})					jweixin.error((e) => {						_this.$util.showToast(e || '验证失败');						console.log(e, '失败信息')					})				}, function() {					console.error('接口请求失败');				});			},}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

要在js安全域名上并且在真机上访问才有效果，如果没效果或者是有错误的弹窗出现说明wx.config配置不正确，这种方式只能在微信网页里才能用！！
是这篇文章给了我帮助，我在他的基础上自已摸索出了结果
https://ask.dcloud.net.cn/article/39135