lola

微信公众号微信JS-SDK使用:分享到朋友圈,分享给朋友,调用相册、扫一扫

微信公众号微信JS-SDK使用:分享到朋友圈,分享给朋友,调用相册、扫一扫

百度网盘: https://pan.baidu.com/s/1BWxBzoeauOZY2l7h4PXghw  提取码: rb2r

里面有sample.php 实例。

用代码前只需要:

 1、绑定域名 -- 微信公众平台--公众号设置(功能设置--添加域名)

 2、开发模式 -- 复制出 appid和appsecret 到 调用页面

$jssdk = new JSSDK("appid", "appsecret ");

 

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

 

这是另外用thinkphp写的小案例。

个人用的thinkphp, share.html 里面变量解析 用的便是 {$xx}

微信js-sdk说明文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、绑定域名 -- 公众号设置(功能设置--添加域名)

2、引入js文件  

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

3、通过config接口注入权限验证配置

4、通过ready接口处理成功验证

5、通过error接口处理失败验证

文件:share.html

  1 <!DOCTYPE html>
  2 <html lang="en">
  3     <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  6     <title>微信公众号分享接口测试</title>
  8     <script type="text/javascript" src=\'http://res.wx.qq.com/open/js/jweixin-1.2.0.js\'></script>
  9     </head>
 10 <body>
 11     <div class=\'container\' id=\'container\'>
 12         {$timestamp}<br/>{$aa}<br/>{$noncestr}<br/>{$signature}<br/>{$aa}<br/>
 13         <script type="text/javascript">
 14             wx.config({
 15                 debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
 16                 appId: \'wx312bdf07ccxxxxxx\', // 必填,公众号的唯一标识
 17                 timestamp: \'{$timestamp}\', // 必填,生成签名的时间戳
 18                 nonceStr: \'{$noncestr}\', // 必填,生成签名的随机串
 19                 signature: \'{$signature}\',// 必填,签名,见附录1
 20                 jsApiList: [
 21                     \'onMenuShareTimeline\',
 22                     \'onMenuShareAppMessage\',
 23                     \'chooseImage\',
 24                     \'scanQRCode\'
 25                 ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
 26             });
 27 
 28             wx.ready(function(){
 29                 wx.onMenuShareTimeline({
 30                     title: \'test1\', // 分享标题
 31                     link: \'http://www.baidu.com\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 32                     imgUrl: \'https://www.baidu.com/img/baidu_jgylogo3.gif\', // 分享图标
 33                     success: function () {
 34                         alert(\'分享成功1\');
 35                     // 用户确认分享后执行的回调函数
 36                     },
 37                     cancel: function () {
 38                         alert(\'分享失败1\');
 39                     // 用户取消分享后执行的回调函数
 40                     }
 41                 });
 42                 wx.onMenuShareAppMessage({
 43                     title: \'test1\', // 分享标题
 44                     desc: \'test1的描述\', // 分享描述
 45                     link: \'http://www.baidu.com\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 46                     imgUrl: \'https://www.baidu.com/img/baidu_jgylogo3.gif\', // 分享图标
 47                     type: \'link\', // 分享类型,music、video或link,不填默认为link
 48                     dataUrl: \'\', // 如果type是music或video,则要提供数据链接,默认为空
 49                     success: function () {
 50                         alert(\'分享成功\');
 51                     // 用户确认分享后执行的回调函数
 52                     },
 53                     cancel: function () {
 54                         alert(\'分享失败\');
 55                     // 用户取消分享后执行的回调函数
 56                     }
 57                 });
 58 
 59                 /*wx.chooseImage({
 60                     count: 1, // 默认9
 61                     sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
 62                     sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
 63                     success: function (res) {
 64                     var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
 65                     }
 66                 });
 67 
 68                 wx.scanQRCode({
 69                     needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
 70                     scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
 71                     success: function (res) {
 72                     var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
 73                     }
 74                 });*/
 75 
 76 
 77             });
 78 
 79             function show(){
 80                 wx.chooseImage({
 81                     count: 1, // 默认9
 82                     sizeType: [\'original\', \'compressed\'], // 可以指定是原图还是压缩图,默认二者都有
 83                     sourceType: [\'album\', \'camera\'], // 可以指定来源是相册还是相机,默认二者都有
 84                     success: function (res) {
 85                     var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
 86                     }
 87                 });
 88             }
 89 
 90             function scan(){
 91                 wx.scanQRCode({
 92                     needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
 93                     scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码,默认二者都有
 94                     success: function (res) {
 95                     var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
 96                     }
 97                 });
 98             }
 99 
100             wx.error(function(res){
101                 // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
102             });
103         </script>  
104 
105         <button onclick=\'show();\'>相册</button>
106         <button onclick=\'scan();\'>扫一扫</button>
107     </div>
108 </body>
109 </hmtl>

thinkphp 控制器端代码:

// jssdk微信分享
    public function shareWx(){
        //1、获取jsapi_ticket票据
        $jsapi_ticket = $this->getJsapiTicket();
        //获取signature 签名算法
        $noncestr = $this->getRandCode();
        $timestamp = time();
        $url = \'http://你设置的域名/index.php?s=/Admin/Index/share\';
        $signature = \'jsapi_ticket=\'.$jsapi_ticket.\'&noncestr=\'.$noncestr.\'&timestamp=\'.$timestamp.\'&url=\'.$url;
        $signature = sha1($signature);

        $this->assign(\'aa\',\'abcddd\');
        $this->assign(\'timestamp\',$timestamp);
        $this->assign(\'noncestr\',$noncestr);
        $this->assign(\'signature\',$signature);
        $this->display(\'share\');
    }

    //获取jsapi_ticket
    public function getJsapiTicket(){
        //如果session保存有效jsapi_ticket
        if($_SESSION[\'jsapi_ticket\'] && $_SESSION[\'jsapi_ticket_expire_time\']>time()){
            $jsapi_ticket = $_SESSION[\'jsapi_ticket\'];
        }else{
            $access_token = $this->getWxAccessToken();
            $url = \'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=\'.$access_token.\'&type=jsapi\';
            $res = $this->http_curl($url); //自己定义的没贴出来,相当于file_get_contents
            $jsapi_ticket = $res[\'ticket\'];
            $_SESSION[\'jsapi_ticket\'] = $jsapi_ticket;
            $_SESSION[\'jsapi_ticket_expire_time\'] = time()+7100;
        }
        return $jsapi_ticket;
    }

    //获取随机字符串
    public function getRandCode($num=16){
        $array = array(\'a\', \'b\', \'c\', \'d\', \'e\', \'f\', \'g\', \'h\', 
         \'i\', \'j\', \'k\', \'l\',\'m\', \'n\', \'o\', \'p\', \'q\', \'r\', \'s\', 
         \'t\', \'u\', \'v\', \'w\', \'x\', \'y\',\'z\', \'A\', \'B\', \'C\', \'D\', 
         \'E\', \'F\', \'G\', \'H\', \'I\', \'J\', \'K\', \'L\',\'M\', \'N\', \'O\', 
         \'P\', \'Q\', \'R\', \'S\', \'T\', \'U\', \'V\', \'W\', \'X\', \'Y\',\'Z\', 
         \'0\', \'1\', \'2\', \'3\', \'4\', \'5\', \'6\', \'7\', \'8\', \'9\'
         );
        $tmpstr = \'\';
        $max = count($array);
        for($i=1;$i<=$num;$i++){
            $tmpstr .= $array[rand(0,$max-1)];
        }
        return $tmpstr;
    }

相册 和 扫一扫代码拿出来测试的,对应地址通过在线二维码生成器生成二维码,在手机扫码可以测试了。。

微信公众号微信JS-SDK使用:分享到朋友圈,分享给朋友,调用相册、扫一扫

分类:

技术点:

相关文章: