微信小程序开发--『狗蛋TV』

news/2024/7/20 3:15:41 标签: 小程序

狗蛋TV

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

banner.png

  • 线上开源地址 https://github.com/lishuaixingNewBee/gordanTv 点个赞吧!
  • 小程序开发文档

引导页

音乐页

短视频页

影评页

搜索页

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

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

感谢与支持

    -   狗蛋TVapi: https://api.gordantv.top
    -   豆瓣api: https://api.douban.com
    -   QQ音乐api: https://y.qq.com

项目介绍

狗蛋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                     页面

○ 更新记录


http://www.niftyadmin.cn/n/624731.html

相关文章

python 获取linux ip_Python获取linux主机ip的简单实现方法

本文实例讲述了Python获取linux主机ip的简单实现方法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;python有好几种方法可以获取主机的ip地址。我常用的一种是通过socket.socket().inet_ntoa()来实现,非常方便&#xff1b;但这种方法有个限制就是要把网卡名(比如eth0…

wxpython event事件_wxpython笔记(6)——事件驱动(event-driven)

基于事件驱动(event-driven)的这种消息响应机制我们应该很熟悉了。有关这个的就不说了&#xff0c;直接看看在wxpython中这个事件驱动是怎么实现的。先看一下下面几个概念&#xff1a;1. event &#xff1a;Somethingthat happens during your application that requires a res…

e1载波的数据速率是_宽带电力线载波(HPLC)简述

​简介HPLC是高速电力线载波&#xff0c;也称为宽带电力线载波&#xff0c;是在低压电力线上进行数据传输的宽带电力线载波技术。宽带电力线载波通信网络则是以电力线作为通信媒介&#xff0c;实现低压电力用户用电信息汇聚、传输、交互的通信网络。宽带电力线载波主要采用了正…

python 西门子触摸屏通讯_PLC通过以太网与触摸屏通讯

一般考虑干扰的问题。可以使用西门子的以太网线。回答者&#xff1a; 李树下 - 中级技术员&nbsp&nbsp第6级2013-07-05 09:39:38你好&#xff0c;可以考虑rs485接口走ppi协议&#xff0c;但是距离最远支持50米&#xff0c;因为通讯口不隔离或者使用em277走DP协议&#x…

vue for循环_一分钟学会Vue的条件渲染和列表渲染

介绍之前一段时间由于工作很忙&#xff0c;没有时间继续学习Vue&#xff0c;今天算是继续对之前的学习进行补充了&#xff0c;今天要学习的便是Vue的条件渲染和列表渲染&#xff0c;我们将讨论if、if-else、if-else-if&#xff0c;show等。在列表渲染中&#xff0c;我们将讨论如…

全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp

全网稀缺的快应用开源项目-熊宝儿歌故事QuickApp熊宝儿歌故事QuickApp目录结构项目安装编译打包增加release签名发布程序包开发中常见问题○ 更新记录2018.11.23熊宝儿歌故事QuickApp 熊宝儿歌故事基于快应用技术开发&#xff0c;且小程序版已经上线欢迎大家体验&#xff0c;由…

骁龙660_骁龙660相当于苹果的哪款处理器?你知道吗

由于A9处理器比骁龙820还要强点&#xff0c;而骁龙660整体上是干不过骁龙820的。所以个人认为骁龙660整体上仍然比不过A9&#xff0c;应该是小超A8X的水平。虽然说A8x制程落后&#xff0c;和火龙810同样的工艺&#xff0c;但它是ipad上的处理器&#xff0c;因此热点没是。虽然说…

cass生成曲线要素_分享一个自动生成面积表的小程序(附下载)

永久下载链接&#xff1a;https://www.celiang.net/article/701链接&#xff1a;https://pan.baidu.com/s/1mAvDLN82hUA712meo9SICQ提取码&#xff1a;safi【1】史上最齐全的CAD下载资源&#xff01;&#xff01;&#xff01;【2】【BIM软件】Revit 2018软件安装包免费送&#…