h5打开小程序,h5跳转到小程序
程序员文章站
2022-03-22 10:42:47
业务背景:在h5中直接打开小程序(注意不是返回小程序)业务背景:在h5中直接打开小程序(注意不是返回小程序)直接上码:一、config注入:wx.config({ debug: true, appId: '', timestamp: '', nonceStr: '
业务背景:在h5中直接跳转到小程序(注意不是返回,是直接打开)
直接上码:
一、config注入:
wx.config({
debug: true,
appId: '<?php echo $signPackage["appId"];?>',
timestamp: '<?php echo $signPackage["timestamp"];?>',
nonceStr: '<?php echo $signPackage["nonceStr"];?>',
signature: '<?php echo $signPackage["signature"];?>',
jsApiList: [ 'onMenuShareTimeline','onMenuShareAppMessage'],
openTagList: ['wx-open-launch-weapp']
});
二、前端代码:
<wx-open-launch-weapp
id="launch-btn"
username="小程序原始id"
path="小程序页面地址"
style="width:100px;height:100px;"
>
<template>
<style>.btn { padding: 12px;width:100px;height:80px;background:skyblue; }</style>
<button class="btn">打开小程序<button>
</template>
</wx-open-launch-weapp>
<script>
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('success');
});
btn.addEventListener('error', function (e) {
console.log('fail', e.detail);
});
</script>
※目前仅支持通过微信浏览器访问h5打开小程序
本文地址:https://blog.csdn.net/lzz123987csdn/article/details/111995733
推荐阅读
-
微信支付-小程序H5 公众号 Payment SDK
-
小程序嵌套的h5页面的转发功能代码展示
-
微信的扫码支付,web(h5)支付,小程序支付,代码干货
-
小程序内嵌H5——判断小程序环境的坑
-
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
-
h5跳转小程序/判断是小程序打开h5还是微信浏览器打开h5
-
小程序分享到朋友圈 H5打开小程序H5打开APP 「wx-open-launch-weapp」 「wx-open-launch-app」
-
mpvue中的平台状态判断(H5网页 or 小程序)
-
判断H5页面环境是否在小程序的webview中
-
【科普】小程序和H5在产品和营销推广上的区别