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">	
		<style> 
			.item-menu-name-normal {
				font-weight: 400;
				color: #393E46;
				text-align: center;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				webkit-line-clamp: 2;
				webkit-box-orient: vertical;
			}
		</style>  
<image style="display:block;width: {{getRealSize(122)}}px; height:{{getRealSize(122)}}px;" mode="aspectFit" src="https://sysadm.cditv.cn/Uploads/Picture/2022-03-09/622855ef457ad.png"></image>
<view style="width: {{getRealSize(122)}}px;font-size: {{getRealSize(24)}}px;margin-top: {{getRealSize(8)}}px;" class="item-menu-name-normal">跳转小程序</view>
	 </script>
</wx-open-launch-weapp>

9、js

// 引入微信jssdk
var 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.href
				}, function(res) {
					const str = 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('接口请求失败');
				});
			},

}

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值