微信公众号开发流程和踩坑之路

最新推荐文章于 2024-07-01 07:00:00 发布

梅竹生辉

最新推荐文章于 2024-07-01 07:00:00 发布

阅读量809

点赞数 1

分类专栏：微信

本文链接：https://blog.csdn.net/dh1021927867/article/details/111917856

版权

微信专栏收录该内容

1 篇文章 0 订阅

订阅专栏

微信登陆授权

授权地址：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=https://www.dingsky.com&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect

scope参数注释：

1、以snsapi_base为scope发起的网页授权，是用来获取进入页面的用户的openid的，并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页（往往是业务页面）

2、以snsapi_userinfo为scope发起的网页授权，是用来获取用户的基本信息的。但这种授权需要用户手动同意，并且由于用户同意过，所以无须关注，就可在授权后获取该用户的基本信息。

3、用户管理类接口中的“获取用户基本信息接口”，是在用户和公众号产生消息交互或关注后事件推送后，才能根据用户OpenID来获取用户基本信息。这个接口，包括其他微信接口，都是需要该用户（即openid）关注了公众号后，才能调用成功的。
编辑

微信公众号获取Code方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>获取微信公众号的code</title>
    </head>
    <body>
        <div id="appid"></div>
        <script>
            getUrlParameter = (name) => {
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
                var r = window.location.search.substr(1).match(reg)
                if (r != null) return unescape(r[2])
                return null
            }

            var appid = 'wxd6464f078b772b45'
            var code = getUrlParameter('code');
            if (code) {
                console.log(code);
                document.getElementById('appid').innerHTML = code;
            } else {
                var jumpUrl = window.location.href
                let redirectUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
                    jumpUrl
                )}&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect`
                console.log('回跳路径', jumpUrl)
                console.log('微信授权', redirectUrl)
                window.location.replace(redirectUrl)
            }
        </script>
    </body>
</html>

微信分享示例

微信官方 js-sdk 使用说明

1、直接引入微信官方的js源码: https://res.wx.qq.com/open/js/jweixin-1.6.0.js

2、npm install weixin-js-sdk https://www.npmjs.com/package/weixin-js-sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: 'wxd6464f078b772b45', // 必填，公众号的唯一标识
        timestamp: '1591088707', // 必填，生成签名的时间戳
        nonceStr: 'L2lPTjoQfyyeNqZ0', // 必填，生成签名的随机串
        signature: '0f87457054c68d3fe4bcf2615ddfc5dac5cb52dc',// 必填，签名
        jsApiList: [
            'updateAppMessageShareData', // “分享给朋友”及“分享到QQ”
            'updateTimelineShareData', // “分享到朋友圈”及“分享到QQ空间”
        ] // 必填，需要使用的JS接口列表
    });

    wx.ready(function() {
        var wxConfig = {
            title: '页面分享标题', // 分享标题
            desc: '页面分享描述', // 分享描述
            link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: 'https://www.dingsky.com/wcs/Upload/202004/5ea1b65abbadb.jpg', // 分享图标
        }
        wx.updateAppMessageShareData({ 
            ...wxConfig,
            success: function () {
              // 设置成功
            }
        })
        wx.updateTimelineShareData({ 
            ...wxConfig,
            success: function () {
              // 设置成功
            }
        })
    });
    wx.error(function(err){
        console.log('失败', err)
    });
</script>

梅竹生辉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
微信公众号开发流程和踩坑之路

微信公众号开发文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html微信公众号测试号申请平台：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index微信公众号接口调试平台：https://mp.weixin.qq.com/debug/微信登陆授权授权地址：https:/
复制链接

扫一扫