H5游戲接入微信JSSDK

目的：實現(xiàn)微信圖文分享功能

文檔：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

一、公眾號配置

微信公眾號管理后臺：開發(fā) -> 基本配置

1、獲取:? AppID 和 AppSecret

2后专、將后臺申請微信token和簽名的服務(wù)器的ip添加到IP白名單中食磕。

3、公眾號需要申請認(rèn)證答憔，才能獲取分享的權(quán)限

4味赃、h5發(fā)布的域名配置

將測試域名和正式域名添加到JS接口安全域名。

添加的域名根目錄必須放入微信校驗文件虐拓，才可以配置通過

二心俗、H5工程中接入SDK

1、head中引入

2蓉驹、判斷微信環(huán)境

??????var?obj?=?{

????????"isIos":?false,

????????"isWeChat":?false,

????????"audio":?media

??????}

??????let?ua?=?window.navigator.userAgent.toLowerCase();

??????if?(ua.match(/wxwork/i)?==?'wxwork')?{

? ? //企業(yè)微信

????????obj.isWeChat?=?false;

??????}?else?if?(ua.match(/MicroMessenger/i)?==?'micromessenger')?{

? ? //微信

????????obj.isWeChat?=?true;

??????}?else?{

? ? //其他環(huán)境

????????obj.isWeChat?=?false;

??????}

?? ? window["GAME_HTML_INFO"]?=?obj;

3城榛、微信環(huán)境請求微信簽名

????????const?DEVELOP?=?{

??????????/**?簽名請求地址?*/

??????????ip:?'https://xxxxxxxx/edu-game-math-core/core/operate/getH5Ticket',

??????????/**?分享圖地址?*/

??????????imgUrl:?'https://xxxxxxxx/test/games/EduGamesSlicingH5/h5/share/001.png'

????????}

????????const?RELEASE?=?{

??????????/**?簽名請求地址?*/

??????????ip:?'https://xxxxxxx/edu-game-math-core/core/operate/getH5Ticket',

??????????/**?分享圖地址?*/

??????????imgUrl:?'https://xxxxxxxx/games/EduGamesSlicingH5/h5/share/001.png'

????????}

????????/**?當(dāng)前環(huán)境?*/

????????const?env?=?RELEASE;

發(fā)送get請求到我們自己的服務(wù)器，獲取簽名

????????function?GET(url,?reqData,?callback)?{

??????????url?+=?"?";

??????????for?(var?item?in?reqData)?{

????????????url?+=?item?+?"="?+?reqData[item]?+?"&";

??????????}

??????????console.log(url);

??????????var?xhr?=?new?XMLHttpRequest();

??????????xhr.onreadystatechange?=?function?()?{

????????????if?(xhr.readyState?==?4)?{

??????????????if?(xhr.status?>=?200?&&?xhr.status?<?400)?{

????????????????var?response?=?xhr.responseText;

????????????????console.log(response)

????????????????if?(response)?{

??????????????????var?responseJson?=?JSON.parse(response);

??????????????????callback(responseJson);

????????????????}?else?{

??????????????????console.log("返回數(shù)據(jù)不存在")

??????????????????callback(false);

????????????????}

??????????????}?else?{

????????????????console.log("請求失敗")

????????????????callback(false);

??????????????}

????????????}

??????????};

??????????xhr.open("GET",?url,?true);

??????????xhr.send();

????????}

4态兴、設(shè)置微信分享

?GET(ip,?{?url:?localUrl?},?(ret)?=>?{

??????????var?APPID?=?'wx1111111111111111111111111111';

??????????var?title?=?'尋找對稱軸';

??????????var?desc?=?'5分鐘玩轉(zhuǎn)軸對稱圖形狠持，將抽象變?yōu)樾蜗螅瓉頂?shù)學(xué)如此有趣~';

??????????var?imgUrl?=?env.imgUrl;

??????????var?noncestr?=?ret.data.nonceStr;

??????????var?timestamp?=?ret.data.timestamp;

??????????var?link?=?ret.data.url;

??????????var?signature?=?ret.data.signature;

? wx.config({

????????????debug:?false,

????????????appId:?APPID,

????????????timestamp:?timestamp,

????????????nonceStr:?noncestr,

????????????signature:?signature,

????????????jsApiList:?[

??????????????'checkJsApi',

??????????????'updateAppMessageShareData',

??????????????'updateTimelineShareData',

??????????????'onMenuShareTimeline',

??????????????'onMenuShareAppMessage',

??????????????'onMenuShareQQ',

??????????????'onMenuShareWeibo',

??????????????'onMenuShareQZone'

????????????]

??????????});

? wx.checkJsApi({

????????????jsApiList:?[

??????????????'checkJsApi',

??????????????'updateAppMessageShareData',

??????????????'updateTimelineShareData',

??????????????'onMenuShareTimeline',

??????????????'onMenuShareAppMessage',

??????????????'onMenuShareQQ',

??????????????'onMenuShareWeibo',

??????????????'onMenuShareQZone'

????????????],

????????????success:?function?(res)?{

??????????????console.log(JSON.stringify(res));

????????????}

??????????});

? wx.ready(function?()?{

????????????window["WECHAT_READY"]?=?true;

????????????if?(window["GAME_READY"]?===?true)?{

??????????????playMusic();

????????????}

????????????wx.updateAppMessageShareData({

??????????????title:?title,?//?分享標(biāo)題

??????????????desc:?desc,?//?分享描述

??????????????link:?link,?//?分享鏈接瞻润，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????success:?function?()?{

????????????????//?設(shè)置成功

??????????????}

????????????})

????????????wx.updateTimelineShareData({

??????????????title:?title,?//?分享標(biāo)題

??????????????link:?link,?//?分享鏈接喘垂，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????success:?function?()?{

????????????????//?設(shè)置成功

??????????????}

????????????})

????????????wx.onMenuShareTimeline({

??????????????title:?title,?//?分享標(biāo)題

??????????????link:?link,?//?分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????success:?function?()?{

????????????????//?用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)

??????????????}

????????????})

????????????wx.onMenuShareAppMessage({

??????????????title:?title,?//?分享標(biāo)題

??????????????desc:?desc,?//?分享描述

??????????????link:?link,?//?分享鏈接绍撞，該鏈接域名或路徑必須與當(dāng)前頁面對應(yīng)的公眾號JS安全域名一致

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????type:?'',?//?分享類型,music正勒、video或link，不填默認(rèn)為link

??????????????dataUrl:?'',?//?如果type是music或video楚午，則要提供數(shù)據(jù)鏈接昭齐，默認(rèn)為空

??????????????success:?function?()?{

????????????????//?用戶點擊了分享后執(zhí)行的回調(diào)函數(shù)

??????????????}

????????????});

????????????wx.onMenuShareQQ({

??????????????title:?title,?//?分享標(biāo)題

??????????????desc:?desc,?//?分享描述

??????????????link:?link,?//?分享鏈接

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????success:?function?()?{

????????????????//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

??????????????},

??????????????cancel:?function?()?{

????????????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

??????????????}

????????????});

????????????wx.onMenuShareWeibo({

??????????????title:?title,?//?分享標(biāo)題

??????????????desc:?desc,?//?分享描述

??????????????link:?link,?//?分享鏈接

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????success:?function?()?{

????????????????//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

??????????????},

??????????????cancel:?function?()?{

????????????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

??????????????}

????????????});

????????????wx.onMenuShareQZone({

??????????????title:?title,?//?分享標(biāo)題

??????????????desc:?desc,?//?分享描述

??????????????link:?link,?//?分享鏈接

??????????????imgUrl:?imgUrl,?//?分享圖標(biāo)

??????????????success:?function?()?{

????????????????//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)

??????????????},

??????????????cancel:?function?()?{

????????????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)

??????????????}

????????????});

??????????});

??????????wx.error(function?(res)?{

????????????//?config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗矾柜，具體錯誤信息可以打開config的debug模式查看阱驾，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名怪蔑。

??????????});

????????});

}

5里覆、服務(wù)器需求

（1）向微信請求獲取access_token（有效期7200秒）

請求地址及參數(shù)：

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=公眾號AppID &secret=公眾號密鑰

調(diào)試連接：

https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E5%9F%BA%E7%A1%80%E6%94%AF%E6%8C%81&form=%E8%8E%B7%E5%8F%96access_token%E6%8E%A5%E5%8F%A3%20/token

注意事項：必須將請求的服務(wù)器ip添加到公眾號后臺管理的白名單才能請求成功。

（2）向微信請求獲取jsapi_ticket（有效期7200秒）

請求地址及參數(shù)：

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

（3）簽名

簽名校驗工具：

https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign

簽名算法：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62

（4）請求參數(shù)及返回值：

Req: {

url:?location.href.split('#')[0]

}

Ret：{

data:{

nonceStr:string缆瓣，

tmestamp:string,

url:string,

signature: string

}

6喧枷、注意事項：

(1)、服務(wù)器IP必須加入白名單

(2)、請求簽名的地址必須和當(dāng)前訪問網(wǎng)頁的地址完全一致

(3)隧甚、游戲地址的域名必須配置再js安全域名中

(4)车荔、分享圖的地址，域名必須配置再js安全域名中

(5)戚扳、appid前后端必須一致忧便，AppSecret不允許放到前端代碼中

7、電腦調(diào)試方法

（1）帽借、安裝微信開發(fā)者工具

（2）珠增、打開公眾號網(wǎng)頁

（3）、輸入需調(diào)試的地址即可

8砍艾、微信分享圖配置

在web-mobile目錄中添加share文件夾蒂教，將分享圖放入其中，每次發(fā)布版本脆荷，分享圖會上傳到服務(wù)器中項目目錄下凝垛。并在代碼中配置分享地址。

測試地址：

imgUrl:?'https://xxxxxxxxxxx/test/games/EduGamesSlicingH5/h5/share/001.png'

正式地址：imgUrl:?'xxxxxxxxxxx/games/EduGamesSlicingH5/h5/share/001.png'

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末简烘，一起剝皮案震驚了整個濱河市苔严，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌孤澎，老刑警劉巖届氢，帶你破解...
沈念sama閱讀 206,311評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異覆旭，居然都是意外死亡退子，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,339評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門型将，熙熙樓的掌柜王于貴愁眉苦臉地迎上來寂祥，“玉大人，你說我怎么就攤上這事七兜⊥杵荆” “怎么了？”我有些...
開封第一講書人閱讀 152,671評論 0贊 342
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵腕铸，是天一觀的道長惜犀。經(jīng)常有香客問我，道長狠裹，這世上最難降的妖魔是什么虽界？我笑而不...
開封第一講書人閱讀 55,252評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮涛菠，結(jié)果婚禮上莉御，老公的妹妹穿的比我還像新娘撇吞。我一直安慰自己，他們只是感情好礁叔，可當(dāng)我...
茶點故事閱讀 64,253評論 5贊 371
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布牍颈。她就那樣靜靜地躺著，像睡著了一般晴圾。火紅的嫁衣襯著肌膚如雪颂砸。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,031評論 1贊 285
城市分裂傳說
那天死姚，我揣著相機與錄音，去河邊找鬼勤篮。笑死都毒，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的碰缔。我是一名探鬼主播账劲，決...
沈念sama閱讀 38,340評論 3贊 399
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼金抡！你這毒婦竟也來了瀑焦？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 36,973評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤梗肝，失蹤者是張志新（化名）和其女友劉穎榛瓮，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巫击，經(jīng)...
沈念sama閱讀 43,466評論 1贊 300
?護(hù)林員之死
正文獨居荒郊野嶺守林人離奇死亡禀晓，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,937評論 2贊 323
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了坝锰。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片粹懒。...
茶點故事閱讀 38,039評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖顷级，靈堂內(nèi)的尸體忽然破棺而出凫乖，到底是詐尸還是另有隱情，我是刑警寧澤弓颈，帶...
沈念sama閱讀 33,701評論 4贊 323
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布帽芽，位于F島的核電站，受9級特大地震影響恨豁，放射性物質(zhì)發(fā)生泄漏嚣镜。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,254評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一橘蜜、第九天我趴在偏房一處隱蔽的房頂上張望菊匿。院中可真熱鬧付呕，春花似錦、人聲如沸跌捆。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,259評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽佩厚。三九已至姆钉，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間抄瓦，已是汗流浹背潮瓶。一陣腳步聲響...
開封第一講書人閱讀 31,485評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留钙姊，地道東北人毯辅。一個月前我還...
沈念sama閱讀 45,497評論 2贊 354
代替公主和親
正文我出身青樓，卻偏偏與公主長得像煞额，于是被迫代替她去往敵國和親思恐。傳聞我的和親對象是個殘疾皇子木西，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,786評論 2贊 345

H5游戲接入微信JSSDK

推薦閱讀更多精彩內(nèi)容