微信小程序获取公众号授权

需求分析

微信小程序需要给用户(单个或多个)推送业务消息。

  • 没有支付业务(不能用服务通知)
  • 不能有数量限制(根据业务需求消息数量不少)

微信公众号有消息模版可以给用户推送消息

需要公众号关联小程序(互相跳转)

如何解决小程序用户于公众号用户匹配

通过UnionID来实现小程序和公众号openId关联。

  • 用户关注公众号,直接持久化用户unionId和openId。
  • 通过微信开发的api同步公众号关注用户信息。

在小程序中只需要获取unionId就可以找到对应的公众号openId,进行消息发送。

通过在小程序中获取微信公众号的code

  • 后台解析微信公众号的code,获取openId,和小程序的openId及账号信息进行关联。

主要讨论在小程序中如何获取公众号code

  1. 使用小程序的 web-view组件,打开H5公众号授权页面。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <template>
    <view>
    <web-view :src='src_url'></web-view>
    </view>
    </template>

    <script>
    export default {
    data() {
    return {
    src_url: 'https://XXXXXXXXXXXXXXXX',
    }
    }
    }
    </script>

    <style>
    </style>
  2. H5页面部署在服务器上,小程序跳转当前页面后,直接访问微信公众号进行授权,微信授权完成后返回当前页面,页面解析授权是否完成,授权成功后跳转回小程序的登录页面。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>微信授权中</title>
    </head>
    <body>
    <div></div>
    <!-- 微信jssdk -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script>
    function getQueryVariable(variable) {
    var query = window.location.search.substring(1);
    var vars = query.split("&");
    for (var i = 0; i < vars.length; i++) {
    var pair = vars[i].split("=");
    if (pair[0] == variable) {
    return pair[1];
    }
    }
    return (false);
    }

    var wxcode = getQueryVariable("code");
    let httpUrl = 'https://XXXXXXXXXXXXXXXXXXXXXX';
    if (wxcode) {
    //console.log(wxcode);
    try {
    wx.miniProgram.redirectTo({
    url: '/pages/rn-login/rn-wxlogin?code=' + wxcode,
    })
    } catch (e) {
    wx.miniProgram.redirectTo({
    url: '/pages/rn-login/rn-wxlogin?code=' + wxcode,
    })
    }
    } else {
    try {
    var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
    + "XXXXXXXXXXX"
    + '&redirect_uri='
    + httpUrl
    + '&response_type=code'
    + '&scope=snsapi_base'
    + '&state=STATE#wechat_redirect';
    window.location.href = url;
    } catch (e) {
    var url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='
    + "XXXXXXXXXXXXXXXX"
    + '&redirect_uri='
    + httpUrl
    + '&response_type=code'
    + '&scope=snsapi_base'
    + '&state=STATE#wechat_redirect';
    window.location.href = url;
    }
    }
    </script>
    </body>
    </html>

  3. 小程序登录页面通过onload来监听授权参数信息并获得
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    onLoad: function(option) {
    try {
    if (option && option.code) {
    getApp().globalData.isFristGetCode = true;
    uni.reLaunch({
    url: './rn-login?code=' + option.code
    });
    }
    //启动一个计数器,检测5秒后时候获取到code
    setTimeout(function() {
    //检测获取到code没有
    if (!getApp().globalData.isFristGetCode) {
    uni.reLaunch({
    url: './rn-login'
    });
    }
    }, 5000);
    } catch (e) {
    //TODO handle the exception
    uni.reLaunch({
    url: './rn-login'
    });
    }
    }