Skip to content
微信小程序-狗蛋TV是一个分享打动人心事物的微信小程序。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
components 升级去获取用户信息接口 May 25, 2018
images
pages 升级去获取用户信息接口 May 25, 2018
utils first commit May 14, 2018
README.md Update README.md May 30, 2018
app.js
app.json
app.wxss first commit May 14, 2018
project.config.json

README.md

狗蛋TV

狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。

banner.png

引导页

音乐页

短视频页

影评页

搜索页

以下所有 API 均由产品公司自身提供,本人皆从网络获取。获取与共享之行为或有侵犯产品权益的嫌疑。若被告知需停止共享与使用,本人会及时删除此页面与整个项目。请您暸解相关情况,并遵守产品协议。

为了方便大家学习和测试,我们提供了https的接口供大家使用,且用且珍惜。请在微信开发设置中加入request合法域名,或者在开发设置中勾选——不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书。

感谢与支持

    -   ONE一个api: https://api.gordantv.top (服务端做的接口转发,所以有些慢)
    -   豆瓣api: https://douban.uieee.com
    -   QQ音乐api: https://c.y.qq.com
    -   快视频api: https://api.adline.com.cn

项目介绍

狗蛋TV是基于微信小程序+ES6进行开发,能同时运行在Android、iOS环境下。涵盖了音乐、短视频、影评三个版块。

  • 开屏引导图
    1. 调用微信wx.onAccelerometerChange重力感应设备API,实现水波荡漾。
    2. 调用wx.getUserInfo获取用户头像。
  • 工具类
    1. 用Promise封装wx.request(),简化代码结构:
const $get = (url, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      header: { 'Content-Type': 'json' },
      success: resolve,
      fail: reject
    })
  })
}
  1. 电影评分实现
const convertToStarsArray = (average) => {
  const LENGTH = 5;
  const CLS_ON = 'on'; // 全星
  const CLS_HALF = 'half'; // 半星
  const CLS_OFF = 'off'; // 无星
  let result = [];
  let score = Math.round(average) / 2;
  let hasDecimal = score % 1 !== 0
  let integer = Math.floor(score)
  for (let i = 0; i < integer; i++) {
    result.push(CLS_ON)
  }
  if (hasDecimal) {
    result.push(CLS_HALF)
  }
  while (result.length < LENGTH) {
    result.push(CLS_OFF)
  }
  return result;
}
  • 小程序内部组件实现上拉刷新,下拉加载
    方法一:scroll-view 组件
    方法二:onPullDownRefresh和onReachBottom方法实现小程序下拉加载和上拉刷新
  • 阅读模块

    1. 微信小程序使用wxParse解析html
    项目中遇到在微信小程序里需要显示音乐文章的内容,文章内容是通过接口读取的服
    务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,
    那我们需要显示html内容的时候,就可以通过wxParse来实现。
    

项目安装

    git clone git@github.com:lishuaixingNewBee/gordanTv.git

目录结构


|--- utils & Public Function              通用函数
|--- components & components Public View  components和template模板
|--- images & Img Resources               图片资源
|--- pages & View Dir                     页面

○ 更新记录

2018.5.17

    -   解决微信小程序中Date.parse()获取时间戳IOS不兼容的问题(IOS为NaN的问题)

2018.5.25

    -   微信废弃 获取 wx.getUserInfo 接口后续将不再出现授权弹窗,升级为 <button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">允许</button>
You can’t perform that action at this time.