微信小程序学习小程序模仿bilibili（待完善）项目预览小程序？大变化？朋友安利之前用过小程序，最近亲近了小程序，发现它带来了一场“大革命”。简单来说，就是以前只有原生态APP才能实现的效果和功能。比如一些炫酷的页面和转场，一些可以直接和手机硬件交互的功能，录音，拍摄视频，调用手机重力感应器，GPS等等。从专业上讲，它是一款无需下载安装即可使用的应用程序。它实现了“触手可及”的应用梦想。用户可以通过扫描或搜索的方式打开应用。小程序的轻量化带来了很多APP所不具备的优势。同时，它也在向我们的日常应用“宣战”。让我们拭目以待，看看谁会赢得这场战争。容易制作吗？作为一颗冉冉升起的新星，小程序被大家所接受，不仅是因为它的重量轻，去掉了app厚重的外壳，还因为它简单易用。经过几天熟悉小程序的搭建和文档，像我这样的初学者可以慢慢触及小程序的门槛，进入小程序的新世界，完成自己的想法。我们可以做什么？作为一个二次元爱好者（别看我，我肯定不是死宅(ノ=Д=)ノ┻━┻），我用的最多的app当然是我的大b站了(哔哩)哔哩(゜-゜)つロ干杯~-bilibili），于是尝试着根据自己的爱好做了一个bilibili的小程序。一路上经历了很多艰难险阻，最后因为能力问题只做了一个半成品。很多功能还没有实现，但是我是一个有梦想的人，以后还是要多学习，逐步完善。这次作为交流，大家互相学习(?ò?ó?)项目工具和文档微信网页开发者工具：微信小程序官网微信开发的微信小程序编辑软件，可以使用下载并安装后；开发文档：微信小程序宝典，详细介绍了小程序的各种信息，包括组件、框架、API等，有很多资料值得一读；图标库：Iconfont-AlibabaVectorIconLibrary这个网站简直就是神器，随便找一个图标，我很喜欢。目录结构├──app.js├──app.json├──app.wxss├──utils│└──util.js├──pages│├──common││├──header.wxml│││└──item.wxml│├──index││├──index.js││├──index.wxml││└──index.wxss│├──selectColor││├──selectColor.js││├──selectColor.wxml││└──selectColor.wxss│├──play││├──play.js││├──play.json││├──play.wxml││└──play.wxss└──资源└──图片页面注册app.json"pages":["pages/index/index","pages/play/play","pages/selectColor/selectColor"],项目功能已经实现功能：广告轮播、视频播放、弹窗功能、弹窗功能、分享功能、未实现的功能：这个有点多。..毕竟是我的大B站。目前我只是实现了一些力所能及的功能，以后会完善的。部分功能实现顶部导航栏{{item.name}};onLoad:function(options){//页面初始化选项是页面跳转带来的参数this.setTopDistance();this.setData({stagePoint:util.stagePoint()})if(this.data.currentId==1001){this.Page();}elseif(this.data.currentId==1004){this.channelPage();}elseif(this.data.currentId==1003){this.livePage();}}顶部导航栏实际上是使用scroll-view控件绑定当前页面的id。当点击事件被触发时，会加载与id匹配的信息，需要注意的是currentId开头一定要给page值，否则无法显示。弹幕功能小程序本身就有弹幕功能。看了api，对原来的代码做了一些改动，实现了弹幕颜色的选择，弹幕和弹层一起使用。Page({inputValue:'',data:{isRandomColor:true,src:'',numberColor:"#ff0000",danmuList:[{text:'这一波不亏',color:'#ff0000',time:1},{text:'大神666',color:'#00ff00',time:2},{text:'今生无悔入缘',color:'#D9D919',time:3},{text:'我的赛高王(?ò?ó?)',color:'#C0D9D9',time:4}],showModalStatus:false},powerDrawer:function(e){varcurrentStatu=e.currentTarget.dataset.statu;this.util(currentStatu)},util:function(currentStatu){/*动画部分*///第一步：创建动画实例varanimation=wx.createAnimation({duration:200,//动画时长timingFunction:"linear",//线性延迟:0//0表示没有延迟});//Step2:将这个动画实例赋值给当前动画实例this.animation=animation;//Step3:执行第一组动画:Y轴偏移240px后（方框高度为240px），停止animation.translateY(240).step();//Step4:Export动画对象赋值给数据对象存储this.setData({animationData:animation.export()})//第五步：设置定时器到指定时间后，执行第二组动画setTimeout(function(){//执行第二组动画：Y轴不平移，停止animation.translateY(0)。step()//数据对象中存储的第一组动画被执行完第二组动画的动画对象替换this.setData({animationData:animation})//关闭抽屉if(currentStatu=="close"){wx.createVideoContext('myVideo').play();this.setData({showModalStatus:false,});}}.bind(this),200)//显示抽屉if(currentStatu=="open"){wx.createVideoContext('myVideo').pause();this.setData({showModalStatus:true});}},onLoad:functiononLoad(){var_this=this;wx.getSystemInfo({success:functionsuccess(res){//视频标签默认宽300px，高225pxvarwindowWidth=res.windowWidth;varvideoHeight=225/300*windowWidth;_this.setData({videoWidth:窗口宽度,videoHeight:videoHeight});}});},onReady:functiononReady(res){this.videoContext=wx.createVideoContext('myVideo');},onShow:functiononShow(){var_this=this;wx.getStorage({key:'numberColor',success:functionsuccess(res){_this.setData({numberColor:res.data});}});},bindInputBlur:function(e){this.inputValue=e.detail.value;}}})Reference看了开源代码，发现弹幕其实是文字上的动画效果，沿y轴滚动，利用定时器连续播放多组动画。抽屉效果是利用遮罩层，然后利用动画效果，将弹出栏显示出来。制作的时候记得要暂停视频，这样才能给用户一个好的体验。毕竟谁都不想错过精彩的视频(￣y▽￣)~分享功能其实就是api的一种使用，（这里要强调一下，api真的很重要，喜欢大家仔细看），微信小程序前段时间还可以通过按钮实现分享功能onShareAppMessage:functiononShareAppMessage(){wx.createVideoContext('myVideo').pause();return{title:'【Fate全系列】英雄乱斗：夺回未来之战“GrandOrder”',desc:'【Fate全系列】系列】英雄乱斗：夺回未来之战“GrandOrder”',path:'/pages/play/play',success:function(res){//转发成功wx.showToast({title:'Success',icon:'succes',duration:1000,mask:true})wx.createVideoContext('myVideo').play();},fail:function(res){//转发失败wx.showToast({title:'Failure',icon:'fail',duration:1000,mask:true})wx.createVideoContext('myVideo').play();}}}这是我的写法，下面给出api内容，可以根据不同人的想法进行修改。分享api格式onShareAppMessage:function(){return{title:'自定义分享标题',path:'/page/user?id=123'}}但是很多人不明白这个id是什么，我也没看懂之前了解一下，后来发现这个id就是你要分享的文章的id，但是一定要注意异步和同步的问题。我踩过的坑<(｀^′)>1.微信小程序编译包不能超过2M。一开始放了很多本地图片，打包的时候被说太大了。无奈，想了想方法是把图片上传到云端，链接图片；2.再次强调，小程序的API很重要，里面包含了很多知识。我的弹幕功能在后面查找的时候也找到了API，可以让我们少走很多弯路；3、重要的事情说三遍，页面内跳转不能超过5级，页面内跳转不能超过5级，页面内跳转不能超过5级。_(:з」∠)_项目地址https://github.com/wuyangshu/...最后想说的是，我现在的技术还有些不成熟。好久没有接触小程序了，要学的东西还是很多的。不能很好的复现哔哩哔哩的功能，但是作为学生，学习的路还很长。最后希望各位放学路上的小伙伴们能得到小星星?，谢谢你们(′?｀)?
