寫(xiě)在前面的一段話

關(guān)于NBA、基于深刻的莫過(guò)于高中時(shí)代的，買(mǎi)籃球先鋒報(bào)、用手機(jī)2G網(wǎng)絡(luò)和同學(xué)湊在一起看文字直播、還生怕班主任老師發(fā)現(xiàn)， 印象中第一次了解NBA是在2006年的英語(yǔ)書(shū)上，有一頁(yè)上面是所有球隊(duì)的logo以及名字、那時(shí)開(kāi)始慢慢的了解籃球、了解到了休斯頓火箭隊(duì)大姚、 從此對(duì)火箭隊(duì)情有獨(dú)鐘、時(shí)至今日依然對(duì)那支22連勝的火箭有太多感情、時(shí)至今日綠軍三巨頭、鄧肯、蝸殼都已經(jīng)退役了,ohohoh好像有點(diǎn)跑題了，還是回到主題、記錄花了幾天時(shí)間寫(xiě)的這個(gè)小程序 話不多少先上源碼地址 小程序GitHub地址: https://github.com/ecitlm/wx-nba 后端接口API地址:可先參照 https://ecitlm.github.io/TP5_Splider/#/?id=tp5_splider 項(xiàng)目下面的 controller 下的Nba.php類(lèi)

部分界面效果體驗(yàn)

關(guān)于接口API

接口來(lái)源是分析騰*體育H5端 的接口，使用php對(duì)接口進(jìn)行抓取整理、切對(duì)接口進(jìn)行了簽名校驗(yàn)，已經(jīng)實(shí)現(xiàn)，但沒(méi)有用上小程序之中通過(guò)，接口整理一開(kāi)始使用的是ThinkPHP5對(duì)接口統(tǒng)一整理的、后面使用PhalAPi對(duì)接口文檔進(jìn)行了再次的整理，整理的接口有以下、通過(guò)以下接口數(shù)據(jù)完成一個(gè)簡(jiǎn)單的大氣的NBA小程序的開(kāi)發(fā)、目前小程序正處于上架申請(qǐng)中。 每日賽事直播列表接口 球賽直播實(shí)時(shí)詳情接口 實(shí)時(shí)數(shù)據(jù)統(tǒng)計(jì)接口 球隊(duì)進(jìn)本信息接口 球隊(duì)球員陣容名單接口 球員基本信息賽季數(shù)據(jù)接口 30只球隊(duì)排名數(shù)據(jù)接口 籃球快訊新聞列表接口 新聞詳情接口 新聞評(píng)論數(shù)據(jù)接口 在線接口系統(tǒng)地址 https://wxapp.it919.cn/wx/listAllApis.php

小程序界面

界面整體有十幾個(gè)、包含以上接口對(duì)應(yīng)的UI界面、以下界面屬于應(yīng)用的截圖界面

項(xiàng)目目錄結(jié)構(gòu)

項(xiàng)目目錄結(jié)構(gòu)如下

網(wǎng)絡(luò)請(qǐng)求的封裝

網(wǎng)絡(luò)請(qǐng)求使用小程序的 wx.request+ promise+bluebird 對(duì)接口請(qǐng)求方法進(jìn)行封裝,一些列出的代碼屬于項(xiàng)目的核心代碼 utils目錄下的fetch.js文件所對(duì)應(yīng)的方法

const Promise = require("./bluebird"); //為了兼容問(wèn)題
/**
 * 網(wǎng)絡(luò)請(qǐng)求API接口
 * @param  {String} api    api 根地址
 * @param  {String} path   請(qǐng)求路徑
 * @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í)間戳參數(shù)時(shí)候可以這么寫(xiě)
            header: { "Content-Type": "json" },
            success: function(res) {
                resolve(res);
                wx.hideLoading();
            },
            fail: function(err) {
                wx.hideLoading();
                reject(err);
            }
        });
    });
};

所有接口的請(qǐng)求放在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);
}

//球員技術(shù)統(tǒng)計(jì)
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);
}

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

//球隊(duì)陣容
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新聞評(píng)論
function news_comments(params) {
    return fetchApi("Nba/news_comments", params).then(res => res.data);
}

//關(guān)于我
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ù)渲染問(wèn)題

在對(duì)請(qǐng)求到的接口數(shù)據(jù)渲染的過(guò)程之中并沒(méi)有遇到什么大的問(wèn)題，頁(yè)面布局上的事情也就沒(méi)什么可講的了，比較麻煩的事情是需要對(duì)接口返回的每個(gè)字段進(jìn)行分析所對(duì)應(yīng)的顯示問(wèn)題，這個(gè)再記錄一下賽事直播界面的數(shù)據(jù)、新聞詳情的數(shù)據(jù)渲染解析HTML的問(wèn)題。

頁(yè)面布局

小程序頁(yè)面布局使用的單位是rpx,對(duì)應(yīng)設(shè)計(jì)稿750px是最舒服的、rpx可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

數(shù)據(jù)綁定渲染wxml頁(yè)面

var app = getApp();

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

    },
    onLoad: function() {
        this.nab_schedule("") //初始化數(shù)據(jù)
    },
    //ajax 列表請(qǐng)求
    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)
            });

    },

    //選擇日期變化請(qǐng)求數(shù)據(jù)
    selectDate: function(e) {
        this.nab_schedule(e.target.dataset.time);
    },
    //  點(diǎn)擊日期組件確定事件  
    bindDateChange: function(e) {
        this.nab_schedule(e.detail.value);
    }
})

新聞詳情頁(yè)面渲染使用到了wxParse，能搞方便的解決渲染HTML轉(zhuǎn)wxml的問(wèn)題 模板頁(yè)面用import導(dǎo)入、渲染HTML

 <import src="../wxParse/wxParse.wxml" />
  <view class="wxParse">
    <template is="wxParse" data="{{wxParseData:article.nodes}}" />
  </view>
</view>

在接口請(qǐng)求成功時(shí)候?qū)es.body進(jìn)行一個(gè)操作處理，使用起來(lái)也比較簡(jiǎn)單

 onLoad: function (e) {

    var data = {
      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=" + (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);
      });
  }

圖片大圖預(yù)覽功能實(shí)現(xiàn)

演示：

小程序內(nèi)置的圖片查看放大組件wx.previewImage，使用該方法可以實(shí)現(xiàn)圖片放大預(yù)覽效果功能

wx.previewImage({
      current: url, // 當(dāng)前顯示圖片的http鏈接
      urls: [url] // 需要預(yù)覽的圖片http鏈接列表
    })

總結(jié)

小程序一直處于不溫不火中、在筆者這這篇?dú)w檔時(shí)、小程序已經(jīng)開(kāi)通內(nèi)嵌網(wǎng)頁(yè)功能、整體來(lái)說(shuō)小程序還是很容易上手的、重要得多是多看文檔，查找相關(guān)資料、僅以此文章記錄開(kāi)發(fā)體驗(yàn)、小應(yīng)用還會(huì)持續(xù)更新、有感興趣的小伙伴歡迎交流、源代碼托管在GitHub