金秋过后，将迎来寒冷的冬天。2017年即将结束，这一年承载了太多的回忆，一段腾讯视频小样帮我们记录下这些悲伤的、美好的、感动的瞬间。模仿腾讯视频的小程序：开发工具：微信开发者工具小程序开发文档iconfont矢量图标库：可以找到合适的tabBar图标easy-mock：提供虚拟数据接口wilddog：实现毫秒级实时数据同步功能，没有需要搭建自己的后台服务器项目功能：1、已经实现的功能：首页界面滑动、滚动等基本事件，恢复加载、刷新、跳转等。使用easy-mock来实现后台获取数据等使用wilddog实现搜索历史记录、微信登录功能等2、还在用的功能：精准搜索、匹配评论、回复等观看历史功能页面注册：》pages/index/index",//首页"pages/videos/videos",//短视频"pages/mine/mine",//我的"pages/search/search",//首页和频道页链接的搜索界面"pages/channel/channel",//channel"pages/playing/playing",//播放界面项目展示：1.首页的展示：首页其实更漂亮，美观大方，可惜官方改版了每个swiper的背景和第一张图片是绑定的index.wxml部分代码index.js部分代码url:"../../images/zhao_1.jpg"}],2.短视频,频道界面展示：这里的数据是从easy-mock中获取的。这是我的界面。我没有做很多。可以用来练手，后面会补上。{{item.label}}>{{item.title}}因为数据都是图片，为了还原真实性，我用伪元素做了一个三角playicon.picture::before{position:absolute;border:11pxsolidtransparent;border-left:17pxsolid#fff;content:"";top:100px;left:180px;}3.播放界面显示：4.搜索界面显示：搜索界面引用weui样式@import"./weui.wxss"；搜索搜索<查看>{{item.text}}隐藏搜索记录和搜索框数据：{searches:[],current:null,hidden:true,//加载提示框是否显示scrollTop:0,//顶部高度inputShowed:false,//搜索输入框是否显示inputVal:"",//搜索内容histroyShowed:true//搜索记录}关于wilddog使用wilddogsdk，我们可以实现多种实时功能，在各个终端修改后台数据，毫秒级发送消息，可以为小程序开发者提供很好的帮助去在线。这是他的官方文档必须先导入wilddog-weapp-all.jsvarwildog=require('wilddog-weapp-all');referencecreatedinterfacevarconfig={syncURL:'https://appid.wilddogio.com',authDomain:'appid.wilddog.com'}appid为你创建的appidwilddog以key-value的形式存储数据，创建引用会定位到根节点定位子节点，在url后面加上路径即可：使用野狗的child()方法获取子节点，实现删除和添加的功能addItem:function(){if(this.data.current!=null){//后台业务全部交给app.jsapp.addItem(this.data.current)}this.setData({inputVal:""})},deleteItem:function(e){varkey=e.target.dataset.key;this.ref.child(key).remove();},onLoad:function(options){this.ref=app.getTodoRef();this.ref.on('child_added',function(snapshot,prkey){varkey=snapshot.key()vartext=snapshot.val()//JSON结构varnewItem={key:key,text:text}this.data.searchs.push(newItem);这个.setData({searchs:this.data.searchs})},this);this.ref.on('child_removed',function(snapshot){varkey=snapshot.key();varindex=this.data.searchs.findIndex((item,index)=>{if(item.key==键）{返回真；}返回假；});if(index>=0){this.data.searchs.splice(index,1);this.setData({searches:this.data.searchs})}},this)}一点心得：1、遇到的问题：写完数据后发现内容全没了：小程序只支持http:///服务请求。用手机测试的时候，很奇怪：在styleswiper中添加这段代码解决了-webkit-overflow-scrolling:touch;手机端测试时，整个页面会跟着滑动：在样式中加入overflow，隐藏overflow:hidden；如果js部分有问题，那就console一下关键数据，看看能不能打印出来，然后慢慢排除开发中遇到的一些问题，需要慢慢琢磨，多看文档，耐心解决开动脑筋，好点子很重要，优雅的编程，发散的思维，用代码实现自己的想象是一件很酷的事情。2.八卦几句：如果你想改变世界，那我们就做朋友吧。但如果你想一辈子卖糖水，那我们也可以做朋友。因为写代码只是为了交朋友。有问题可以通过以下方式找到我：QQ邮箱：750746291@qq.comgithub源码，欢迎star个人主页
