从0开始实现一个NBA赛事直播新闻小程序(含后台接口)

原创 我是小明同学 随笔 前端 558阅读 2018-02-23 11:50:03 举报

写在前面的一段话

关于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类

部分界面效果体验

<center>

</center>

关于接口API

接口来源是分析腾*体育H5端 的接口,使用php对接口进行抓取整理、切对接口进行了签名校验,已经实现,但没有用上小程序之中通过,接口整理一开始使用的是ThinkPHP5对接口统一整理的、后面使用PhalAPi对接口文档进行了再次的整理,整理的接口有以下、通过以下接口数据完成一个简单的大气的NBA小程序的开发、目前小程序正处于上架申请中。

  • 每日赛事直播列表接口
  • 球赛直播实时详情接口
  • 实时数据统计接口
  • 球队进本信息接口
  • 球队球员阵容名单接口
  • 球员基本信息赛季数据接口
  • 30只球队排名数据接口
  • 篮球快讯新闻列表接口
  • 新闻详情接口
  • 新闻评论数据接口
    在线接口系统地址 https://wxapp.it919.cn/wx/listAllApis.php
    图片

小程序界面

> 界面整体有十几个、包含以上接口对应的UI界面、以下界面属于应用的截图界面

项目目录结构

项目目录结构如下

网络请求的封装

网络请求使用小程序的 wx.request+ promise+bluebird 对接口请求方法进行封装,一些列出的代码属于项目的核心代码
utils目录下的fetch.js文件所对应的方法

所有接口的请求放在api.js之中

数据渲染问题

在对请求到的接口数据渲染的过程之中并没有遇到什么大的问题,页面布局上的事情也就没什么可讲的了,比较麻烦的事情是需要对接口返回的每个字段进行分析所对应的显示问题,这个再记录一下赛事直播界面的数据、新闻详情的数据渲染解析HTML的问题。

页面布局

小程序页面布局使用的单位是rpx,对应设计稿750px是最舒服的、rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备rpx换算px (屏幕宽度/750px换算rpx (750/屏幕宽度)
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone61rpx = 0.5px1px = 2rpx

数据绑定渲染wxml页面

新闻详情页面渲染使用到了wxParse,能搞方便的解决渲染HTMLwxml的问题
模板页面用import导入、渲染HTML

在接口请求成功时候对res.body进行一个操作处理,使用起来也比较简单

图片大图预览功能实现

演示:

小程序内置的图片查看放大组件wx.previewImage,使用该方法可以实现图片放大预览效果功能

总结

小程序一直处于不温不火中、在笔者这这篇归档时、小程序已经开通内嵌网页功能、整体来说小程序还是很容易上手的、重要得多是多看文档,查找相关资料、仅以此文章记录开发体验、小应用还会持续更新、有感兴趣的小伙伴欢迎交流、源代码托管在GitHub

评论 ( 1 )
最新评论
大神M 2018-02-23 12:12:22 1F

不错,刚好用上!