小程序模板網(wǎng)

微信小程序開發(fā)--『狗蛋TV』

發(fā)布時(shí)間:2018-05-18 11:00 所屬欄目:小程序開發(fā)教程

狗蛋TV是基于微信小程序開發(fā)的一款A(yù)pp。gordanLee每天都會(huì)推薦一首歌、一篇文章、一段短視頻,每天用十分鐘的細(xì)碎時(shí)光,點(diǎn)燃內(nèi)心的光明。目前分為音樂,短視頻,影評(píng)三個(gè)模塊。

  • 線上開源地址 https://github.com/lishuaixingNewBee/gordanTv 點(diǎn)個(gè)贊吧!
  • 小程序開發(fā)文檔

以下所有 API 均由產(chǎn)品公司自身提供,本人皆從網(wǎng)絡(luò)獲取。獲取與共享之行為或有侵犯產(chǎn)品權(quán)益的嫌疑。若被告知需停止共享與使用,本人會(huì)及時(shí)刪除此頁面與整個(gè)項(xiàng)目。請(qǐng)您暸解相關(guān)情況,并遵守產(chǎn)品協(xié)議。

為了方便大家學(xué)習(xí)和測(cè)試,我們提供了https的接口供大家使用,且用且珍惜。請(qǐng)?jiān)谖⑿砰_發(fā)設(shè)置中加入request合法域名,或者在開發(fā)設(shè)置中勾選——不校驗(yàn)合法域名、web-view(業(yè)務(wù)域名)、TLS 版本以及 HTTPS 證書。

感謝與支持


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

項(xiàng)目介紹

狗蛋TV是基于微信小程序+ES6進(jìn)行開發(fā),能同時(shí)運(yùn)行在Android、iOS環(huán)境下。涵蓋了音樂、短視頻、影評(píng)三個(gè)版塊。

  • 開屏引導(dǎo)圖
    1. 調(diào)用微信wx.onAccelerometerChange重力感應(yīng)設(shè)備API,實(shí)現(xiàn)水波蕩漾。
    2. 調(diào)用wx.getUserInfo獲取用戶頭像。
  • 工具類
    1. 用Promise封裝wx.request(),簡化代碼結(jié)構(gòu):

const $get = (url, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      data,
      header: { 'Content-Type': 'json' },
      success: resolve,
      fail: reject
    })
  })
}
  1. 電影評(píng)分實(shí)現(xiàn)

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;
}
  • 小程序內(nèi)部組件實(shí)現(xiàn)上拉刷新,下拉加載

方法一:scroll-view 組件
    方法二:onPullDownRefresh和onReachBottom方法實(shí)現(xiàn)小程序下拉加載和上拉刷新
  • 閱讀模塊

    1. 微信小程序使用wxParse解析html
    
    項(xiàng)目中遇到在微信小程序里需要顯示音樂文章的內(nèi)容,文章內(nèi)容是通過接口讀取的服
    務(wù)器中的富文本內(nèi)容,是html格式的,小程序默認(rèn)是不支持html格式的內(nèi)容顯示的,
    那我們需要顯示html內(nèi)容的時(shí)候,就可以通過wxParse來實(shí)現(xiàn)。
  • 
    

    項(xiàng)目安裝

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

    目錄結(jié)構(gòu)

  •  


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24462.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢