写在前面的一段话
关于NBA、基于深刻的莫过于高中时期的，买篮球先锋报、用手机2G网络和同学凑在一起看笔墨直播、还恐怕班主任老师创造，
印象中第一次理解NBA是在2006年的英语书上，有一页上面是所有球队的logo以及名字、那时开始逐步的理解篮球、理解到了休斯顿火箭队大姚、
从此对火箭队情有独钟、时至今日依然对那支22连胜的火箭有太多感情、时至今日绿军三巨子、邓肯、蜗壳都已经退役了,oh~oh~oh彷佛有点跑题了，还是回到主题、记录花了几天韶光写的这个小程序
话不多少先上源码地址
小程序GitHub地址: https://github.com/ecitlm/wx-nba
后端接口API地址:可先参照 https://ecitlm.github.io/TP5_Splider/#/?id=tp5_splider
项眼前面的 controller 下的Nba.php类
部分界面效果体验
关于接口API
接口来源是剖析腾体育H5端 的接口，利用php对接口进行抓取整理、切对接口进行了署名校验，已经实现，但没有用上小程序之中通过，接口整理一开始利用的是ThinkPHP5对接口统一整理的、后面利用PhalAPi对接口文档进行了再次的整理，整理的接口有以下、通过以下接口数据完成一个大略的大气的NBA小程序的开拓、目前小程序正处于上架申请中。
逐日赛事直播列表接口
球赛直播实时详情接口
实时数据统计接口
球队进本信息接口
球队球员阵容名单接口
球员基本信息赛季数据接口
30只球队排名数据接口
篮球快讯新闻列表接口
新闻详情接口
新闻评论数据接口
在线接口系统地址 https://wxapp.it919.cn/wx/listAllApis.php
小程序界面
界面整体有十几个、包含以上接口对应的UI界面、以下界面属于运用的截图界面
项目目录构造
项目目录构造如下
网络要求的封装
网络要求利用小程序的 wx.request+ promise+bluebird 对接口要求方法进行封装,一些列出的代码属于项目的核心代码
utils目录下的fetch.js文件所对应的方法
1234567891011121314151617181920212223242526272829
const Promise = require(\公众./bluebird\"大众); //为了兼容问题/ 网络要求API接口 @param {String} api api 根地址 @param {String} path 要求路径 @param {Objece} params 参数 /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), //如果这里须要合并署名韶光戳参数时候可以这么写header: { \公众Content-Type\"大众: \"大众json\公众 },success: function(res) {resolve(res);wx.hideLoading();},fail: function(err) {wx.hideLoading();reject(err);}});});};
所有接口的要求放在api.js之中
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
const fetch = require(\"大众./fetch\公众);const API_DOMAIN = \公众https://api.xxx.cn/api\公众;/ @param {String} 接口地址 @param {Objece} params 接口参数参数 /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);}//直播内容function live_content(params) {return fetchApi(\"大众Nba/live_content\"大众, params).then(res => res.data);}//球员技能统计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);}//同盟排名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};
数据渲染问题
在对要求到的接口数据渲染的过程之中并没有碰着什么大的问题，页面布局上的事情也就没什么可讲的了，比较麻烦的事情是须要对接口返回的每个字段进行剖析所对应的显示问题，这个再记录一下赛事直播界面的数据、新闻详情的数据渲染解析HTML的问题。
页面布局
小程序页面布局利用的单位是rpx,对应设计稿750px是最舒畅的、rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
数据绑定渲染wxml页面
12345678910111213141516171819202122232425262728293031323334353637
var app = getApp();Page({data: {list: [],footer: 0 //footer 底部导航栏切换高亮所要用到的值},onLoad: function() {this.nab_schedule(\公众\"大众) //初始化数据},//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)});},//选择日期变革要求数据selectDate: function(e) {this.nab_schedule(e.target.dataset.time);},// 点击日期组件确定事宜 bindDateChange: function(e) {this.nab_schedule(e.detail.value);}})
新闻详情页面渲染利用到了wxParse，能搞方便的办理渲染HTML转wxml的问题
模板页面用import导入、渲染HTML
12345
<import src=\"大众../wxParse/wxParse.wxml\"大众 /><view class=\公众wxParse\"大众><template is=\"大众wxParse\"大众 data=\"大众{{wxParseData:article.nodes}}\"大众 /></view></view>
在接口要求成功时候对res.body进行一个操作处理，利用起来也比较大略
1234567891011121314151617181920212223242526
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 = \"大众文章已经删除\"大众;WxParse.wxParse('article', 'html', article, that, 5);});}
图片大图预览功能实现
演示：
小程序内置的图片查看放大组件wx.previewImage，利用该方法可以实现图片放大预览效果功能
1234
wx.previewImage({current: url, // 当前显示图片的http链接urls: [url] // 须要预览的图片http链接列表})
总结
小程序一贯处于不温不火中、在笔者这这篇归档时、小程序已经开通内嵌网页功能、整体来说小程序还是很随意马虎上手的、主要得多是多看文档，查找干系资料、仅以此文章记录开拓体验、小运用还会持续更新、有感兴趣的小伙伴欢迎互换、源代码托管在GitHub
原文地址 https://code.it919.cn/2017/11/wx-nba-application/
