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

isLishude 发布于2019-08-22 17:16 / 1469人阅读

摘要：狗蛋狗蛋是基于微信小程序开发的一款。请在微信开发设置中加入合法域名或者在开发设置中勾选不校验合法域名业务域名版本以及证书。感谢与支持狗蛋豆瓣音乐项目介绍狗蛋是基于微信小程序进行开发，能同时运行在环境下。

狗蛋TV

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

线上开源地址 https://github.com/lishuaixin... 点个赞吧！

小程序开发文档

以下所有 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环境下。涵盖了音乐、短视频、影评三个版块。

开屏引导图

调用微信wx.onAccelerometerChange重力感应设备API,实现水波荡漾。

调用wx.getUserInfo获取用户头像。

工具类

用Promise封装wx.request(),简化代码结构:

const $get = (url, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      header: { "Content-Type": "json" },
      success: resolve,
      fail: reject
    })
  })
}

电影评分实现

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方法实现小程序下拉加载和上拉刷新

阅读模块

微信小程序使用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                     页面

○ 更新记录

云服务器服务器托管微信小程序开发微信小程序开发语言微信小程序开发免费微信小程序开发步骤

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95019.html

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

摘要：狗蛋狗蛋是基于微信小程序开发的一款。请在微信开发设置中加入合法域名或者在开发设置中勾选不校验合法域名业务域名版本以及证书。感谢与支持狗蛋豆瓣音乐项目介绍狗蛋是基于微信小程序进行开发，能同时运行在环境下。狗蛋TV showImg(https://segmentfault.com/img/bVbazwL); 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、...

yagami 2019-08-05 13:51 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

seanlook 2019-08-05 10:11 评论0 收藏0
前端资源系列（3）-微信小程序开发资源汇总

摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者...

paney129 2019-08-20 11:14 评论0 收藏0
干货：小程序开发文档和设计指南要点详解

摘要：本文主要对微信官方发布的开发文档和设计指南进行详解小程序开发文档小程序开发方式的整体介绍，并提供了一个官方范例。一小程序开发文档文档中开头即提到支持调用微信原生，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。本文主要对微信官方发布的开发文档和设计指南进行详解：小程序开发文档小程序开发方式的整体介绍，并提供了一个官方范例。如果是受邀体验的开发者，可以扫码进行小...

blair 2019-08-05 10:23 评论0 收藏0