微信小程式之-NBA線上直播小程式開發

ecitlm發表於2018-04-17

原文網址 : https://flycode.co/archives/49725

wx-nba

wechat app for nba live NBA賽事直播、使用小程式實現的一個NBA球賽直播新聞小程式

原始碼地址:

如何使用

git clone https://github.com/ecitlm/wx-nba.git
//將clone的專案檔案包匯入 微信web開發者工具 設定自己註冊的appid、即可執行
複製程式碼

已完成功能模組

[x] 每日賽事直播列表、以及賽事預告
[x] NBA賽事最新新聞資訊列表、新聞詳情以及新聞評論
[x] wxParse(富文字解析, 支援HTML和Markdown) 實現富文字資訊詳情
[x] NBA球隊東西部球隊戰績排名
[x] NBA30支球隊資訊詳情戰績、隊內得分王、籃板王、助攻王
[x] 球隊球員陣容、82場比賽賽程資料
[x] 球員資料排名統計、得分、籃板、助攻、搶斷、蓋帽等聯盟前50強
[x] 球員詳情資料(出生、基本資訊、選秀、位置、賽季資料)
[x] 直播資料、直播詳情、實時比賽詳情、球員比賽資料統計
[ ]視訊集錦、賽事集錦

關於介面API

介面來源於3G QQ 資料爬蟲介面，使用php對介面進行資料抓取以及資料清洗、切對介面進行了簽名校驗，整理的介面有以下、通過以下介面資料完成一個簡單的大氣的NBA小程式的開發。

[x] 球賽直播實時詳情介面
[x] 實時資料統計介面
[x] 球隊進本資訊介面
[x] 球隊球員陣容名單介面
[x] 球員基本資訊賽季資料介面
[x] 球隊82場比賽每月賽程
[x] 30只球隊排名資料介面
[x] 籃球快訊新聞列表介面
[x] 新聞詳情介面
[x] 新聞評論資料介面

最新線上介面系統列表介面地址

介面系統原始碼地址

github.com/ecitlm/wx-n…

小程式 UI 介面截圖

介面整體有十幾個、包含以上介面對應的UI介面、以下介面屬於應用的截圖介面

關於介面簽名sign 生成問題

介面請求籤名，首先客戶端與服務端約定好一個appkey
排除簽名引數（sign和介面的service）
將剩下的全部引數和appkey，按引數名字進行字典升序排序
將排序好的引數，全部用字串拼接起來
進行md5運算，生成簽名sign

js簽名方法生成sign

/**
 * 將引數+簽名的值按照字典排序得到簽名sign 引數的值按照升序排列
 * @param {Object} params   引數集合    
 */
const getSign = (params) => {
    for (let key in params) {
        if (!params[key]) {
            delete params[key];
        }
    }
    params.appkey = appkey;
    let keyArr = Object.keys(params).sort();
    let newObj = {};
    let  tmpStr = '';
    for (let i in keyArr) {
        newObj[keyArr[i]] = params[keyArr[i]];
        tmpStr += params[keyArr[i]];
    }
    delete params['appkey']; //從引數集合中剔除appkey引數傳遞
    return md5(tmpStr);
};

複製程式碼