微信公衆號微信JS-SDK使用：分享到朋友圈，分享給朋友，調用相冊、掃一掃

時間 2019-11-10

標籤微信公衆號 sdk 使用分享朋友調用相冊一掃欄目 JavaScript 简体版

原文原文鏈接

微信公衆號微信JS-SDK使用：分享到朋友圈，分享給朋友，調用相冊、掃一掃

百度網盤： https://pan.baidu.com/s/1BWxBzoeauOZY2l7h4PXghw 提取碼: rb2rjavascript

裏面有sample.php 實例。php

用代碼前只須要：html

一、綁定域名 -- 微信公衆平臺--公衆號設置（功能設置--添加域名）java

二、開發模式 -- 複製出 appid和appsecret 到調用頁面算法

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

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、api

這是另外用thinkphp寫的小案例。安全

我的用的thinkphp, share.html 裏面變量解析用的即是 {$xx}微信

微信js-sdk說明文檔地址：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115session

一、綁定域名 -- 公衆號設置（功能設置--添加域名）

二、引入js文件

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

三、經過config接口注入權限驗證配置

四、經過ready接口處理成功驗證

五、經過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(){
        //一、獲取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;
    }