新媒体技术 New Medium
2019年12月 月刊 总第332期
文 / 天津广播电视台 高铭
用户进入小程序后，可以选择特定频 JS 文件，基于 JavaScript 的逻辑层框
摘要 ：本文对 “天津广播在 线收听” 小程序的设计和开 发进行了阐述和说明。
架 ；WXML 视 图 层 文 件， 是 MINA 设计的一套标签语言 ；WXSS 样式文 件， 用 于 描 述 WXML 的 组 件 样 式 ； JSON 文件，配置文件，用于单个页
关键词 ：小程序 广播 应用
本 文 将 介 绍“ 天 津 广 播 在 线 收 面的配置和整个项目的配置。
听”小程序开发的技术背景、框架、 小程序框架提供丰富的
实现和展示页面。
原生 API，可方便调用的多种功能，
包括用户信息、本地存储、支付功能等，
随 着 移 动 互 联 网 的 应 用 和 发 展，
1 小程序框架
在小程序开发文档中提供了网络、媒
小程序是基于 MINA 框架开 体、文件、数据缓存、位置信息、设备、
智能手机用户逐年增多，几乎覆盖了 发的，整个系统分为两块 ：图层和逻 界面、日志等多种类 API。
90% 以上的移动用户，越来越多的应 辑层。MINA 优点在于可以让数据与
小程序生命周期表示小程序加
用软件转向了智能手机平台。近几年 视图保持同步，做数据修改时，只需 载、运行、切换的整个过程，在小程序
发展起来的应用发布平台“小程 要在逻辑层修改数据，视图层就会做 编程过程中起到至关重要的作用，如
序 ”，在 市 场 上 凭 借其广泛的腾讯微 相应的更新。框架中有四种文件类型 ： 图 1 所示。
信用户体，在技术上实现了免安装，
屏蔽安卓、苹果 iOS 不同平台，让发
布者更专注于产品研发，节约跨平台
开发的时间和经济成本，成为新的应
用发布渠道。天津广播的收听渠道也
从传统的广播发展到网页收听的互联
网广播，再到智能手机客户端“劲听”在线图片处理
手机广播 APP，紧跟互联网发展步伐。
为满足用户通过渠道收听广播的
需求，天津广播电视台研发了“天津
广播在线收听”小程序。
“天津广播在线收听”小程序 提供天津广播 10 个频道的广播直播流，
图 1 小程序生命周期
. i 53
New Medium 新媒体技术
2 “天津广播在线收听” 小程序框架
“天津广播在线收听”小程序 有两个动态加载页面，其中，主页面 “home-page”为小程序首页，跳转页 面为“liveRadio-play”，每个页面都 有 JS、JSON、WXML、WXSS 四 个 文件，在 Resource 目录中存储小程序 加载所需的静态图片，在 Img-loader 中保存图片加载算法。
图 2 页面逻辑结构图
3 “天津广播在线收听” 小程序关键技术
“天津广播在线收听”小程 序调用列小程序网络、媒体（Video）、 文件等 API。其中，网络请求的后台 服务部署在天津广播电视台，提供基 础数据和音频直播流。
小程序主要动态业务逻辑在“.js” 中实现，包括页面的请求和加载，两 个页面的业务逻辑结构，如图 2 所示。
核心方法释义如图 3 所示。 本小程序客户端向服务器请求的 数 据 流 如 图 4 所 示， 其 中，“ 后 台 服 务 1”提供图片和直播流服务，“后台 服务 2”提供当前节目的名称、时段 和当前频道的节目单。
4 “天津广播在线收听”
小程序实现与展示
图 3 核心方法释义
“home-page” 页 面 排 布 天 津 广 播 10 个 频 道 的 图 标， 页 面 排 布 规 则
其中，蓝方块部分表示小程序 页面跳转时，原有页面运行“onHide” 在 home-page.wxml 设 定。 页 面 的
APP 的生命周期，绿方块部分表示 函 数， 跳 转 的 新 页 面 运 行“onLoad” 请 求 和 加 载 程 序 由 home-page.js 完
页面的生命周期。小程序初始化完成 和“onShow”函数。当小程序切换到 成， 小 程 序 首 先 向 服 务 器 1 发 起 10
之后首次触发页面的“onLoad”函数， 后 台， 运 行 APP 的“onHide” 函 数， 个 URL 请求，采用回调方式，建立下
并且只触发一次。页面“onShow”函 切换到前台时运行 APP 的“onShow” 载队列，根据图片的随机返回顺序进
数中执行页面的加载、请求等工作。当 函数。
行异步加载，不会由于某个请求返回
54
. i
图 4 数据请求流程
图 5 收听直播页面
图 6 查看节目单页面
新媒体技术 New Medium
2019年12月 月刊 总第332期
时间较长而影响整体的加载速度。在 home-page.wxss 中 设 置 1s 的 淡 入 动画效果，页面体现出加载层次，提 升用户体验。
每 个 频 道 图 标 都 是 一 个 链 接， 点 击图标便进入该频道的直播页面，收听 广播。每个图标携带一个位置信息，作 为 参 数 传 递 到 Live Radio-play 页 面。 通过识别该信息，Live Radio-play 可 以从本地缓存的频道列表中到请求的 频道，调取该频道的图片请求的 URL， 从而请求加载该频道的页面 ；调取该频 道的直播流请求 URL，加载音频。比如， 在首页点击“新闻广播”图标，就能跳 转到“新闻广播”的频道页面，播放新 闻广播的直播流，而不是其他频道的。
Live Radio-play 页面设计成手机 播放器的样式，可以设置暂停、继续播 放，播放前一个频道或者下一个频道的 直播。此外，该页面加载列 Swiper 组 件， 通 过 触 摸 滑 动 在 页 面 内 切 换 显 示， 默认显示播放器页面，用户可以向左滑 动页面查看节目单。Live Radio-play 页面以文艺广播为例，如图 5、图 6 所示。
5 总结与展望
目 前，“ 天 津 广 播 在 线 收 听 ” 微 信小程序实现了直播节目的发布功能， 未来计划增加点播功能，进一步优化 页面，提供更友好的展示效果。
该项目的开发完全由天津广播电 视台自主完成，是在小程序开发 领域的一次全新尝试，同时也是广播 在新媒体领域发声的技术探索与业务 延伸。该项目为天津广播的传播拓展 了一个新的渠道，也为今后天津广播 在小程序平台的业务拓展积累了 宝贵的经验。
. i 55
发布评论