微信小程式開發--『狗蛋TV』

李帥醒發表於2018-05-15
微信小程式

狗蛋TV

微信小程式開發--『狗蛋TV』

狗蛋TV是基於微信小程式開發的一款App。gordanLee每天都會推薦一首歌、一篇文章、一段短視訊，每天用十分鐘的細碎時光，點燃內心的光明。目前分為音樂，短視訊，影評三個模組。

banner.png

引導頁

音樂頁

短視訊頁

影評頁

搜尋頁

以下所有 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                     頁面
複製程式碼

○ 更新記錄

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>
複製程式碼

<<<<<<< HEAD

相關文章