公众号网页发开教程

于 2017-05-17 19:25:36 发布
阅读量4.9k 收藏 13
点赞数
文章标签： 公众号网页开发 微信JS接口签名算法 微信js-sdk 微信网页授权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u013109227/article/details/72424327
版权

API

微信公众平台技术文档 ，本教程需要使用该接口文档中如下部分内容：

  • 微信网页授权
  • 微信JS-SDK说明文档

公众号配置

资质

这里写图片描述

配置

功能>公众号设置>功能设置

这里写图片描述

网页授权开发

网页授权，必须在微信中打开如下格式页面（注意：必须是在微信中打开）：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

注意：本教程为授权获取用信息，所以链接中scope参数值必须为snsapi_userinfo

链接中的参数说明及授权后获取用户信息方法，在微信网页授权API描述的很详细不在冗述，基本流程如下：

微信接口全部使用HTTP协议，官网API让使用get方法调用，本人实际全部使用post方法也可以

由于access_token拥有较短的有效期，当access_token超时后，可以使用refresh_token进行刷新，refresh_token有效期为30天，当refresh_token失效之后，需要用户重新授权，微信提供接口如下：

微信分享开发

引入JS文件

在需要调用微信JS接口的页面引入如下JS文件，（支持https）：
http://res.wx.qq.com/open/js/jweixin-1.2.0.js

wx.config

微信配置初始化方法，必须在页面首先调用

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见Java生成签名的随机串算法
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});

注：分享需要使用的JS接口

onMenuShareTimeline //分享到朋友圈
onMenuShareAppMessage //分享给好友
onMenuShareQQ //分享到QQ
onMenuShareWeibo //分享到微博
onMenuShareQZone //分享到QQ空间
Java生成签名的随机串算法
/**
 * 生成wx.config参数
 * @param jsapiTicket
 * @param code
 * @param state
 * @param url
 * @return
 */
public static Map<String, Object> sign(String jsapiTicket, String code, String state, String url) {
    Map<String, Object> map = new HashMap<String, Object>();
    try {
        url = url +"?code="+code+"&state="+state; 
        Map<String, String> ret = new HashMap<String, String>();
        String nonceStr = createNonceStr();
        String timesTamp = createTimesTamp();
        StringBuffer params = new StringBuffer();
        String signature = "";
        //注意这里参数名必须全部小写，且必须有序
        params.append("jsapi_ticket=").append(jsapiTicket)
            .append("&noncestr=").append(nonceStr)
            .append("&timestamp=").append(timesTamp)
            .append("&url=").append(url);
        log.info("params@"+params.toString());
        MessageDigest crypt = MessageDigest.getInstance("SHA-1");
        crypt.reset();
        crypt.update(params.toString().getBytes("UTF-8"));
        signature = byteToHex(crypt.digest());
        ret.put("nonceStr", nonceStr);
        ret.put("timestamp", timesTamp);
        ret.put("signature", signature);
        ret.put("appId", getPropertiesValue(WX_APP_ID));

        map.put("result", "1");
        map.put("data", ret);
        map.put("error_msg", "");
        return map;
    } catch (Exception e) {
        log.error(e.getMessage(), e);
        map.put("result", "0");
        map.put("data", null);
        map.put("error_msg", "获取配置参数失败");
        return map; 
    }
}

/**
* 生成签名的随机串
* @return
*/
private static String createNonceStr() {
    return UUID.randomUUID().toString();
}

/**
* 生成签名的时间戳
* @return
*/
private static String createTimesTamp() {
    return Long.toString(System.currentTimeMillis() / 1000);
}

/**
 * sha1签名
 * @param hash
 * @return
 */
private static String byteToHex(final byte[] hash) {
    Formatter formatter = new Formatter();
    for (byte b : hash) {
        formatter.format("%02x", b);
    }
    String result = formatter.toString();
    formatter.close();
    return result;
}
微信 JS 接口签名校验工具

wx.ready

wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

分享接口的初始化都必须放在wx.ready中

wx.error

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

分享接口

分享到朋友圈

获取“分享到朋友圈”按钮点击状态及自定义分享内容接口

wx.onMenuShareTimeline({
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

link：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致，此处需要特别注意，如果域名不对将导致分享接口配置不生效，以下接口同理

分享给朋友

获取“分享给朋友”按钮点击状态及自定义分享内容接口

wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标
    type: '', // 分享类型,music、video或link，不填默认为link
    dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    success: function () { 
        // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
分享到QQ

获取“分享到QQ”按钮点击状态及自定义分享内容接口

wx.onMenuShareQQ({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
       // 用户取消分享后执行的回调函数
    }
});
分享到腾讯微博

获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口

wx.onMenuShareWeibo({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});
分享到QQ空间

获取“分享到QQ空间”按钮点击状态及自定义分享内容接口

wx.onMenuShareQZone({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接
    imgUrl: '', // 分享图标
    success: function () { 
       // 用户确认分享后执行的回调函数
    },
    cancel: function () { 
        // 用户取消分享后执行的回调函数
    }
});

示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <!--
        省略页面
        -->
        <!--引入微信JS-->
        <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script type="text/javascript">
            wx.config({ 
                debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: 'xxxxxxxxxxx', // 必填，公众号的唯一标识
                timestamp: 1495164833, // 必填，生成签名的时间戳
                nonceStr: '1c604bf7-b176-4d3c-96df-7ce30285fa0f', // 必填，生成签名的随机串
                signature: 'xxxxxxxxxxx',// 必填，签名，见Java生成签名的随机串算法
                jsApiList: ['onMenuShareTimeline'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            wx.ready(function(){
                wx.onMenuShareTimeline({
                    title: '', // 自定义分享标题
                    link: '', // 自定义分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: '', // 自定义分享图标
                    success: function () { 
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function () { 
                        // 用户取消分享后执行的回调函数
                    }
                });
            })
        </script>
    </body>
</html>

PS

理想流程下应该是：

(1)打开“网页授权链接”页面>(2)用户授权操作>(3)页面JS接口配置>(4)用户分享操作>再到(1)的循环

这样一个循环过程必须要求，“(3)JS接口配置”中，将link赋值为“网页授权链接”，虽然微信接口中有如下要求：
link：该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
“网页授权链接”格式是：https://open.weixin.qq.com/xxxxxxx，肯定与公众号JS安全域名不一致，但是在之前开发中我一直是这样做的，居然可以配置成功，但是最近在发现分享接口link赋值为“网页授权链接”，在微信开发者工具中调试一切正常，在微信实际环境下会导致分享接口配置不生效，最后的解决办法时，将link赋值为“JS接口安全域名”下的一个页面，该页面直接重定向到“网页授权链接”，这样流程就变为：

(1)打开“重定向页面”>(2)页面直接重定向到“网页授权链接”>(3)打开“网页授权链接”页面>(4)用户授权操作>(5)页面JS接口配置，将link赋值为“重定向页面”>(6)用户分享操作>再到(1)的循环

整体效果和直接分享“网页授权链接”一样，虽然会有一个重定向的过程，但是总体效果和直接打开“网页授权链接”差别不大，至于具体为什么分享接口link赋值为“网页授权链接”以前可以使用，现在不能用了，应该是微信的一个小bug现在修复了。

Samuel_超
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值