?? 微信 JS-SDK

• 微信 JS-SDK 是微信公眾平臺(tái) 面向網(wǎng)頁(yè)開(kāi)發(fā)者提供的基于微信內(nèi)的網(wǎng)頁(yè)開(kāi)發(fā)工具包
• 通過(guò)使用微信 JS-SDK，開(kāi)發(fā)者可借助微信高效地使用 拍照、選圖、語(yǔ)音、位置等手機(jī)系統(tǒng)的能力
• 同時(shí)可以直接使用 微信分享、掃一掃、卡券、支付 等微信特有的能力，是管理微信一切生態(tài)的API

?? JS-SDK 使用步驟

• 綁定域名： 需要在微信公眾平臺(tái) 公眾號(hào)設(shè)置 的 功能設(shè)置 里填寫 JS接口安全域名
• 引入 JS 文件： 要使用 JS-SDK 的接口，需要引入 http://res.wx.qq.com/open/js/jweixin-1.6.0.js
• 注入配置： 所有需要使用 JS-SDK 的頁(yè)面必須先注入配置信息，否則將無(wú)法調(diào)用
• 配置驗(yàn)證成功后的回調(diào)： config 信息驗(yàn)證后會(huì)執(zhí)行 ready 方法
• 配置驗(yàn)證失敗后的回調(diào)： config信息驗(yàn)證失敗會(huì)執(zhí)行 error 函數(shù)，如簽名過(guò)期導(dǎo)致驗(yàn)證失敗

wx.config({
  debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有 api 的返回值會(huì)在客戶端 alert 出來(lái)，若要查看傳入的參數(shù)，可以在 pc 端打開(kāi)，參數(shù)信息會(huì)通過(guò) log 打出，僅在 pc 端時(shí)才會(huì)打印。
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的 JS 接口列表
});

wx.ready(function(){
  // 成功后的回調(diào)，所有接口調(diào)用都必須在 config 接口獲得結(jié)果之后
});

wx.error(function(res){
  // 失敗后的回調(diào)
});

?? JS-SDK 簽名生成

• 由上面可知道，如果想要調(diào)用 JS-SDK 的接口，必須是在 wx.config 驗(yàn)證成功之后才可以
• 而 wx.config 里面最重要的就是 JS-SDK 簽名中的一些參數(shù)
• 點(diǎn)擊可下載 官方SDK示例，SDK 其中包含 php、java、nodejs以及 python 的示例代碼，其中就有封裝好的 JS-SDK 簽名生成類
• 我們這里以 php 簽名生成類來(lái)講解，前端使用 JS-SDK 接口，必須就調(diào)用其中的 getSignPackage 方法，生成簽名包，然后將包里面的參數(shù)，傳到 wx.config 中即可
• 在 getSignPackage 中，可以看到需要生成 jsapiTicket 標(biāo)識(shí)，而這個(gè)標(biāo)識(shí)需要通過(guò) access_token 獲取
• 然后將獲取到的 jsapiTicket 標(biāo)識(shí)與 請(qǐng)求url、時(shí)間戳、隨機(jī)字符串等進(jìn)行加密形成簽名后一起返回給前端即可，可以參考 JS-SDK使用權(quán)限簽名算法

<?php

class JSSDK
{
    private $appId;
    private $appSecret;

    public function __construct($appId, $appSecret)
    {
        $this->appId = $appId;
        $this->appSecret = $appSecret;
    }

    public function getSignPackage()
    {
        $jsapiTicket = $this->getJsApiTicket();

        // 注意 URL 一定要?jiǎng)討B(tài)獲取，不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

        $timestamp = time();
        $nonceStr = $this->createNonceStr();

        // 這里參數(shù)的順序要按照 key 值 ASCII 碼升序排序
        $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";

        $signature = sha1($string);

        $signPackage = array(
            "appId" => $this->appId,
            "nonceStr" => $nonceStr,
            "timestamp" => $timestamp,
            "url" => $url,
            "signature" => $signature,
            "rawString" => $string
        );
        return $signPackage;
    }

    private function createNonceStr($length = 16)
    {
        $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        $str = "";
        for ($i = 0; $i < $length; $i++) {
            $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
        }
        return $str;
    }

    private function getJsApiTicket()
    {
        // jsapi_ticket 應(yīng)該全局存儲(chǔ)與更新，以下代碼以寫入到文件中做示例
        $data = json_decode($this->get_php_file("jsapi_ticket.php"));
        if ($data->expire_time < time()) {
            $accessToken = $this->getAccessToken();
            // 如果是企業(yè)號(hào)用以下 URL 獲取 ticket
            // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
            $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
            $res = json_decode($this->httpGet($url));
            $ticket = $res->ticket;
            if ($ticket) {
                $data->expire_time = time() + 7000;
                $data->jsapi_ticket = $ticket;
                $this->set_php_file("jsapi_ticket.php", json_encode($data));
            }
        } else {
            $ticket = $data->jsapi_ticket;
        }

        return $ticket;
    }

    private function getAccessToken()
    {
        // access_token 應(yīng)該全局存儲(chǔ)與更新，以下代碼以寫入到文件中做示例
        $data = json_decode($this->get_php_file("access_token.php"));
        if ($data->expire_time < time()) {
            // 如果是企業(yè)號(hào)用以下URL獲取access_token
            // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
            $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
            $res = json_decode($this->httpGet($url));
            $access_token = $res->access_token;
            if ($access_token) {
                $data->expire_time = time() + 7000;
                $data->access_token = $access_token;
                $this->set_php_file("access_token.php", json_encode($data));
            }
        } else {
            $access_token = $data->access_token;
        }
        return $access_token;
    }

    private function httpGet($url)
    {
        $curl = curl_init();
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 500);
        // 為保證第三方服務(wù)器與微信服務(wù)器之間數(shù)據(jù)傳輸?shù)陌踩?，所有微信接口采用https方式調(diào)用，必須使用下面2行代碼打開(kāi)ssl安全校驗(yàn)。
        // 如果在部署過(guò)程中代碼在此處驗(yàn)證失敗，請(qǐng)到 http://curl.haxx.se/ca/cacert.pem 下載新的證書判別文件。
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, true);
        curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, true);
        curl_setopt($curl, CURLOPT_URL, $url);

        $res = curl_exec($curl);
        curl_close($curl);

        return $res;
    }

    private function get_php_file($filename)
    {
        return trim(substr(file_get_contents($filename), 15));
    }

    private function set_php_file($filename, $content)
    {
        $fp = fopen($filename, "w");
        fwrite($fp, "<?php exit();?>" . $content);
        fclose($fp);
    }
}

?? JS-SDK 簽名注意事項(xiàng)

• 由微信官方可知，jsapiTicket 和 access_token 調(diào)用一次可以在 2 小時(shí)內(nèi)使用，也就是 7200 秒，所以我們?cè)谀玫竭@個(gè)值的時(shí)候，需要將其 緩存，官方文檔中緩存了 7000 秒，為了防止不必要的問(wèn)題產(chǎn)生，所以官方提前了 200 秒
• 關(guān)于為什么要緩存這兩個(gè)值，主要是因?yàn)?同一個(gè)公眾號(hào) 每天調(diào)用這個(gè)值的上限是 2000 次，如果不緩存，如果當(dāng)天你的服務(wù)訪問(wèn)次數(shù)超過(guò) 2000 次，因?yàn)闆](méi)有緩存，就會(huì)達(dá)到限制，服務(wù)無(wú)法正常使用了
• 官方使用的緩存是放在 jsapi_ticket.php 和 access_token.php 兩個(gè)文件中的，當(dāng)然你可以放到redis 和 mongodb 中，但是不推薦存儲(chǔ)在數(shù)據(jù)庫(kù)中，容易造成大量的 I/O 開(kāi)銷

<?php
require_once "jssdk.php";
$jssdk = new JSSDK("yourAppID", "yourAppSecret");
$signPackage = $jssdk->GetSignPackage();
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    /*
     * 注意：
     * 1. 所有的JS接口只能在公眾號(hào)綁定的域名下調(diào)用，公眾號(hào)開(kāi)發(fā)者需要先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名”。
     * 2. 如果發(fā)現(xiàn)在 Android 不能分享自定義內(nèi)容，請(qǐng)到官網(wǎng)下載最新的包覆蓋安裝，Android 自定義分享接口需升級(jí)至 6.0.2.58 版本及以上。
     * 3. 常見(jiàn)問(wèn)題及完整 JS-SDK 文檔地址：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html
     *
     * 開(kāi)發(fā)中遇到問(wèn)題詳見(jiàn)文檔“附錄5-常見(jiàn)錯(cuò)誤及解決辦法”解決，如仍未能解決可通過(guò)以下渠道反饋：
     * 郵箱地址：weixin-open@qq.com
     * 郵件主題：【微信JS-SDK反饋】具體問(wèn)題
     * 郵件內(nèi)容說(shuō)明：用簡(jiǎn)明的語(yǔ)言描述問(wèn)題所在，并交代清楚遇到該問(wèn)題的場(chǎng)景，可附上截屏圖片，微信團(tuán)隊(duì)會(huì)盡快處理你的反饋。
     */
    wx.config({
        debug: true,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: <?php echo $signPackage["timestamp"];?>,
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            // 所有要調(diào)用的 API 都要加到這個(gè)列表中
        ]
    });
    wx.ready(function () {
        // 在這里調(diào)用 API
    });
</script>
</html>

?? 自定義微信分享

• 想要調(diào)用 JS-SDK 中的接口，必須先在 wx.config 中 jsApiList 中添加你需要使用的 API，不然無(wú)法使用
• 經(jīng)常項(xiàng)目中做的 H5，為了更好的分享，在微信中需要自定義分享的icon、分享的標(biāo)題、分享的簡(jiǎn)介和跳轉(zhuǎn)鏈接
• 因?yàn)橐话惴窒硇畔⒃陧?xiàng)目加載的時(shí)候就要初始化，所以需要放到 ready 中進(jìn)行初始化
• 當(dāng)然，如果你的分享信息是變化的，則可以通過(guò)點(diǎn)擊事件在調(diào)用分享接口也是可以的

wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
        'checkJsApi',
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo',
    ]
});

wx.ready(function () {
    // 獲取“分享到朋友圈”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
    wx.onMenuShareTimeline({
	  title: '', // 分享標(biāo)題
	  link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào) JS 安全域名一致
	  imgUrl: '', // 分享圖標(biāo)
	  success: function () {
		  	// 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
	  }
	}),
	
	// 獲取“分享給朋友”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
	wx.onMenuShareAppMessage({
	  title: '', // 分享標(biāo)題
	  desc: '', // 分享描述
	  link: '', // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào) JS 安全域名一致
	  imgUrl: '', // 分享圖標(biāo)
	  type: '', // 分享類型,music、video或link，不填默認(rèn)為link
	  dataUrl: '', // 如果 type 是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
	  success: function () {
	    	// 用戶點(diǎn)擊了分享后執(zhí)行的回調(diào)函數(shù)
	  }
	});
	
	wx.onMenuShareWeibo({
	  title: '', // 分享標(biāo)題
	  desc: '', // 分享描述
	  link: '', // 分享鏈接
	  imgUrl: '', // 分享圖標(biāo)
	  success: function () {
	  	// 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
	  },
	  cancel: function () {
	  	// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
	  }
	});
});

?? 拍照選圖功能

• 有時(shí)候需要通過(guò) JS-SDK 調(diào)用手機(jī)攝像頭進(jìn)行拍照，然后處理圖片
• 需要注意的是上傳圖片接口，上傳圖片有效期 3 天，可用微信多媒體接口下載圖片到自己的服務(wù)器

wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
        'checkJsApi',
        'chooseImage',
        'previewImage',
        'downloadImage',
        'getLocalImgData',
    ]
});

// 拍照或從手機(jī)相冊(cè)中選圖接口
wx.chooseImage({
  count: 1, // 默認(rèn)9
  sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
  sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
  success: function (res) {
  var localIds = res.localIds; // 返回選定照片的本地 ID 列表，localId可以作為 img 標(biāo)簽的 src 屬性顯示圖片
  }
});

// 預(yù)覽圖片接口
wx.previewImage({
  current: '', // 當(dāng)前顯示圖片的 http 鏈接
  urls: [] // 需要預(yù)覽的圖片 http 鏈接列表
});

// 上傳圖片接口
wx.uploadImage({
  localId: '', // 需要上傳的圖片的本地ID，由 chooseImage 接口獲得
  isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
  success: function (res) {
    var serverId = res.serverId; // 返回圖片的服務(wù)器端ID
  }
});

// 下載圖片接口
wx.downloadImage({
  serverId: '', // 需要下載的圖片的服務(wù)器端ID，由 uploadImage 接口獲得
  isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
  success: function (res) {
    var localId = res.localId; // 返回圖片下載后的本地ID
  }
});

?? 錄制音頻處理

• 可以使用 JS-SDK 實(shí)現(xiàn)錄音、上傳錄音、播放語(yǔ)音等功能，可以在你的項(xiàng)目中大大增加用戶的參與感
• 比如可以通過(guò)錄一段用戶的語(yǔ)音，然后通過(guò)語(yǔ)音識(shí)別機(jī)器人自動(dòng)回復(fù)，再通過(guò) 播放語(yǔ)音功能 將回復(fù)的內(nèi)容播放出來(lái)，就簡(jiǎn)單形成了一個(gè)你問(wèn)我答的小游戲

wx.config({
    debug: true,
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: <?php echo $signPackage["timestamp"];?>,
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: [
        'checkJsApi',
        'startRecord',
        'stopRecord',
        'onVoiceRecordEnd',
        'playVoice',
        'pauseVoice',
        'stopVoice',
        'onVoicePlayEnd',
        'uploadVoice',
        'downloadVoice'
    ]
});

// 開(kāi)始錄音接口，可以放在點(diǎn)擊事件中觸發(fā)
wx.startRecord();

// 停止錄音接口
wx.stopRecord({
  success: function (res) {
    var localId = res.localId;
  }
});

// 監(jiān)聽(tīng)錄音自動(dòng)停止接口
wx.onVoiceRecordEnd({
	// 錄音時(shí)間超過(guò)一分鐘沒(méi)有停止的時(shí)候會(huì)執(zhí)行 complete 回調(diào)
  complete: function (res) {
	  var localId = res.localId;
	}
});

// 播放語(yǔ)音接口
wx.playVoice({
  localId: '' // 需要播放的音頻的本地ID，由 stopRecord 接口獲得
});

// 暫停播放接口
wx.pauseVoice({
  localId: '' // 需要暫停的音頻的本地ID，由 stopRecord 接口獲得
});

// 上傳語(yǔ)音接口
wx.uploadVoice({
  localId: '', // 需要上傳的音頻的本地ID，由 stopRecord 接口獲得
  isShowProgressTips: 1, // 默認(rèn)為1，顯示進(jìn)度提示
  success: function (res) {
    var serverId = res.serverId; // 返回音頻的服務(wù)器端ID
  }
});

?? 獲取地理位置

• 可以通過(guò) JS-SDK 獲取當(dāng)前用戶所處位置的經(jīng)緯度，這樣就可以給用戶推薦一些周邊的消費(fèi)啥的
• 也可以通過(guò)位置信息，給用戶推薦一些周邊的個(gè)性化娛樂(lè)等服務(wù)是非常的方便的

文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-490243.html

// 使用微信內(nèi)置地圖查看位置接口
wx.openLocation({
  latitude: 0, // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
  longitude: 0, // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
  name: '', // 位置名
  address: '', // 地址詳情說(shuō)明
  scale: 1, // 地圖縮放級(jí)別,整型值,范圍從1~28。默認(rèn)為最大
  infoUrl: '' // 在查看位置界面底部顯示的超鏈接,可點(diǎn)擊跳轉(zhuǎn)
});

// 獲取地理位置接口
wx.getLocation({
  type: 'wgs84', // 默認(rèn)為wgs84的 gps 坐標(biāo)，如果要返回直接給 openLocation 用的火星坐標(biāo)，可傳入'gcj02'
  success: function (res) {
    var latitude = res.latitude; // 緯度，浮點(diǎn)數(shù)，范圍為90 ~ -90
    var longitude = res.longitude; // 經(jīng)度，浮點(diǎn)數(shù)，范圍為180 ~ -180。
    var speed = res.speed; // 速度，以米/每秒計(jì)
    var accuracy = res.accuracy; // 位置精度
  }
});

?? 微信搖一搖

• 如果你想通過(guò)微信搖一搖自己開(kāi)發(fā)一些功能，可以使用 JS-SDK 中的搖一搖功能

// 開(kāi)啟查找周邊 ibeacon 設(shè)備接口
wx.startSearchBeacons({
  ticket:"",  //搖周邊的業(yè)務(wù) ticket , 系統(tǒng)自動(dòng)添加在搖出來(lái)的頁(yè)面鏈接后面
  complete:function(argv){
    //開(kāi)啟查找完成后的回調(diào)函數(shù)
  }
});

// 關(guān)閉查找周邊 ibeacon 設(shè)備接口
wx.stopSearchBeacons({
  complete:function(res){
    //關(guān)閉查找完成后的回調(diào)函數(shù)
  }
});

// 監(jiān)聽(tīng)周邊 ibeacon 設(shè)備接口
wx.onSearchBeacons({
  complete:function(argv){
    //回調(diào)函數(shù)，可以數(shù)組形式取得該商家注冊(cè)的在周邊的相關(guān)設(shè)備列表
  }
});

?? 微信掃一掃

• 如果你想調(diào)用微信掃一掃的功能，可以使用 scanQRCode 接口
• 在 success 回調(diào)方法中，獲得掃描結(jié)果，然后可以通過(guò)掃描結(jié)果自己去進(jìn)行二次開(kāi)發(fā)，是非常的方便的

// 調(diào)起微信掃一掃接口
wx.scanQRCode({
  needResult: 0, // 默認(rèn)為0，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果，
  scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼，默認(rèn)二者都有
  success: function (res) {
    var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
  }
});

到了這里，關(guān)于微信 JS-SDK 實(shí)現(xiàn)自定義分享、手機(jī)選圖拍照、圖片音頻處理、地理位置、搖一搖等功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！