摘要：金秋之后，便是寒冬。年就要過去了，這一年承載了太多的記憶，一個騰訊視頻，幫助我們記錄下來這些或難過，或美好，或感動的瞬間。有任何問題，你可以通過以下方式找到我郵箱源碼，歡迎個人主頁

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

微信開發者工具

小程序開發文檔

iconfont矢量圖標庫：可以找到合適的tabBar圖標

easy-mock：提供虛擬數據接口

wilddog：實現毫秒級的實時數據同步功能，無需自己構建后端服務器

首頁界面的還原

加載，刷新，跳轉等基礎事件

swiper， scroll等滑動事件

利用easy-mock實現從后臺獲取數據等

利用wilddog實現搜索歷史記錄，微信登錄功能等

精準搜索匹配

評論，回復等功能

觀看歷史功能

"pages/index/index", //主頁
"pages/videos/videos", //短視頻
"pages/mine/mine", //我的
"pages/search/search", //首頁和頻道頁面鏈接的搜索界面
"pages/channel/channel", //頻道
"pages/playing/playing", //播放界面

首頁其實是比較好看的，美觀大方，很可惜官方已經改版了

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

index.wxml部分代碼

index.js部分代碼

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

這里的數據是從easy-mock獲得的

這是我的接口,沒有做很多，大家可以用來練練手，后續會增加的

        
            
                {{item.label}} >
                
                    
                    {{item.title}}
                
            
        

因為數據都是圖片，所以為了還原真實性，我用偽元素做了個三角形播放圖標

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

搜索界面引用了weui樣式

@import "./weui.wxss";

   
       
           
               
               
               
                   
               
           
           
       
       
   
   
       
         {{item.text}}
         
           
  

隱藏了搜索記錄和搜索框

 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)
      }

1.遇到的問題：

寫完數據后發現才發現內容全都不見了：

小程序只支持http:// 服務請求

用手機測驗的時候奇卡無比：

在樣式swiper中加入這條代碼就解決了

 -webkit-overflow-scrolling : touch;

在手機測驗時，整個頁面會隨著滑動：

在樣式中加入超出則隱藏

   overflow:hidden;

如果js部分出現問題了，那么就應該console一下關鍵數據，看看是否能夠打印出來，然后慢慢排除

開發的時候遇到了一些問題，是需要慢慢琢磨的，多看文檔，耐心解決。開動大腦，好的想法idea是非常重要的，優雅的編程，發散的思維，把你的想象力用代碼來實現，是一件非常cooooool的事情。

如果你想要改變世界，那么我們可以做個朋友。但如果你想要賣一輩子糖水，那么我們也可以做個朋友。因為寫代碼，只是為了交個朋友嘛。有任何問題，你可以通過以下方式找到我：

QQ郵箱：750746291@qq.com

github源碼，歡迎star

個人主頁