资讯专栏INFORMATION COLUMN

这个冬天,让腾讯视频带给你温暖

darkerXi / 3187人阅读

摘要:金秋之后,便是寒冬。年就要过去了,这一年承载了太多的记忆,一个腾讯视频,帮助我们记录下来这些或难过,或美好,或感动的瞬间。有任何问题,你可以通过以下方式找到我邮箱源码,欢迎个人主页

金秋之后,便是寒冬。2017年就要过去了,这一年承载了太多的记忆,一个腾讯视频demo,帮助我们记录下来这些或难过,或美好,或感动的瞬间。

一个仿腾讯视频的小程序: 开发工具:

微信开发者工具

小程序开发文档

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.首页的展示:

首页其实是比较好看的,美观大方,很可惜官方已经改版了

每一个swiper的背景和第一张图片是绑定的

index.wxml部分代码

  

index.js部分代码

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

2.短视频,频道界面的展示:

这里的数据是从easy-mock获得的

这是我的接口,没有做很多,大家可以用来练练手,后续会增加的

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

因为数据都是图片,所以为了还原真实性,我用伪元素做了个三角形播放图标

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

3.播放界面的展示:

4.搜索界面的展示:

搜索界面引用了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的事情。

2.几句闲话:

如果你想要改变世界,那么我们可以做个朋友。但如果你想要卖一辈子糖水,那么我们也可以做个朋友。因为写代码,只是为了交个朋友嘛。有任何问题,你可以通过以下方式找到我:

QQ邮箱:750746291@qq.com

github源码,欢迎star

个人主页

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/90332.html

相关文章

  • 这个冬天腾讯视频带给温暖

    摘要:金秋之后,便是寒冬。年就要过去了,这一年承载了太多的记忆,一个腾讯视频,帮助我们记录下来这些或难过,或美好,或感动的瞬间。有任何问题,你可以通过以下方式找到我邮箱源码,欢迎个人主页 金秋之后,便是寒冬。2017年就要过去了,这一年承载了太多的记忆,一个腾讯视频demo,帮助我们记录下来这些或难过,或美好,或感动的瞬间。 一个仿腾讯视频的小程序: 开发工具: 微信开发者工具 小程序开...

    Bryan 评论0 收藏0
  • 这个冬天腾讯视频带给温暖

    摘要:金秋之后,便是寒冬。年就要过去了,这一年承载了太多的记忆,一个腾讯视频,帮助我们记录下来这些或难过,或美好,或感动的瞬间。有任何问题,你可以通过以下方式找到我邮箱源码,欢迎个人主页 金秋之后,便是寒冬。2017年就要过去了,这一年承载了太多的记忆,一个腾讯视频demo,帮助我们记录下来这些或难过,或美好,或感动的瞬间。 一个仿腾讯视频的小程序: 开发工具: 微信开发者工具 小程序开...

    fasss 评论0 收藏0
  • 运营新招!友盟微社区推出App专属“运营管家”

    摘要:运营管家是友盟微社区集成移动垂直领域的社交运营专业的数据服务等经验,为移动开发者推出一套微社区运营的完整解决方案。 运营管家是友盟微社区集成移动垂直领域的社交运营、专业的数据服务等经验,为移动开发者推出一套微社区运营的完整解决方案。它不仅帮助各类App实时接入社区,提供全面的技术支持和运营建议,同时,它还利用友盟移动大数据优势,借助行业数据分析合理调整规划社区运营架构,有针对性地提高用...

    lieeps 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<