微信公众号的h5跳转小程序实现方案

最新推荐文章于 2026-05-05 06:26:05 发布

原创最新推荐文章于 2026-05-05 06:26:05 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信 #小程序 #微信公众平台

本文详细介绍了在开发过程中如何确保从公众号跳转到小程序的正确步骤，包括获取签名、配置白名单、微信JDK版本选择、JS接口使用以及必要的代码示例，强调了后端接口支持的重要性。

开发前须和后端沟通清除因为有两种方式后端必须写从公众号跳转的具体方法，不说清楚可能后端会写成小程序之间的跳转会导致签名异常等问题。

具体步骤

1.需要将公众号的appid 和 AppSecret 发给后端换取签名

2.配置公众号的白名单将服务器的ip地址配置好以及将 JS接口安全域名配置好 (到此位置就配置好了准备工作)

3.安装微信jdk版本必须是1.6.0

4.min.js中引入

Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

5:跳转页中引入

 import wx from "weixin-js-sdk";

 import base64 from 'base-64';

6.view代码

 <wx-open-launch-weapp id="launch-btn" username="gh_92b7cacb1fa2" path="pages/index/index.html">
    <script type="text/wxtag-template">
       <style>
         .guideBtn{
            height: 45px;
            background: #249591;
            border-radius: 12px;
            font-size: 15px;
            font-family: PingFangSC,PingFang SC;
            font-weight: 500;
            color: #fff;
            line-height: 45px;
            text-align: center;
            margin: 0px 20px;
            width:251px;
          }
       </style>
     <div class="guideBtn">去注册</div>
    </script>
 </wx-open-launch-weapp>

7.js代码

                let urlStr = window.location.href.split('#')[0]
                const data = {
                    url: base64.encode(urlStr)
                }
                GET_JS_SIGN(data).then(res => {
                    wx.config({
                        debug: true, // true为开启调试模式,调用的所有api的返回值会在客户端alert出来。
                        appId: 'wx123231321323321312', // 必填，小程序的唯一标识  // wx23232231321321321 -- 公众号
                        timestamp: res.timestamp, // 必填，生成签名的时间戳
                        nonceStr: res.nonceStr, // 必填，生成签名的随机串
                        signature: res.signature, // 必填，签名
                        jsApiList: ["scanQRCode"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                        openTagList: ["wx-open-launch-weapp"],
                    }); // 必填，需要使用的JS接口列表
                    wx.ready(function(res) {
                        console.log(res, 'res111');
                    });
                    wx.error(function(res) {
                        console.log(res, 'res222');
                    });
                    console.log('1111');
                    this.visibleDialog = true
                });

8.要实现该功能必须依托于后端提供接口否则实现不了！！！！！