微信jssdk分享qq空間

Unity微信登錄分享ShareSDK對接流程

官方文檔：MobTechShareSDK文檔

ShareSDK可用於多個平台登錄和分享，無需再用服務端，本文主要介紹安卓端使用ShareSDK，進行微信登錄和分享。

當時使用的是Unity2019.4.5，gradle版本4.0.0。

1、到微信開發平台申請創建應用，申請通過後獲得appId，appSecret；

2、到MobTech平台創建應用，獲得appKey，appSecret；

按照官方文檔步驟對接即可；

1、launcherTemplate.gradle文件，把需要的各平台的appId和appSecret寫在裡面，在ShareSDKDevInfo.cs裡面更改是無效的。

以微信平台為例：

2、如果微信應用正在申請，測試可使用Mob官方demo進行測試：

demo應用包名:cn.sharesdk.demo；

demokey.keystore密鑰密碼和別名密碼，均為123456；

demo應用，Mob的appKey:moba0b0c0d0，appSecret:；

demo應用，微信的appId:wx4868b35061f87885，appSecret:；

3、不需要的平台，可以在ShareSDKDevInfo.cs里的DevInfoSet中注釋掉；

1、場景中掛載ShareSDK.cs和MobSDK.cs；

2、使用前，必須要提交ShareSDK隱私協議的授權介面：

3、微信登錄，使用ShareSDK的獲取用戶信息介面即可（只會在第一次跳轉到第三方平台進行授權），返回結果包含openId，unionId，nickName等信息：

4、微信分享：

1、在微信公眾號添加安全域名（製作的H5頁面的主域名）；

測試階段，本人是通過修改hosts文件，將對應域名解析為127.0.0.1；?然後將電腦和手機連接至同個區域網下。修改手機代理為電腦在區域網內的IP地址；這樣手機就能正常進行測試；

2、引入jssdk??script??src=''

3、配置jssdk，成功後方可使用相關功能，方式如下

wx.config({

debug:false,//開啟調試模式,調用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數，可以在pc端打開，參數信息會通過log打出，僅在pc端時才會列印。

appId:'XX',//必填，公眾號的唯一標識

timestamp:XX,//必填，生成簽名的時間戳

nonceStr:?xx,//必填，生成簽名的隨機串

signature:xx,//必填，簽名，見附錄1??

jsApiList:['onMenuShareTimeline','onMenuShareAppMessage']//必填，需要使用的JS介面列表，所有JS介面列表見附錄2

});

第一次接觸時看到網上的文章在此對signature沒有過多的說明，這里我自己大概說一下，此參數是通過獲取公眾號的id及secret獲取access_token,然後通過access_token獲取jsapi_ticket，然後通過時間戳，隨機串，當前頁面url，通過sha1加密生成；（這里做下說明，此步驟由後台處理後返回給前端即可）；

剛接觸的時候領導認為純前端可實現，這。。。確實可以實現，這里就不做過多說明了；至於要後端處理的原因大致為兩點1、公眾號id和secret在前端實現不安全?2、access_token和jsapi_ticket每日有請求次數的限制，過期時間兩小時，所以需要後台在伺服器緩存，每兩小時獲取一次；

4、wx.config配置正確即可通過wx.ready來調用相應功能

wx.ready(function(){

wx.onMenuShareTimeline({??//分享朋友圈

title:'X',//分享標題

link:window.location.href,//分享鏈接

imgUrl:url,//分享圖標

success:function(){

//用戶確認分享後執行的回調函數

console.log('分享成功了喲喲喲')

},

cancel:function(){

//用戶取消分享後執行的回調函數

}

});

wx.onMenuShareAppMessage({?//?好友分享

title:'',//分享標題

desc:'',//分享描述

link:window.location.href,//分享鏈接

imgUrl:'',//分享圖標

success:function(){

//用戶確認分享後執行的回調函數

},

cancel:function(){

//用戶取消分享後執行的回調函數

}

});

});

總結：其實對於前端要處理的很少，只要從後台獲取signature簽名，調用方法即可實現；具體可看官方文檔；首次接觸的小夥伴不要被嚇到，就是如此簡單；

可參考：微信JS-SDK說明文檔

此時可能出現白名單錯誤（忘截圖了），需要在微信公眾號中設置錯誤中的IP

注意：access_token和ticket都需要緩存

4.獲取簽名signature

將以上內容以鍵值對形式拼接，類似如下

本地引入sha1演算法（需網上查找）

將上述拼接的字元串以參數的形式傳遞到sha1中得到signature

signature=sha1(拼接完的字元串)

驗證signature是否正確

將appId，nonceStr，timestamp和signature返回給前端

官網上是這樣描述的：

這時候調用updateAppMessageShareData，updateTimelineShareData的時候就可以生效了，具體原理不清楚。。

注意：imgUrl配置有嚴格的要求

尺寸120x120，大小不超過10K，不支持GIF格式。必須採用https協議（最好寫完整url）,不支持base64。由於我使用的是vue，在webpack打包時圖片小於10k的是會自動打包成base64導致無法正常顯示圖片，因此在webpack.base.config.js中修改默認配置

由於在網頁中直接查看pdf的路徑是無法在微信中查看（安卓）和分享（ios），因此使用pdf插件進行優化---pdf.js。其原理是繪製成canvas，最終在真機上放大時可能出現模糊的問題。

創建之後控制台會報錯出現跨域問題，因為pdf.js不支持跨域訪問。此時可以將錯誤跨域信息在上一步你引入的文件中查找，然後將其判斷語句注釋掉即可解決這個問題。最後會發現pdf出現在這個容器中（忘截圖了），也實現了微信中預覽和分享的功能。

㈣ 微信分享jssdk無法分享到qq是怎麼回事

登錄你的微信平台，點擊「公眾號設置」。

2
點擊「功能設置」，然後點擊「設置」。

3
設置JS介面安全域名。這里填寫的是一級域名，不帶www和http。最多可以設置三個域名。設置完後點擊確定。（多說一句，相比以前的分享沒有任何域名限制，這里設置安全域名，目的是為了當發現此公眾平台發現誘導分享行為時，可以根據此域名追溯到所有分享出去的鏈接，以及通過這些鏈接增加的粉絲。這樣，微信就可以牢牢控制了你的微信平台，一旦發現違規，讓分享鏈接失效，刪除掉誘導行為增加的粉絲，是瞬間就可以完成的。因此，微信平台的開發者，一定要合理來使用分享功能，不要因小失大。等到你的微信平台被封，估計哭都來不及）

4
在開發者中心中獲取你的AppID和AppSecret，接下來在獲取令牌時，需要這兩個信息。

5
獲取令牌。在伺服器端完成，代碼如下：
function wx_get_token() {
$token = S('access_token');
if (!$token) {
$res = file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' .'你的AppID'.'&secret=' .'你的AppSecret');
$res = json_decode($res, true);
$token = $res['access_token'];
// 注意：這里需要將獲取到的token緩存起來（或寫到資料庫中）
// 不能頻繁的訪問https://api.weixin.qq.com/cgi-bin/token，每日有次數限制
// 通過此介面返回的token的有效期目前為2小時。令牌失效後，JS-SDK也就不能用了。
// 因此，這里將token值緩存1小時，比2小時小。緩存失效後，再從介面獲取新的token，這樣
// 就可以避免token失效。
// S()是ThinkPhp的緩存函數，如果使用的是不ThinkPhp框架，可以使用你的緩存函數，或使用資料庫來保存。
S('access_token', $token, 3600);
}
return $token;
}

注意：返回的access_token長度至少要留夠512位元組。介面返回值：
{"access_token":"ACCESS_TOKEN","expires_in":7200}
{"access_token":"vdlThyTfyB0N5eMoi3n_aMFMKPuwkE0MgyGf_0h0fpzL8p_-0kVHY33BykRC0YXZZZ-WdxEic4","expires_in":7200}

6
獲取jsapi的ticket。jsapi_ticket是公眾號用於調用微信JS介面的臨時票據。正常情況下，jsapi_ticket的有效期為7200秒，通過access_token來獲取。
function wx_get_jsapi_ticket(){
$ticket = "";
do{
$ticket = S('wx_ticket');
if (!empty($ticket)) {
break;
}
$token = S('access_token');
if (empty($token)){
wx_get_token();
}
$token = S('access_token');
if (empty($token)) {
logErr("get access token error.");
break;
}
$url2 = sprintf("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=%s&type=jsapi",
$token);
$res = file_get_contents($url2);
$res = json_decode($res, true);
$ticket = $res['ticket'];
// 注意：這里需要將獲取到的ticket緩存起來（或寫到資料庫中）
// ticket和token一樣，不能頻繁的訪問介面來獲取，在每次獲取後，我們把它保存起來。
S('wx_ticket', $ticket, 3600);
}while(0);
return $ticket;
}

介面返回值：
{"errcode":0,"errmsg":"ok","ticket":"-I98-_YWtOQg","expires_in":7200}

7
簽名，將jsapi_ticket、noncestr、timestamp、分享的url按字母順序連接起來，進行sha1簽名。
noncestr是你設置的任意字元串。
timestamp為時間戳。

$timestamp = time();
$wxnonceStr = "任意字元串";
$wxticket = wx_get_jsapi_ticket();
$wxOri = sprintf("jsapi_ticket=%s&noncestr=%s×tamp=%s&url=%s",
$wxticket, $wxnonceStr, $timestamp,
'要分享的url(從http開始，如果有參數，包含參數）'
);
$wxSha1 = sha1($wxOri);

END
步驟2 添加JS代碼

生成簽名後，就可以使用js代碼了。在你的html中，進行如下設置即可。
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
// 微信配置
wx.config({
debug: false,
appId: "你的AppID",
timestamp: '上一步生成的時間戳',
nonceStr: '上一步中的字元串',
signature: '上一步生成的簽名',
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 功能列表，我們要使用JS-SDK的什麼功能
});
// config信息驗證後會執行ready方法，所有介面調用都必須在config介面獲得結果之後，config是一個客戶端的非同步操作，所以如果需要在 頁面載入時就調用相關介面，則須把相關介面放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的介面，則可以直接調用，不需要放在ready 函數中。
wx.ready(function(){
// 獲取「分享到朋友圈」按鈕點擊狀態及自定義分享內容介面
wx.onMenuShareTimeline({
title: '分享標題', // 分享標題
link:"分享的url,以http或https開頭",
imgUrl: "分享圖標的url,以http或https開頭" // 分享圖標
});
// 獲取「分享給朋友」按鈕點擊狀態及自定義分享內容介面
wx.onMenuShareAppMessage({
title: '分享標題', // 分享標題
desc: "分享描述", // 分享描述
link:"分享的url,以http或https開頭",
imgUrl: "分享圖標的url,以http或https開頭", // 分享圖標
type: 'link', // 分享類型,music、video或link，不填默認為link
});
});
</script>