寫在前面的一段話
關于NBA、基于深刻的莫過于高中時代的，買籃球先鋒報、用手機2G網(wǎng)絡和同學湊在一起看文字直播、還生怕班主任老師發(fā)現(xiàn)， 印象中第一次了解NBA是在2006年的英語書上，有一頁上面是所有球隊的logo以及名字、那時開始慢慢的了解籃球、了解到了休斯頓火箭隊大姚、 從此對火箭隊情有獨鐘、時至今日依然對那支22連勝的火箭有太多感情、時至今日綠軍三巨頭、鄧肯、蝸殼都已經(jīng)退役了,ohohoh好像有點跑題了，還是回到主題、記錄花了幾天時間寫的這個小程序 話不多少先上源碼地址 小程序GitHub地址: https://github.com/ecitlm/wx-nba 后端接口API地址:可先參照 https://ecitlm.github.io/TP5_Splider/#/?id=tp5_splider 項目下面的 controller 下的Nba.php類
部分界面效果體驗
關于接口API
接口來源是分析騰*體育H5端 的接口，使用php對接口進行抓取整理、切對接口進行了簽名校驗，已經(jīng)實現(xiàn)，但沒有用上小程序之中通過，接口整理一開始使用的是ThinkPHP5對接口統(tǒng)一整理的、后面使用PhalAPi對接口文檔進行了再次的整理，整理的接口有以下、通過以下接口數(shù)據(jù)完成一個簡單的大氣的NBA小程序的開發(fā)、目前小程序正處于上架申請中。 每日賽事直播列表接口 球賽直播實時詳情接口 實時數(shù)據(jù)統(tǒng)計接口 球隊進本信息接口 球隊球員陣容名單接口 球員基本信息賽季數(shù)據(jù)接口 30只球隊排名數(shù)據(jù)接口 籃球快訊新聞列表接口 新聞詳情接口 新聞評論數(shù)據(jù)接口 在線接口系統(tǒng)地址 https://wxapp.it919.cn/wx/listAllApis.php
小程序界面
界面整體有十幾個、包含以上接口對應的UI界面、以下界面屬于應用的截圖界面
項目目錄結構
項目目錄結構如下
網(wǎng)絡請求的封裝
網(wǎng)絡請求使用小程序的 wx.request+ promise+bluebird 對接口請求方法進行封裝,一些列出的代碼屬于項目的核心代碼 utils目錄下的fetch.js文件所對應的方法
const Promise = require("./bluebird"); //為了兼容問題
/**
 * 網(wǎng)絡請求API接口
 * @param  {String} api    api 根地址
 * @param  {String} path   請求路徑
 * @param  {Objece} params 參數(shù)
 */
module.exports = function(api, path, params) {
    wx.showLoading({
        title: "加載中"
    });
    console.log(`${api}/${path}`);
    console.log(params);
    return new Promise((resolve, reject) => {
        wx.request({
            url: `${api}/${path}`,
            data: Object.assign({}, params), //如果這里需要合并簽名時間戳參數(shù)時候可以這么寫
            header: { "Content-Type": "json" },
            success: function(res) {
                resolve(res);
                wx.hideLoading();
            },
            fail: function(err) {
                wx.hideLoading();
                reject(err);
            }
        });
    });
};
所有接口的請求放在api.js之中
const fetch = require("./fetch");
const API_DOMAIN = "https://api.xxx.cn/api";

/**
 * @param  {String} 接口地址   
 * @param  {Objece} params 接口參數(shù)參數(shù)
 */
function fetchApi(api, params) {
    return fetch(API_DOMAIN, api, params);
}

//NBA比賽直播
function nab_schedule(params) {
    return fetchApi("Nba/schedule", params).then(res => res.data);
}

//直播室信息
function live_detail(params) {
    return fetchApi("Nba/live_detail", params).then(res => res.data);
}

//直播內(nèi)容
function live_content(params) {
    return fetchApi("Nba/live_content", params).then(res => res.data);
}

//球員技術統(tǒng)計
function technical_statistics(params) {
    return fetchApi("Nba/technical_statistics", params).then(res => res.data);
}
//球員詳情
function player_detail(params) {
    return fetchApi("Nba/player_detail", params).then(res => res.data);
}

//聯(lián)盟排名
function team_rank(params) {
    return fetchApi("Nba/team_rank", params).then(res => res.data);
}

//球隊信息
function team_info(params) {
    return fetchApi("Nba/team_info", params).then(res => res.data);
}

//球隊陣容
function Lineup(params) {
    return fetchApi("Nba/Lineup", params).then(res => res.data);
}

//新聞詳情
function news_info(params) {
    return fetchApi("Nba/news_info", params).then(res => res.data);
}
//NBA 新聞快訊
function news_list(params) {
    return fetchApi("Nba/new_list", params).then(res => res.data);
}
//NBA新聞評論
function news_comments(params) {
    return fetchApi("Nba/news_comments", params).then(res => res.data);
}

//關于我
function website(params) {
    return fetchApi("Nba/website", params).then(res => res.data);
}
module.exports = {
    nab_schedule,
    live_detail,
    live_content,
    technical_statistics,
    player_detail,
    team_rank,
    team_info,
    Lineup,
    news_info,
    news_comments,
    news_list,
    website
};
數(shù)據(jù)渲染問題
在對請求到的接口數(shù)據(jù)渲染的過程之中并沒有遇到什么大的問題，頁面布局上的事情也就沒什么可講的了，比較麻煩的事情是需要對接口返回的每個字段進行分析所對應的顯示問題，這個再記錄一下賽事直播界面的數(shù)據(jù)、新聞詳情的數(shù)據(jù)渲染解析HTML的問題。
頁面布局
小程序頁面布局使用的單位是rpx,對應設計稿750px是最舒服的、rpx可以根據(jù)屏幕寬度進行自適應。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
數(shù)據(jù)綁定渲染wxml頁面
var app = getApp();

Page({
    data: {
        list: [],
        footer: 0  //footer 底部導航欄切換高亮所要用到的值

    },
    onLoad: function() {
        this.nab_schedule("") //初始化數(shù)據(jù)
    },
    //ajax 列表請求
    nab_schedule: function(param) {
        var that = this;
        var params = {
            date: param
        };
        app.api.nab_schedule(params)
            .then(res => {
                that.setData({
                    list: res.data.data
                });
            })
            .catch(e => {
                console.error(e)
            });

    },

    //選擇日期變化請求數(shù)據(jù)
    selectDate: function(e) {
        this.nab_schedule(e.target.dataset.time);
    },
    //  點擊日期組件確定事件  
    bindDateChange: function(e) {
        this.nab_schedule(e.detail.value);
    }
})
新聞詳情頁面渲染使用到了wxParse，能搞方便的解決渲染HTML轉(zhuǎn)wxml的問題 模板頁面用import導入、渲染HTML
 <import src="https://www.wxapp-union.com/wxParse/wxParse.wxml" />
  <view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
  </view>
</view>
在接口請求成功時候?qū)es.body進行一個操作處理，使用起來也比較簡單
 onLoad: function (e) {

    var data = https://www.wxapp-union.com/{
      docid: e.docid ||"D230QPOC0005877U"
    }
    var that = this;
    app.api.news_info(data)
      .then(res => {
        console.log(res);
        that.setData({
          item: res.data
        });
        that.news_comments(data);
        if(res.data && res.data.img.length!=0){
           var replaceStr = "<img src="https://www.wxapp-union.com/+ (res.data.img[0])['src'] + ">";
           res.data.body = res.data.body.replace("<!--IMG#0-->", replaceStr);
        }
        WxParse.wxParse('article', 'html', res.data.body, that, 5);

      })
      .catch(e => {
        console.error(e)
        var article = "文章已經(jīng)刪除";
        WxParse.wxParse('article', 'html', article, that, 5);
      });
  }
圖片大圖預覽功能實現(xiàn)
演示：
小程序內(nèi)置的圖片查看放大組件wx.previewImage，使用該方法可以實現(xiàn)圖片放大預覽效果功能
wx.previewImage({
      current: url, // 當前顯示圖片的http鏈接
      urls: [url] // 需要預覽的圖片http鏈接列表
    })
總結
小程序一直處于不溫不火中、在筆者這這篇歸檔時、小程序已經(jīng)開通內(nèi)嵌網(wǎng)頁功能、整體來說小程序還是很容易上手的、重要得多是多看文檔，查找相關資料、僅以此文章記錄開發(fā)體驗、小應用還會持續(xù)更新、有感興趣的小伙伴歡迎交流、源代碼托管在GitHub