从0开始写一个NBA赛事直播新闻小程序+后台接口数据 - 简书
从0开始写一个NBA赛事直播新闻小程序+后台接口数据
写在前面的一段话
关于NBA、基于深刻的莫过于高中时代的，买篮球先锋报、用手机2G网络和同学凑在一起看文字直播、还生怕班主任老师发现，
印象中第一次了解NBA是在2006年的英语书上，有一页上面是所有球队的logo以及名字、那时开始慢慢的了解篮球、了解到了休斯顿火箭队大姚、
从此对火箭队情有独钟、时至今日依然对那支22连胜的火箭有太多感情、时至今日绿军三巨头、邓肯、蜗壳都已经退役了,ohohoh好像有点跑题了，还是回到主题、记录花了几天时间写的这个小程序
话不多少先上源码地址
小程序GitHub地址:
后端接口API地址:可先参照
项目下面的 controller 下的Nba.php类
部分界面效果体验
关于接口API
接口来源是分析腾*体育H5端 的接口，使用php对接口进行抓取整理、切对接口进行了签名校验，已经实现，但没有用上小程序之中通过，接口整理一开始使用的是ThinkPHP5对接口统一整理的、后面使用PhalAPi对接口文档进行了再次的整理，整理的接口有以下、通过以下接口数据完成一个简单的大气的NBA小程序的开发、目前小程序正处于上架申请中。
每日赛事直播列表接口
球赛直播实时详情接口
实时数据统计接口
球队进本信息接口
球队球员阵容名单接口
球员基本信息赛季数据接口
30只球队排名数据接口
篮球快讯新闻列表接口
新闻详情接口
新闻评论数据接口
在线接口系统地址
小程序界面
界面整体有十几个、包含以上接口对应的UI界面、以下界面属于应用的截图界面
项目目录结构
项目目录结构如下
网络请求的封装
网络请求使用小程序的 wx.request+ promise+bluebird 对接口请求方法进行封装,一些列出的代码属于项目的核心代码
utils目录下的fetch.js文件所对应的方法
const Promise = require("./bluebird"); //为了兼容问题
* 网络请求API接口
{String} api
api 根地址
{String} path
{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之中
const fetch = require("./fetch");
const API_DOMAIN = "/api";
{String} 接口地址
{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,
news_info,
news_comments,
news_list,
数据渲染问题
在对请求到的接口数据渲染的过程之中并没有遇到什么大的问题，页面布局上的事情也就没什么可讲的了，比较麻烦的事情是需要对接口返回的每个字段进行分析所对应的显示问题，这个再记录一下赛事直播界面的数据、新闻详情的数据渲染解析HTML的问题。
小程序页面布局使用的单位是rpx,对应设计稿750px是最舒服的、rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。
rpx换算px (屏幕宽度/750
px换算rpx (750/屏幕宽度)
1rpx = 0.42px
1px = 2.34rpx
1rpx = 0.5px
1px = 2rpx
数据绑定渲染wxml页面
var app = getApp();
//footer 底部导航栏切换高亮所要用到的值
onLoad: function() {
this.nab_schedule("") //初始化数据
//ajax 列表请求
nab_schedule: function(param) {
var that =
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
&import src="../wxParse/wxParse.wxml" /&
&view class="wxParse"&
&template is="wxParse" data="{{wxParseData:article.nodes}}" /&
在接口请求成功时候对res.body进行一个操作处理，使用起来也比较简单
onLoad: function (e) {
var data = {
docid: e.docid || "D230QPOC0005877U"
var that =
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，使用该方法可以实现图片放大预览效果功能
wx.previewImage({
current: url, // 当前显示图片的http链接
urls: [url] // 需要预览的图片http链接列表
小程序一直处于不温不火中、在笔者这这篇归档时、小程序已经开通内嵌网页功能、整体来说小程序还是很容易上手的、重要得多是多看文档，查找相关资料、仅以此文章记录开发体验、小应用还会持续更新、有感兴趣的小伙伴欢迎交流、源代码托管在GitHub
地上本没有路
Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具（例如配置管理，服务发现，断路器，智能路由，微代理，控制总线）。分布式系统的协调导致了样板模式, 使用Spring Cloud开发人员可以快速地支持实现这些模式的服务和应用程序。他们将在任何分布式...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金相信有很多朋友...
用两张图告诉你，为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料？ 从这篇文章中你能获得这些料： 知道setContentView()之后发生了什么？ ... Android 获取 View 宽高的常用正确方式，避免为零 - 掘金 相信有很多...
给提问的开发者的建议：提问之前先查询 文档、通过社区右上角搜索搜索已经存在的问题。
写一个简明扼要的标题，并且正文描述清楚你的问题。
提交 BUG：需要带上基础库版本号，设备信息（iOS, Android,开发工具等等），操作系统信息（系统版本），以及可以让他人重现...
本帖最后由 微信小程序社区管理员 于
17:36 编辑（500+个DEMO和800+篇教程）===1：微信小程序官方工具：https://mp./debug/w ... tml?t=12：微信小程序简易...
圣诞快乐 幕布挂满星辰 我知道最闪的那个是你 每个街角都洋溢着祝福 你也在想我吧 在最美的年纪 遇到灿烂的你 从此 聆听每一个秘密 圣诞树下 为远方的你许下心愿 没你的陪伴 路灯下是孤独的影子 把最深的思念寄给你 下一个圣诞陪我过 可好
君心宽容否？ 正信疑：道能化一，无中生有。 且看粉墨逍遥客， 汇演净旦末丑。 多少事，上下其手。 甘随海畔气味投， 比圣贤，廉耻不离口。 冰霜雪，欺凌久。 半弯朗月微醺酒。 暂忘却，客思乡愁，眼前身后。 又是春来蜂蝶斗， 岂止香引色诱。 云雨润，鲜花艳柳。 当笑颜回归巷陋，...
这几天姐姐来北京玩，于是乎，我们商量着第一天去爬长城，主要是因为不到长城非好汉这句话，兴致勃勃的起了个大早赶了个晚集。主要是姐姐坐出租车和客车都晕车，所以这个路线就尽量考虑地铁、火车和公交，避免打车和客车。折腾折腾大约10点多我们就到了，雾霾很重，人却不少，想着礼拜四雾霾天...
我需要振作起来于是我拿着电筒出门了这是个漆黑的晚上远远的一颗星星越来越模糊了人的脑袋开始变得浑浊 这真糟糕我刚刚缝好的伤口还得拖拽着去找同伴你们有谁见到她街机水浒拉霸;数中循环程序怎么用？_百度知道
街机水浒拉霸;数中循环程序怎么用？
我有更好的答案
如果问我希望在那样的如果你只是为了寻求刺激
好啊一来，玩 m1388.P&shyw帮你输，入
采纳率：100%
如果不同被试组的方差不齐性，也就是说，处理的作用就是给每个人原来的的水平加上一个相同的常数;进莱柱册不齐性是不可以进行后续的方差分析的，因为在均值检验中（包括方差分析，t检验等）各个实验处理的效应被认为是一种固定效应，对所有人的作用一样，就说明被试之间原本就差异很大，那我们的方差分析就得不到准确的结论，不知道究竟是实验处理造成了不同被试组间的差异，柱册餸18 &nbsp，也就是方差之比显著不等于1，这样的话，每个被试组原来什么方差，实验处理后还是什么方差，那么?Intr=VjXAUE" rel="nofollow" class="iknow-ueditor-link" target="_blank" title="只支持选中一个链接时生效">电 吇 蝣 戏<a href="/
为您推荐：
其他类似问题
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。nba交易什么意思？_百度知道
nba交易什么意思？
我有更好的答案
NBA交易，一般来讲都是球队之间为了自己的利益最大化进行的球员之间的交换，这一般发生在两支球队之间，也有可能是三支球队之间，甚至是多支球队之间。这样的交易在NBA来讲是极其正常的。
挺不错啊 啊
采纳率：78%
来自团队：
为您推荐：
其他类似问题
您可能关注的内容
nba的相关知识
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。用for循环找出几个数中的最大数？_百度知道
用for循环找出几个数中的最大数？
用for循环输入几个数，再用for循环找出这几个数中的最大数？
我有更好的答案
12,45};int max=num[0],;i&num.I++){
if(max&lt,3;for(int i=0int num[]={23,42
采纳率：20%
for (;;;)for(;;;)
为您推荐：
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。