Пусть Tencent Video согреет вас этой зимой

внешний интерфейс WeChat Апплет WeChat

После золотой осени наступает холодная зима. 2017 год подходит к концу. Этот год принес слишком много воспоминаний. Демо-видео Tencent помогает нам запечатлеть эти грустные, прекрасные или трогательные моменты.

Небольшая программа, имитирующая Tencent Video:


Инструменты разработки:


Функция проекта:

1. Реализованы функции:

  • Восстановление интерфейса главной страницы
  • Загрузка, обновление, прыжок и другие базовые события
  • swiper, scroll и другие скользящие события
  • Используйте easy-mock для получения данных из фона и т. д.
  • Используйте подстановочный знак, чтобы реализовать историю поиска, функцию входа в WeChat и т. д.

2. Функции, над которыми все еще работают:

  • точное совпадение поиска
  • Комментарии, ответы и т.д.
  • Функция просмотра истории

Регистрация страницы:

"pages/index/index", //主页
"pages/videos/videos", //短视频
"pages/mine/mine", //我的
"pages/search/search", //首页和频道页面链接的搜索界面
"pages/channel/channel", //频道
"pages/playing/playing", //播放界面

Дисплей проекта:

1. Отображение домашней страницы:

首页

Домашняя страница на самом деле довольно красивая, красивая и щедрая, но, к сожалению, официальная версия была изменена.

  • Фон каждого свайпера привязан к первому изображению

index.wxml часть кода

  <image class="top-image" src="{{bannerList[activeBannerIndex].url}}" mode="widthFix"></image>

index.js часть кода

    bannerList  : [
  {
    url : "../../images/hu_1.png"
  },{
    url :  "../../images/huang_1.jpg"
  },{
    url :  "../../images/zhao_1.jpg"
  }
  ],

2. Короткое видео, отображение интерфейса канала:

短视频

  • Данные здесь получены из easy-mock

  • это моеинтерфейс,много не делал,каждый может использовать для тренировки рук,а в дальнейшем будет увеличиваться

      <swiper-item>
                  <view class="swiper-item weui-tab__content" wx:for="{{wangzhe}}">
                      <view class="contain">
                          <view class="list-title">{{item.label}} ></view>
                          <view class="detail" wx:for="{{item.video}}">
                              <image src="{{item.videoImage}}" mode="widthFix" class="wz"></image>
                              <view class="list-font"><text>{{item.title}}</text></view>
                          </view>
                      </view>
                  </view>
      </swiper-item>
    
  • Поскольку все данные являются картинками, для восстановления подлинности я сделал треугольную иконку воспроизведения с псевдоэлементами.

      .picture ::before
      {
      position: absolute;
      border:11px solid transparent;
      border-left:17px solid #fff;
      content: "";
      top: 100px;
      left: 180px;
      }
    

3. Отображение интерфейса воспроизведения:

播放

4. Отображение интерфейса поиска:

搜索

  • Интерфейс поиска ссылается на стиль weui.

  • @import "./weui.wxss";

      <view class="weui-search-bar">  
          <view class="weui-search-bar__form">  
              <view class="weui-search-bar__box">  
                  <icon class="weui-icon-search_in-box" type="search" size="14"></icon>  
                  <input type="text" class="weui-search-bar__input" placeholder="请输入片名主演或导演" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="bindKeyInput"/>  
                  <view class="weui-icon-clear"  bindtap="clearInput">  
                      <icon type="clear" size="14"></icon>  
                  </view>  
              </view>  
              <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">  
                  <icon class="weui-icon-search" type="search" size="14"></icon>  
                  <view class="weui-search-bar__text" bindtap="">搜索</view>  
              </label>  
          </view>  
          <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="addItem">搜索</view>  
      </view>  
      <view>  
          <view  class="search-log" wx:for="{{searchs}}">  
              <text style="font-size:14px;font-family:microsoft yahei">{{item.text}}</text>
              <icon type="clear"  class="inline" bindtap="deleteItem" data-key="{{item.key}}" size="14"></icon>
          </view>      
      </view> 
    
  • Скрыть историю поиска и окно поиска

          data:{  
              searchs:[],
              current:null,
              hidden:true, // 加载提示框是否显示  
              scrollTop : 0, // 居顶部高度  
              inputShowed: false, // 搜索输入框是否显示  
              inputVal: "", // 搜索的内容  
              histroyShowed:true //搜索记录
            }
    

О дикой собаке

Используя wild dog sdk, мы можем реализовать множество функций в реальном времени и можем изменить фоновые данные в каждом терминале, а сообщение может быть доставлено за миллисекунды, что может оказать хорошую помощь разработчикам небольших программ для выхода в онлайн. .

это егоофициальная документация

  • Первый импорт wilddog-weapp-all.js

      var wilddog = require('wilddog-weapp-all');
    
  • Ссылка на созданный интерфейс

      var config = {
            syncURL:'https://appid.wilddogio.com',
            authDomain:'appid.wilddog.com'
          }
    

appid — идентификатор приложения, созданный вами

  • wilddog хранит данные в форме ключ-значение, и создание ссылки позволит найти корневой узел. Чтобы найти дочерний узел, просто добавьте путь к URL-адресу:

    wilddog

  • Используйте метод child() дикой собаки, чтобы получить дочерние узлы для выполнения функций удаления и добавления.

      addItem:function(){
          if(this.data.current != null){
            // 将所有的后台业务交给app.js
            app.addItem(this.data.current)
          }
          this.setData({
            inputVal:""
          })
        },
        deleteItem:function(e){
          var key = e.target.dataset.key;
          this.ref.child(key).remove();
        },
      
        onLoad:function(options){  
          this.ref = app.getTodoRef();
          this.ref.on('child_added',function(snapshot,prkey){
            var key = snapshot.key()
            var text = snapshot.val()
            // JSON结构
            var newItem = {key:key, text:text}
            this.data.searchs.push(newItem);
            this.setData({
              searchs:this.data.searchs
            })
          },this);
          this.ref.on('child_removed',function(snapshot){
            var key = snapshot.key();
            var index = this.data.searchs.findIndex(
              (item,index)=>{
                if(item.key == key){
                  return true;
                }
                return false;
              });
              if(index >= 0){
                this.data.searchs.splice(index,1);
                this.setData({
                  searchs:this.data.searchs
                })
              }
          },this)
        }
    

Небольшой опыт:

1. Возникшие проблемы:

  • После записи данных я обнаружил, что весь контент пропал:

    Апплет поддерживает только http:// служебные запросы

  • Чика бесподобен при тестировании с мобильным телефоном:

    Добавление этого кода в стиль swiper решило это -webkit-overflow-scrolling : touch;

  • Во время викторины по мобильному телефону будет скользить вся страница:

    Добавить вне стиля, чтобы скрыть overflow:hidden;

  • Если есть проблема с js частью, то следует консолидировать данные ключа, чтобы посмотреть можно ли их распечатать, а потом потихоньку устранять

Во время разработки возникают некоторые проблемы, над которыми нужно медленно размышлять, читать больше документов и терпеливо их решать. Откройте свой мозг, хорошие идеи очень важны, элегантное программирование, дивергентное мышление и реализация вашего воображения с помощью кода — это очень крутая вещь.

2. Несколько сплетен:

Если ты хочешь изменить мир, тогда мы можем быть друзьями. Но если вы хотите продавать сахарную воду на всю жизнь, то мы тоже можем быть друзьями. Потому что писать код нужно просто для того, чтобы подружиться. Если у вас есть какие-либо вопросы, вы можете найти меня по:


Пасхальные яйца:

Наконец, я дам вам «Трехминутный обзор 2017», который появился в демо. Спасибо за вашу поддержку и поддержку.