公众号h5页面跳转到小程序

前言:
最近做了一个公众号的首页,首页由一个模块需求是点击跳转到小程序,于是翻阅了资料,需要用到公众号的一个开放标签:wx-open-launch-weapp
公众号h5页面跳转小程序呢,需要先关联下小程序,然后获取小程序原始id,还有配置JS接口安全域名等一系列操作,百度下就能搜到。
注意:使用浏览器或者微信开发者工具调试wx-open-launch-weapp开发标签都不会显示,只有在真机中才会有效果(前提还是config接口注入权限验证配置通过)。
使用wx-open-launch-weapp开放标签,是需要jweixin-1.6.0.js支持的,因为我的项目引入了weixin-js-sdk,所以当我引入jweixin-1.6.0.js之后,这个js并没有加载,所以导致了这个开发标签获取不到的问题,所以我只好注释了前面引入的sdk,后面就成功了。
具体代码如下:

<wx-open-launch-weapp
            username="小程序原始id"
            path="/pages/index/main"(跳转的小程序路径)
            @launch="handleLaunchFn"
            @error="handleErrorFn"
            style="display: inline-block;border:none;left: 17px;width: 84%;height: 76%;position: absolute;word-break: break-all;word-wrap: break-word;"
          >
            <script type="text/wxtag-template">
              <style>
                span{
                  color:#fff;
                  font-weight: bold;
                  font-size: 16px;
                  padding-left:5px;
                }
                p{
                  color:#fff;
                  font-size: 12px;
                  padding-left:5px;
                  font-weight: 400;
                  opacity: 0.6;
                  margin-top:5px;
                }
                div.launch-img{
                  text-align: right;
                }
                .launch-img img{
                  width:60px;
                  height:60px;
                  margin-top:-8px;
                }
              </style>
              <p>SHARED PARKING</p>
              <div class="launch-img">
              这里是图片路径(必须为服务器地址,绝对路径和相对路径不显示)
              </div>
            </script>
          </wx-open-launch-weapp>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

我是在index.html页面引入的js,可能会对全局的sdk有影响,所以把之前引入的注册掉就好了
如果你遇到问题,不妨按照以下步骤来排查:

1.开启wx.config的debug模式
2.使用微信开发工具查看wx.config是否获取到OpenTag
3.分析解决问题
4.invalid signature签名错误排查
此步骤转载自以下链接:https://www.cnblogs.com/Can-daydayup/p/15404964.html?utm_source=tuicool&utm_medium=referral
有问题可以打开此链接翻阅下,希望能帮助到你!

### 微信公众号 H5 页面跳转微信小程序实现方法 为了使微信公众号H5页面能够顺利跳转至微信小程序,需遵循特定的技术流程并利用微信JS-SDK提供的接口来完成这一操作。具体来说,在准备阶段,开发者应确保已获取了必要的参数,如`appId`、`timestamp`、`nonceStr`以及`signature`等用于验证身份的信息[^2]。 #### 配置环境与准备工作 在实施前,务必确认已在微信公众平台设置好JS接口安全域名,并取得相应的AppID和AppSecret以便后续调用微信API服务。此外,还需准备好目标小程序的相关信息,比如其唯一的原始ID(`app_id`),这将在构建跳转链接时被用到[^3]。 #### JavaScript代码实例 下面给出了一段基于Vue框架编写的JavaScript代码片段作为示范: ```javascript // 引入所需库文件 import wx from 'weixin-js-sdk'; export default { mounted() { const that = this; // 初始化分享功能的同时也完成了对当前页面URL签名的过程 function initShareConfig() { let url = window.location.href.split('#')[0]; axios.get(`/api/getJsSdkSign?url=${encodeURIComponent(url)}`) .then(response => { const { appId, timestamp, nonceStr, signature } = response.data; wx.config({ debug: false, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] }); wx.ready(function () { console.log('WeChat JS SDK is ready'); // 当点击按钮触发跳转事件时执行如下逻辑 document.getElementById('jumpToMiniProgram').addEventListener('click', function(){ wx.miniProgram.navigateTo({url:'/pages/index/index'}); }); }); wx.error((res) => { console.warn(res); }); }) .catch(error => { console.error(error); }); } initShareConfig(); } } ``` 上述代码展示了如何通过调用`wx.miniProgram.navigateTo()`函数来进行从H5页面向指定的小程序路径发起请求的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值