微信JS SDK接入的幾點注意事項(必看篇)
更新時間：2017年06月23日 07:59:41 投稿：jingxian
下面小編就為大家?guī)硪黄⑿臞S SDK接入的幾點注意事項(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
微信JS SDK接入，主要可以先參考官網(wǎng)說明文檔，總結起來有幾個步驟：
1.綁定域名：
先登錄微信公眾平臺進入“公眾號設置”的“功能設置”里填寫“JS接口安全域名”。
備注：登錄后可在“開發(fā)者中心”查看對應的接口權限。
2.引入JS文件：在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.2.0.js,
備注：支持使用 AMD/CMD 標準模塊加載方法加載，這里補充引入jquery.cookie.js,sha1.js,后面需要用
3.獲取access_token，再獲取jsapi_ticket，由于不能頻繁調(diào)用獲取jsapi_ticket的函數(shù)，可以保存一份全局的jsapi_ticket，存放在cookie中，如果過時了再重新獲??；另外，這兩個獲取操作建議放到服務端確保安全性;
4.拼接noncestr（隨機字符串）, 有效的jsapi_ticket, timestamp（時間戳）, url（當前網(wǎng)頁的URL，不包含#及其后面部分），對所有待簽名參數(shù)按照字段名的ASCII 碼從小到大排序（字典序）后，使用URL鍵值對的格式（即key1=value1&key2=value2…）拼接成字符串string1。這里需要注意的是所有參數(shù)名均為小寫字符。
5.sha1加密生成簽名signature；
6.配置wx.config，wx.ready,wx.error等方法，其中wx.ready是配置成功之后的回調(diào)，建議其他方法如微信分享wx.onMenuShareTimeline，wx.onMenuShareAppMessage之類都放到ready里面，以達到同步執(zhí)行的目的；
服務端接口：
//access_token是公眾號的全局唯一票據(jù)
public function getTokenForJS() {
$appid = "不告訴你";
$secret = "不告訴你";
$url = "https://api.weixin.qq.com/cgi-bin/token?appid=".$appid."&secret=".$secret."&grant_type=client_credential";
$result = http_request($url);
echo $result;exit;
}
//獲取ticket
public function getTicket(){
$access_token = I("get.access_token");
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=".$access_token."&type=jsapi";
//$this->ajaxJSON($url);
$result = http_request($url);
echo $result;exit;
}
function http_request($url, $data = null)
{
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
if (!empty($data)) {
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
}
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
$info = curl_exec($curl);
curl_close($curl);
return $info;
}
前端js：
function setWechatJS() {
// var temp = "jsapi_ticket=kgt8ON7yVITDhtdwci0qeRukvrGB1QLAfzCcybh4a_VMg6rgB4OhdsD4O2ruRI0OUPG5VfpKlYYWXcyEeChbBw&noncestr=4df32E3jY6YneEPNfGfs×tamp=1498120656&url=http://m.galaxy-immi.com/country/";
// alert( hex_sha1(temp)); return false;
//生成隨機字符串
var randomString = function(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默認去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
var maxPos = $chars.length;
var pwd = '';
for (var i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
};
var showShareSetting = function () {
console.log("title="+title+",description="+description+",link="+url+",imgUrl="+imgUrl);
};
//wx配置參數(shù)
var jsapi_ticket = $.cookie('jsapi_ticket');
var hello2 = 'hello222';
console.log("jsapi_ticket="+jsapi_ticket);
var wxConfig = function () {
//alert('ddd='+jsapi_ticket);
//獲取當前url，不含#以及之后的部分
var timestamp = new Date().getTime(); //生成簽名的時間戳(當前時間)
var noncestr = randomString(20);
var signature = ''; //簽名
var url = window.location.href;
var index = url.indexOf('#');
if(index !== -1 ) {
url = url.slice(0,index);
}
var temp = "jsapi_ticket="+jsapi_ticket+"&noncestr="+noncestr+"×tamp="+timestamp+"&url="+url;
signature = hex_sha1(temp);
console.log("signature="+signature);
wx.config({
debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
appId: 'wx0875a197e0e5bcd7', // 必填，公眾號的唯一標識
timestamp: timestamp, // 必填，生成簽名的時間戳
nonceStr: noncestr, // 必填，生成簽名的隨機串
signature: signature,// 必填，簽名，見附錄1
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
] // 必填，需要使用的JS接口列表，所有JS接口列表見附錄2
});
wx.ready(function () {
//配置成功之后回調(diào)
console.log("微信JS SDK配置成功！");
//實例化title\imgUrl
title = $('title').html(); //默認取title
description = $("meta[name='description']").attr('content');
//判斷當前頁面類型取縮略圖
$("body img").each(function(index,element){
var width = $(element).width();
var height = $(element).height();
var Src = $(element).attr("src");
if(width>200 && height>200){//去頁面中第一張寬高都大于200的圖片
imgUrl = Src;
//console.log(Src);
return false;
}else{//未在頁面中取到合適的圖片就選取銀河的logo圖
imgUrl = MyPic+"/H5/img/icon.png";
}
});
showShareSetting();
//分享到朋友圈
wx.onMenuShareTimeline({
title: title, // 分享標題
link: url, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
showShareSetting();
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
//分享給朋友
wx.onMenuShareAppMessage({
title: title, // 分享標題
desc: description, // 分享描述
link: url, // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
imgUrl: imgUrl, // 分享圖標
type: '', // 分享類型,music、video或link，不填默認為link
dataUrl: '', // 如果type是music或video，則要提供數(shù)據(jù)鏈接，默認為空
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
showShareSetting();
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
//分享到QQ
wx.onMenuShareQQ({
title: title, // 分享標題
desc: description, // 分享描述
link: url, // 分享鏈接
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
showShareSetting();
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
//分享到QQ空間
wx.onMenuShareQZone({
title: title, // 分享標題
desc: description, // 分享描述
link: url, // 分享鏈接
imgUrl: imgUrl, // 分享圖標
success: function () {
// 用戶確認分享后執(zhí)行的回調(diào)函數(shù)
showShareSetting();
},
cancel: function () {
// 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
}
});
});
wx.error(function(res){
console.log("微信JS SDK配置錯誤！");
// config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導致驗證失敗，具體錯誤信息可以打開config的debug模式查看，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名。
});
};
//待分享生成的標題、鏈接、縮略圖
var title,url,imgUrl,description;
//本地cookie查找不到緩存再去請求網(wǎng)絡
if(typeof (jsapi_ticket) == 'undefined' || jsapi_ticket == ''){
//alert('aaa='+jsapi_ticket);
//以下步驟分別獲取全局access_token、jsapi_ticket、signature
$.get(MyUrl+"getTokenForJS",function (data) {
var access_token = data['access_token'];
//獲取全局access_token,以及7200秒之后刷新的問題
//先出cookie中取,如果沒有，
$.get(MyUrl+"getTicket?access_token="+access_token,function(data){
jsapi_ticket = data['ticket'];
//保存當前jsapi_ticket
var date = new Date();
date.setTime(date.getTime()+7200*1000);//只能這么寫，10表示10秒鐘
//?替換成分鐘數(shù)如果為60分鐘則為 60 * 60 *1000
$.cookie('jsapi_ticket',jsapi_ticket,{expires:date,path:'/'}); //有效期7200秒
console.log("jsapi_ticket="+jsapi_ticket);
//alert('ccc='+jsapi_ticket);
wxConfig();
},'json');
},'json');
}else {
//alert('bbb='+jsapi_ticket);
wxConfig();
}
}
以上這篇微信JS SDK接入的幾點注意事項(必看篇)就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
雖然IE的事件對象與DOM的事件對象存在差異，但是IE事件對象中所包含的信息和能力，與DOM事件對象是相同的，只是表現(xiàn)形式不同而已，通過映射的方式，我們可以實現(xiàn)兼容IE和DOM事件對象的事件對象2012-06-06
javascript中的altKey 和 Event屬性大全
本文給大家介紹javascript中的altkey和event屬性大全，涉及到altkey和event屬性語法定義及用法，本文介紹的非常詳細，感興趣的朋友一起看看吧2015-11-11
這篇文章主要為大家詳細介紹了微信小程序結合Storage實現(xiàn)搜索歷史效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
bootstrap3使用bootstrap datetimepicker日期插件
這篇文章主要為大家詳細介紹了bootstrap3中使用bootstrap datetimepicker日期插件的用法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
可能很多人看到這個題目就會想到LABjs、RequireJS、SeaJS... 這些庫，但無奈小編沒用過這些庫，什么 AMD 、CMD 哪來那么多術語... 前端的庫太多了，要看各種亂七八糟的文檔，好難啊，還不如自己寫一個庫呢。于是就有了這文章，有需要的朋友們下面來一起學習學習吧。2016-11-11
javascript 具名函數(shù)的四種調(diào)用方式 推薦
看四種方式執(zhí)行結果沒有區(qū)別。但如果函數(shù)有返回值的話，用new方式調(diào)用時可能會讓你有些失望。2009-07-07
本篇文章給大家分享javascript學習總結之js使用技巧，都是精華喔～小伙伴快來學習吧。2015-09-09
用Javascript實現(xiàn)發(fā)送短信驗證碼間隔功能
這篇文章主要介紹了用Javascript實現(xiàn)發(fā)送短信驗證碼間隔功能,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了JavaScript中的ubound函數(shù)使用實例,本文先是講解了ubound函數(shù)的語法,然后給出了用法代碼實例,需要的朋友可以參考下2014-11-11
這篇文章主要介紹了基于javascript實現(xiàn)窗口抖動效果,需要的朋友可以參考下2016-01-01