uni-app H5中使用wx-open-launch-weapp打开微信小程序

这篇具有很好参考价值的文章主要介绍了uni-app H5中使用wx-open-launch-weapp打开微信小程序。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

项目场景:

最近最H5开发,项目需要发起支付,因为原来我们app走的一套是小程序的支付,所以这边需要H5打开小程序实现支付;

微信文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

uni-app H5中使用wx-open-launch-weapp打开微信小程序


问题描述

项目开发中遇到的坑,我就不一一列举了,直接上小友的爬坑链接:

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

然而,我还是不显示按钮,哇哇。。。。

 我再来一遍我的坑:

npm install weixin-js-sdk
<view>
   <wx-open-launch-weapp id="launch-btn" username="小程序的原始id" :path="path">
       <script type="text/wxtag-template">
           <style>.btn { display:block; padding: 12px; color: red }</style>
           <button class="btn">打开小程序</button>
       </script>
    </wx-open-launch-weapp>
</view>


import wx from 'jweixin-module';

onLoad(options) {
    that = this;
			
	that.shopId= app.globalData.shopId;
	that.deskNo= app.globalData.deskNo;
	that.seatNo= app.globalData.seatNo;

	if (options.orderNo) {
		that.$request({
			url: '/malls/order/detail/noVerification',
			data: { orderNo: options.orderNo }
		}).then((res) => {
			if (res.code == 0) {
				that.info = res.data
				that.path = `pages/index/index?orderId=${res.data.orderId}&payAmount=${res.data.payAmount}`
			}
		})
	}
			
	this.getConfig();
},

methods: {
    // wx api 注册
    getConfig() {
	    // console.log('locaurl'+location.href.split('#')[0])
	    let localUrl= location.href.split('#')[0];
	    that.$request({
		    url: '/payment/WXSignature/noVerification/getSign',
		    data: { param: localUrl }
	    }).then((res) => {
		    if (res.code == 0) {
			    wx.config({
				    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
				    appId: 'wx93524a8eb0a68588', // 必填,公众号的唯一标识,填自己的!
				    timestamp: res.data.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
				    nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
				    ignature: res.data.signature, // 必填,签名,见附录1
				    jsApiList: ['wx-open-launch-weapp','chooseImage', 'previewImage'],
				    openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
			    });
						
			    wx.ready(res => {
				    this.$nextTick(() => {
					    let btn = document.getElementById('launch-btn');
					    btn.addEventListener('launch', e => {
						    console.log('success'+ e);
					    });
					    btn.addEventListener('error', e => {
						     alert('小程序打开失败');
						     console.log('fail', e.detail);
					    });
				    });
			    });
						    
			    wx.error(res => {
			        // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
				    console.log('失败'+ JSON.stringify(res));
			    });
						
		    }
	    })
    }
}

报错:

config:fail,Error: 系统错误,错误码:63002,invalid signatur

uni-app H5中使用wx-open-launch-weapp打开微信小程序

 

uni-app H5中使用wx-open-launch-weapp打开微信小程序

 最后总结一下我爬坑的点:

1,前端跟后台获取微信签名的接口参数url,要传动态的获取的 location.href.split('#')[0]

2,获取的url 不需要encodeURIComponent,因为后台没有解码,所以不需要处理;

3,一定要跟后台多沟通,一起调试,别自己蒙头捣鼓!!!文章来源地址https://www.toymoban.com/news/detail-506241.html

到了这里,关于uni-app H5中使用wx-open-launch-weapp打开微信小程序的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • H5跳转小程序 (wx-open-launch-weapp开放性标签跳转)

    最近公司有一个新的业务需求,企微分享卡片到企微、企微分享卡券到微信,点击领取、打开小程序进行领取。 企微好像不可以直接跳转微信小程序,没有这样的接口,所以只能想另一种方法实现跳转,通过H5跳转微信小程序      我是V2的写法 这是第一次写这种需求,脑袋

    2024年02月12日
    浏览(37)
  • 微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)

    项目需要使用开放标签,按照各种博文上的各种解决方案都不显示, 我都服了,搞来搞去都没用。 最后我搞下来问题我都服了!!!!! 我下载的jweixin-1.6.0.js 不是 正确的 , 对你没看错,这个jssdk应该是我从某个项目里复制出来的 所以遇到不显示的问题没办法解决就需要

    2024年02月13日
    浏览(44)
  • 微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

    微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数) 微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新) 微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度

    2024年02月04日
    浏览(69)
  • 微信公众号正确使用开放标签wx-open-launch-weapp

    1.绑定安全域名 登录微信公众平台,进入“公众号设置”的“功能设置”里填写“JS接口安全域名”; 2.引入JS文件 工程化项目可通过npm下载:weixin-js-sdk,需要1.6.0以上版本 npm install weixin-js-sdk@1.6.0 在当前页面引入 3.通过config接口申请开放标签 4.注册组件 在vue中直接使用会报

    2024年02月08日
    浏览(43)
  • vue2公众号跳转小程序 wx-open-launch-weapp 超完整流程

    根据微信网页开发 / 开放标签说明文档 (qq.com)看开放标签 wx-open-launch-weapp 说明,从上往下完整的看到2.1 根据签名算法见JS-SDK说明文档的附录,所有开放标签列表见文末的附录1 概述 | 微信开放文档 获取wx.config 中相关签名等配置参数(后端通过接口传给我们) 开发者调试需

    2024年04月14日
    浏览(33)
  • 【wx-open-launch-app】微信内置浏览器网页唤起app操作和一些坑,偏前端使用开放标签方面

    最近实现了一下微信H5(Android)唤起app功能,使用的是微信开放标签,wx-open-launch-app,使用这个标签后,我们就可以在微信浏览器中唤起对应的app了 官方使用教程: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 使用教程 需要一个 已验证的微信服务号账号 和 微

    2024年02月20日
    浏览(50)
  • 安卓微信内页面用wx-open-launch-app标签拉起app

    公司有一款APP,原本用的是openinstall调用拉起app功能。 ios上(网页、微信、钉钉等拉起app)都正常。 安卓上网页拉起没问题,但是在微信、钉钉内等一些环境中,都是用折中的办法,就是拉起app时,提示点击右上角,在浏览器内打开当前网页,然后在浏览器内打开app。 目前

    2024年02月02日
    浏览(34)
  • uni-app开发微信小程序,wx.getPrivacySetting,wx.openPrivacyContract,wx.onNeedPrivacyAuthorization,隐私弹窗使用具体代码

     弹窗 代码插件已集成,即插即用, 五分钟集成进项目, 免费下载 ,欢迎大家交流  微信小程序用户隐私保护协议弹窗插件下载 首先完成组件的界面,创建一个组件文件夹 component ,然后创建一个 privacy 子文件夹,再创建一个 privacy 组件,组件是一个 全屏蒙版 加居中弹窗,弹窗

    2024年02月09日
    浏览(65)
  • uni-app 使用webview加载H5打开微信小程序

    最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。 毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,很好,需求满足,但是收费,那能不能自己

    2023年04月18日
    浏览(69)
  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)

    目录 前言 App、H5效果 小程序效果 一、兼容APP、H5的方式 二、兼容小程序 三、实现同时兼容 首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜索页面的跳转,效果如下 在常见titleNView配置代码示例中可以看到基本样式的代码

    2024年02月03日
    浏览(71)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包