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

ecitlm發表於2018-04-17

wx-nba

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

原始碼地址:

wx-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介面、以下介面屬於應用的截圖介面

preview
preview
preview
preview
preview
preview
preview
preview
preview
preview
preview
preview

關於介面簽名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);
};

複製程式碼

如果對您有幫助,請給個Star支援一下哈~

原始碼地址

看到這裡其實還沒完

樓主還擼了一個基於Vue.js版本的、真的假的?

下面是Vue版本的二維碼體驗

Vue-NBA

Vue版本 GitHub原始碼地址

小程式版原始碼地址

未帶待續

相關文章