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

ecitlm發表於2018-04-17

wx-nba

wechat app for nba liveNBA賽事直播、使用小程式實現的一個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原始碼地址

小程式版原始碼地址

未帶待續

來源:https://juejin.im/post/5ad614c46fb9a028d7011e7f?utm_medium=fe&utm_source=weixinqun

相關文章