公众号h5网页跳转小程序

最新推荐文章于 2024-11-06 14:45:54 发布

蓉妹妹

最新推荐文章于 2024-11-06 14:45:54 发布

阅读量1.2k

点赞数

分类专栏：项目代码文章标签：小程序微信小程序前端

本文链接：https://blog.csdn.net/weixin_43517190/article/details/122047117

版权

项目代码专栏收录该内容

40 篇文章 2 订阅

订阅专栏

我们目前只有小程序项目（而且是多个租户），还没有关于h5的网页
产品提出是否可以给公众号做一个中转html，然后引导用户关注公众号之后去往对应的小程序。

然后我们探讨了一个方案
实现方案：
1.在公众号增加授权回调页面域名开发>接口权限>网页服务>网页授权
域名为是html所放的链接，并且要把每个公众号的Mp.text文件指定的 web服务器放在域名根目录下
2.直接在公众号链接上配置该地址拿到code（该链接额外添加一个要跳转的小程序原始账号miniUserName，g_开头的）
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx961293786b97e5f3&redirect_uri=https%3A%2F%2Fmagic-dev-restapi.co-mall.com%2Fh5%3Fappid%3Dwx961293786b97e5f3%26miniProgramUserName%3Dgh_a7e31ec5008f&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
3.静默授权拿到code 走后端接口（通过code和appid 后端获得openId）并记录下来。
4.页面展示开启小程序按钮跳转到对应的小程序首页

下面直接贴代码

<html>
    <head>
        <title>打开小程序</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
        <style>
            .home {
                position: relative;
                width: 100%;
                height: 100vh;
            }
            .logo-wrap {
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                width: 100%;
                height: 400px;
            }
            .content {
                position: absolute;
                bottom: 123px;
                width: 100%;
                display: flex;
                justify-content: center;
            }
            .tip {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                position: absolute;
                bottom: 32px;
                width: 100%;
                height: 14px;
                color: #666;
                line-height: 14px;
                font-size: 10px;
            }
        </style>
    </head>
    <body>
        <div class="home">
            <div class="logo-wrap" id="logoUrl"></div>
            <div class="content" id="content"></div>
            <div class="tip">
                <div>微信版本要求为：7.0.12及以上</div>
                <div>系统版本要求为：iOS 10.3及以上、Android 5.0及以上）</div>
            </div>
        </div>
        <script type="text/javascript">
            //获取地址栏的参数
            getUrlParam = function (name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
            var href = window.location.href;
            var appid = getUrlParam('appid');
            var code = getUrlParam('code');
            console.log("路径："+href+" code:"+code+" appid"+appid);
            //1.微信环境准备（成功，即可跳转小程序）
            $.ajaxSettings['contentType'] = "application/json;charset=UTF-8";
            $.ajax({
                url: '/WEB-API/front/wechat_official_accounts/sign',
                type: 'POST',
                data: JSON.stringify({
                    app_id: appid,
                    url: href
                }),
                async: false,
                dataType: "json",
                contentType : "application/json;charset=UTF-8",
                success: function (data) {
                    if(data){
                        wx.config({
                            debug: false,
                            appId: appid,
                            timestamp: data.timestamp,  // 必填，填任意数字即可
                            nonceStr: data.nonce_str,    // 必填，填任意非空字符串即可
                            signature: data.signature,  // 必填，填任意非空字符串即可
                            jsApiList: ['chooseImage'], // 必填，随意一个接口即可
                            openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
                        })
                        wx.ready(function (){
                            console.log("微信环境准备成功");
                            getContent();
                        })
                        wx.error(function (res) {
                            console.log("微信环境准备失败，原因："+ res);
                        });
                    }else{
                        console.log("原因：公众号未配置");
                    }
                },
                error: function (error) {
                    console.log("后台接口获取签名异常，原因：", error);
                }
            });

            //2.向后端发请求(后端拿到前端的code，获取用户openId，并记录)
            if (code === null || code === '') {
                window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appid + '&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_base&state=#wechat_redirect'
            } else {
                $.ajax({
                    type: 'POST',
                    url: '/MAGIC-MEMBER/front/member_union_info_wechat_official_accounts',
                    data: JSON.stringify({
                        app_id: appid,
                        code: code
                    }),
                    async: false,
                    dataType: "json",
                    contentType : "application/json;charset=UTF-8",
                    success: function () {
                        console.log("绑定成功");
                    },
                    error: function (res) {
                        console.log("绑定失败，原因："+res)
                    }
                });
            }

            //3.获取租户logo
            $.ajax({
                url: '/api/session/authorizeLogo',
                type: "get",
                async: false,
                dataType: "json",
                contentType: "application/json;charset=UTF-8",
                success: function (data) {
                    var content = "";
                    content += "<img src='"+data.logoUrl+"'/>";
                    $("#logoUrl").html(content);
                },
                error: function (error) {
                    console.log("后台接口获取logo，原因：", error);
                }
            });

            getContent = function (){
                var color = "#d02329";
                if(href.indexOf("wfj") > 0){
                    color = "#ba8848";
                }
                var buttonStyle = "width: 243px; height: 40px; color: " + color
                                +"; border-radius: 27px; border: 1px solid " + color +"; "
                                +"background-color: #fff; ";
                var miniProgramUserName = getUrlParam('miniProgramUserName');
                var content = '';
                var weappurl = "pages/index/index";
                var id = "launch-btn";
                content += '<wx-open-launch-weapp id='+id+' username='+miniProgramUserName+' path='+weappurl+'>';
                content += '<template>';
                content += '<button style="'+buttonStyle+'">打开小程序</button>';
                content += '</template>';
                content += '</wx-open-launch-weapp>';
                $("#content").html(content);
                var btn = document.getElementById( 'launch-btn');
                btn.addEventListener( 'launch', function(e) {
                    console.log("调起成功", e.detail);
                });
                btn.addEventListener( 'error', function(e) {
                    console.log("调起失败:", e.detail);
                });
            }
        </script>
    </body>
</html>

运行完的效果
在这里插入图片描述