13397158231   jevian_ma@worldflying.cn

微信的js-sdk接入方法

2017-09-06 16:53:20

随着移动互联网的渐渐走红,越来越多的应用开始使用html5的开发方法。当看见这个商机后,又出现了不少的平台公司开始推出了html5开发平台,目前比较主流的有“云打包”、“支付宝公共号”、“微信公共号”、“hbuild轻应用”等。

其中使用人数最多的毫无疑问是微信公共号,下面,小沃就来教教大家如何导入微信公共号的js-sdk。

一、设置js域名相关权限

进入微信公共号后台,点击设置中的公共号设置。然后将域名添加到"js接口安全域名"中去。

武汉app开发      武汉app开发


二、html中包入jweixin-1.2.0.js

包入方法为在顶部添加

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

说明,微信也支持http协议,但是为了保证不会发生域名劫持,因此小沃建议使用https协议。


三、获取access_token

这里的access_token与微信中其他位置的access_token完全一样,获取方法为通过get提交方式拉取一个json。

参数为appid与appsecrit。

api地址为:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

php的调用方法为:

$appid = "wx298372615300d259";

$appsecret = "de9eid8j3mdik0e6593e0d9dfuie34ba";

$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret

$json = file_get_contents($url);

$obj = json_decode($json);

$access_token = $obj -> access_token;

这里需要注意的是,获取access_token是有次数限制的,所以获取一次后需要本地存储起来,然后以后反复使用。


四、获取jsapi_ticket

获取jsapi_ticket的方式与获取access_token的方式类似,都是通过get提交的方式拉取一个json,api地址为:

https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

php的调用方法为:

$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";

$json = file_get_contents($url);

$obj = json_decode($json);

$jsapi_ticket = $obj -> ticket;

这里需要注意的是,获取access_token同样是有次数限制的,所以获取一次后需要本地存储起来,然后以后反复使用。


五、瞎编一个随机字符串与时间戳

没错,就是瞎编,时间戳都是可以随便写的。

php的调用方法为:

$noncestr = "worldflying";

$timestamp = time();


六、组合成一个signature

微信提供的方法是利用jsapi_ticket,noncestr,timestamp以及当前的url连接成一个字符串,然后通过sha1算法生成新的字符串。

php的调用方法为:

    if($_SERVER["SERVER_PORT"] == "443")

        $url = "https://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];

    else

        $url = "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];

    $string1 = "jsapi_ticket=".$jsapi_ticket."&noncestr=".$noncestr."&timestamp=".$timestamp."&url=".$url;

    $signature = sha1($string1);


    七、调用初始化函数初始化js-sdk

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

如果运行后出现

武汉app开发

就说明配置成功了。

注意:配置项中的debug: true才会出现弹窗,如果设置为debug: false就不会出现弹窗。


下面是小沃贡献的一段代码:

<?php
$appid = "wx298372615300d259";
$appsecret = "de9eid8j3mdik0e6593e0d9dfuie34ba";
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret;
$json = file_get_contents($url);
$obj = json_decode($json);
$access_token = $obj -> access_token;
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
$json = file_get_contents($url);
$obj = json_decode($json);
$jsapi_ticket = $obj -> jsapi_ticket;
$noncestr = "worldflying";
$timestamp = time();
if($_SERVER["SERVER_PORT"] == "443")
    $url = "https://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
else
    $url = "http://".$_SERVER["HTTP_HOST"].$_SERVER["REQUEST_URI"];
$string1 = "jsapi_ticket=".$jsapi_ticket."&noncestr=".$noncestr."&timestamp=".$timestamp."&url=".$url;
$signature = sha1($string1);
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>微信js-sdk demo</title>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
        <script type="text/javascript">
            wx.config({
                debug: true,
                appId: 'wx664469117500d259',
                timestamp: <?php echo $timestamp;?>,
                nonceStr: '<?php echo $noncestr;?>',
                signature: '<?php echo $signature;?>',
                jsApiList: []
            });
            wx.ready(function(){
                /*
                config信息验证后会执行ready方法,
                所有接口调用都必须在config接口获得结果之后,
                config是一个客户端的异步操作,
                所以如果需要在页面加载时
                */
            });
        </script>
    </head>
    <body>
        <h1>分享内容</h1>
    </body>
</html>


优秀产品推荐:可编程网络IO控制器

上一篇:使用java版本的opencv实现人脸检测

下一篇:微信公共平台分享以及统计分享情况的功能

联系我们

  • 地址:武汉市东湖高新开发区光谷总部国际1栋2412室
  • QQ:932773931
  • 电话:027-59761089-806
  • 手机:13397158231
  • 邮箱:jevian_ma@worldflying.cn

关注公众号

扫码添加微信

沃航(武汉)科技有限公司版权所有

备案号:鄂ICP备16014230号-1

本网站由提供CDN加速/云存储服务