Разработка мини-программы WeChat -- "Догдан ТВ"

внешний интерфейс WeChat Апплет WeChat iOS
Разработка мини-программы WeChat -- "Догдан ТВ"

Догдан ТВ

Goudan TV — это приложение, разработанное на основе апплета WeChat. gordanLee рекомендует песню, статью и короткое видео каждый день и каждый день тратит десять минут времени на то, чтобы зажечь внутренний свет. В настоящее время он разделен на три модуля: музыка, короткие видеоролики и обзоры фильмов.

banner.png

引导页

音乐页

短视频页

影评页

搜索页

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

Чтобы облегчить обучение и тестирование, мы предлагаем интерфейс https для всех, чтобы использовать, использовать и лелеять. Пожалуйста, присоединитесь к запросу легального домена при разработке настроек микроканала или проверьте настройки в разработке - не проверяйте законное доменное имя, веб-просмотр (служба доменных имен), версию сертификата TLS и HTTPS.

Спасибо и поддержка

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

Введение в проект

Goudan TV разработан на основе апплета WeChat + ES6 и может одновременно работать в средах Android и iOS. Он охватывает три раздела: музыка, короткие видеоролики и обзоры фильмов.

  • Путеводитель по открытой карте
    1. Вызовите WeChat wx.onAccelerometerChange API устройства датчика гравитации, чтобы реализовать рябь на воде.
    2. Вызовите wx.getUserInfo, чтобы получить аватар пользователя.
  • Инструменты
    1. Инкапсулируйте wx.request() с Promise, чтобы упростить структуру кода:
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. Апплет WeChat использует 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>

Категории