這個冬天，讓騰訊視頻帶給你溫暖

時間 2019-11-17

標籤這個冬天騰訊視頻帶給溫暖欄目騰訊简体版

原文原文鏈接

金秋以後，即是寒冬。2017年就要過去了，這一年承載了太多的記憶，一個騰訊視頻demo，幫助咱們記錄下來這些或難過，或美好，或感動的瞬間。html

一個仿騰訊視頻的小程序：

開發工具：

微信開發者工具
小程序開發文檔
iconfont矢量圖標庫：能夠找到合適的tabBar圖標
easy-mock：提供虛擬數據接口
wilddog：實現毫秒級的實時數據同步功能，無需本身構建後端服務器

項目功能：

1.已經實現功能：

首頁界面的還原
加載，刷新，跳轉等基礎事件
swiper， scroll等滑動事件
利用easy-mock實現從後臺獲取數據等
利用wilddog實現搜索歷史記錄，微信登陸功能等

2.仍在努力的功能：

精準搜索匹配
評論，回覆等功能
觀看歷史功能

頁面註冊：

"pages/index/index", //主頁
"pages/videos/videos", //短視頻
"pages/mine/mine", //個人
"pages/search/search", //首頁和頻道頁面連接的搜索界面
"pages/channel/channel", //頻道
"pages/playing/playing", //播放界面
複製代碼

項目展現：

1.首頁的展現：

首頁實際上是比較好看的，美觀大方，很惋惜官方已經改版了git

每個swiper的背景和第一張圖片是綁定的

index.wxml部分代碼github

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

index.js部分代碼web

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> 
複製代碼

隱藏了搜索記錄和搜索框cookie

data:{  
          searchs:[],
          current:null,
          hidden:true, // 加載提示框是否顯示  
          scrollTop : 0, // 居頂部高度  
          inputShowed: false, // 搜索輸入框是否顯示  
          inputVal: "", // 搜索的內容  
          histroyShowed:true //搜索記錄
        }
複製代碼

關於wilddog

利用野狗sdk，咱們能夠實現多種實時功能，可以在各個終端修改後臺數據，消息傳遞毫秒可達，可以爲小程序開發者們上線提供一個良好的幫助

這是他的官方文檔

首先要導入wilddog-weapp-all.js

var wilddog = require('wilddog-weapp-all');
複製代碼

引用建立的接口

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

appid爲你建立的應用id

wilddog是以key-value的形式存儲數據，建立引用會定位到根節點。若要定位到子節點，只需在url後追加路徑便可:

利用野狗的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)
    }
複製代碼