H5微信分享、自定義微信分享

在一個h5頁面添加微信,分享給微信好友、朋友圈、騰訊微博

下面來實現 。

需要:

1、需要一個企業版的微信公衆號(認證過的)

2、一臺服務器

企業版的微信公衆號原因:

在微信公衆平臺的接口權限內可以看到,個人版公衆號是沒有權限自定義微信分享的,所以需要企業版公衆號並開通認證。

具體步驟:

步驟一:綁定域名

先登錄微信公衆平臺進入“公衆號設置”的“功能設置”裏填寫“JS接口安全域名”。

備註:登錄後可在“開發者中心”查看對應的接口權限。(這一步驟應該沒有什麼問題)

步驟二:引入JS文件

在需要調用JS接口的頁面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需進一步提升服務穩定性,當上述資源不可訪問時,可改訪問:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js (支持https)。

備註:支持使用 AMD/CMD 標準模塊加載方法加載(沒問題,很簡單,一個script就搞定了)

步驟三:通過config接口注入權限驗證配置

所有需要使用JS-SDK的頁面必須先注入配置信息,否則將無法調用(同一個url僅需調用一次,對於變化url的SPA的web app可在每次url變化時進行調用,目前Android微信客戶端不支持pushState的H5新特性,所以使用pushState來實現web app的頁面會導致簽名失敗,此問題會在Android6.2中修復)。

wx.config({
    debug: true, // 開啓調試模式,調用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數,可以在pc端打開,參數信息會通過log打出,僅在pc端時纔會打印。
    appId: '', // 必填,公衆號的唯一標識
    timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名
    jsApiList: [] // 必填,需要使用的JS接口列表
});

這一步就有很大的問題了,這麼多的參數是從哪裏來的!

——1.先不管其他的,我們現在所需要的:(appId是微信公衆號的appId,可以寫死或者服務器返回)

  timestamp: , // 必填,生成簽名的時間戳
    nonceStr: '', // 必填,生成簽名的隨機串
    signature: '',// 必填,簽名

這樣看來,其實真正需要的是 signature 簽名

——2.看下signature 的生成流程:

生成簽名之前必須先了解一下jsapi_ticket,jsapi_ticket是公衆號用於調用微信JS接口的臨時票據。正常情況下,jsapi_ticket的有效期爲7200秒,通過access_token來獲取。由於獲取jsapi_ticket的api調用次數非常有限,頻繁刷新jsapi_ticket會導致api調用受限,影響自身業務,開發者必須在自己的服務全局緩存jsapi_ticket 。

1.參考以下文檔獲取access_token(有效期7200秒,開發者必須在自己的服務全局緩存access_token):../15/54ce45d8d30b6bf6758f68d2e95bc627.html

2.用第一步拿到的access_token 採用http GET方式請求獲得jsapi_ticket(有效期7200秒,開發者必須在自己的服務全局緩存jsapi_ticket):https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

上面的是官方的文檔,說要拿到並且緩存 access_token 接口調用憑據 和 jsapi_ticket 臨時票據,拿着access_token 去獲取jsapi_ticket ,獲得jsapi_ticket之後,自己生成個隨機字符串(不懂的,網上百度怎麼搞)加上時間戳,加上url地址,自己拼接好,最後進行sha1處理,就得到signature, 很是扯皮!另外access_token 一天的次數2000次jsapi_ticket 一天的次數是100萬次,都緩存下來,也可以只緩存token;(我是隻緩存了token)

——這裏說一下 access_token 

access_token是公衆號的全局唯一接口調用憑據,公衆號調用各接口時都需使用access_token。開發者需要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前爲2個小時,需定時刷新,重複獲取將導致上次獲取的access_token失效。

公衆平臺的API調用所需的access_token的使用及生成方式說明:

1、建議公衆號開發者使用中控服務器統一獲取和刷新Access_token,其他業務邏輯服務器所使用的access_token均來自於該中控服務器,不應該各自去刷新,否則容易造成衝突,導致access_token覆蓋而影響業務;

2、目前Access_token的有效期通過返回的expire_in來傳達,目前是7200秒之內的值。中控服務器需要根據這個有效時間提前去刷新新access_token。在刷新過程中,中控服務器可對外繼續輸出的老access_token,此時公衆平臺後臺會保證在5分鐘內,新老access_token都可用,這保證了第三方業務的平滑過渡;

3、Access_token的有效時間可能會在未來有調整,所以中控服務器不僅需要內部定時主動刷新,還需要提供被動刷新access_token的接口,這樣便於業務服務器在API調用獲知access_token已超時的情況下,可以觸發access_token的刷新流程。

公衆號和小程序均可以使用AppID和AppSecret調用本接口來獲取access_token。AppID和AppSecret可在“微信公衆平臺-開發-基本配置”頁中獲得(需要已經成爲開發者,且帳號沒有異常狀態)。調用接口時,請登錄“微信公衆平臺-開發-基本配置”提前將服務器IP地址添加到IP白名單中,點擊查看設置方法,否則將無法調用成功。小程序無需配置IP白名單。

簡單來說就是調用微信的分享接口,需要用到一個憑證access_token,而這個憑證是有數量和有效時間限制的,所以需要用自己的服務器做緩存處理,當access_token過期後再去請求新的access_token,需要一臺服務器和配置ip白名單。

PHP來做的話:

 a. 先定義個access_tokenjson文件,我選擇用json文件存,沒有用數據庫存

{
    "access_token": "xxx",
    "expires": 12345
}

 b.jssdk.php文件: 文件夾目錄要有修改權限 sudo chmod -R 777 your_dir 

思路:先取緩存的token的時間,與現在的時間對比,如果現在的時間大於緩存時間,則把現在時間+7200賦給緩存的時間,如果超時請求新的token,如果沒超時用緩存的token,再生成jsapi_ticket,生成signature簽名。

步驟四:通過ready接口處理成功驗證 又回到前端頁面上

wx.ready(function(){
    // config信息驗證後會執行ready方法,所有接口調用都必須在config接口獲得結果之後,config是一個客戶端的異步操作,所以如果需要在頁面加載時就調用相關接口,則須把相關接口放在ready函數中調用來確保正確執行。對於用戶觸發時才調用的接口,則可以直接調用,不需要放在ready函數中。
});

配置好就可以用分享接口了

分享接口

自定義“分享給朋友”及“分享到QQ”按鈕的分享內容(1.4.0)

 

wx.ready(function () {   //需在用戶可能點擊分享按鈕前就先調用
    wx.updateAppMessageShareData({ 
        title: '', // 分享標題
        desc: '', // 分享描述
        link: '', // 分享鏈接,該鏈接域名或路徑必須與當前頁面對應的公衆號JS安全域名一致
        imgUrl: '', // 分享圖標
        success: function () {
          // 設置成功
        }
});

更多接口可以去文檔裏看

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章