微信小程序演示实用教程:哔哩哔哩排行榜

时间：2021-12-19 来源：互联网编辑：宝哥软件园浏览：次

项目预览图

小程序？

随着BML和CJ的结束，我心中有了一种期待。作为一名未来的程序员，当然，我必须从事一个比利比利的项目。想到最近流行的小程序，以学习的态度做一个哔哩哔哩小程序。希望大家支持，并给出宝贵意见。

我们能做什么？

，作为第二次发烧友(别看我，我肯定不是死宅(95最后，因为能力问题只是一个半成品，很多功能还没有实现，但我是一个梦想家，我还需要多学习慢慢完善。这一次，我们将互相交谈和学习(叧)

项目工具及文档

微信网页开发者工具：微信小程序官网微信小程序编辑软件，下载安装后即可使用；文档开发：微信小程序秘籍详细介绍了小程序的各种信息，包括组件、框架、API等。有很多信息值得一读。图标字体-阿里巴巴矢量图标库这是一个网站。这是一件神器。你可以找到任何图标。我非常喜欢。

目录结构

app.jsapp.jsonapp.wxssutilsutil.jspages常用header . wxmlitem . wxml索引Inde x . js索引. wxml索引. wxssselectcolorselectcolor . jsselectcolor . wxml。毕竟，这是我的大哔哩哔哩。目前只实现了能力范围内的部分功能，未来还会改进。

页面注册

app.json

` ` ` ` onload:函数(选项){//页面初始化选项是页面跳转带来的参数this . settopdistance()；this . setdata({ stage point : util . stage point()})if(this . data . current tid==1001){ this。page()；} else if(this . data . current tid==1004){ this . channelpage()；} else if(this . data . current tid==1003){ this . live page()；}} ` ` ` ` ` `顶部导航栏实际上是使用scroll-view控件将当前页面的id绑定到他身上，当click事件被触发时，会加载与id匹配的信息。需要注意的是，首先应该给currentId一个页面值，否则不会显示。# # # #弹幕功能小程序本身就有弹幕功能，读取api，对原代码做一些修改，实现弹幕自行选色，弹幕与弹出层结合。页面({ inputValue: "，

data: { isRandomColor: true, src: ”, numberColor: “#ff0000”, danmuList: [{ text: ‘这波不亏呀’, color: ‘#ff0000’, time: 1 }, { text: ‘大神666’, color: ‘#00ff00’, time: 2 }, { text: ‘今生无悔入fate’, color: ‘#D9D919’, time: 3 }, { text: ‘吾王赛高（｡ò ∀ ó｡）’, color: ‘#C0D9D9’, time: 4 } ], showModalStatus: false }, powerDrawer: function (e) { var currentStatu = e.currentTarget.dataset.statu; this.util(currentStatu) }, util: function (currentStatu) { /* 动画部分 */ // 第1步：创建动画实例 var animation = wx.createAnimation({ duration: 200, //动画时长 timingFunction: “linear”, //线性 delay: 0 //0则不延迟 });

// 第2步：这个动画实例赋给当前的动画实例 this.animation = animation;// 第3步：执行第一组动画：Y轴偏移240px后(盒子高度是240px)，停 animation.translateY(240).step();// 第4步：导出动画对象赋给数据对象储存 this.setData({  animationData: animation.export()})// 第5步：设置定时器到指定时候后，执行第二组动画 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: function onLoad() { var _this = this; wx.getSystemInfo({ success: function success(res) { // video标签默认宽度300px、高度225px var windowWidth = res.windowWidth; var videoHeight = 225 / 300 * windowWidth; _this.setData({ videoWidth: windowWidth, videoHeight: videoHeight }); } }); }, onReady: function onReady(res) { this.videoContext = wx.createVideoContext(‘myVideo’); }, onShow: function onShow() { var _this = this; wx.getStorage({ key: ‘numberColor’, success: function success(res) { _this.setData({ numberColor: res.data }); } }); }, bindInputBlur: function (e) { this.inputValue = e.detail.value; } } })

参考了开源代码后，发现弹幕其实就是对字进行动画效果，沿着y轴滚动出现，利用计时器不停播放多组动画，抽屉效果也就是对遮罩层的利用，然后利用动画效果，将弹出栏显示出来，在制作时，记得让视频暂停，这样才能给用户一个好的体验，毕竟没有人想错过一部精彩的视频(￣y▽￣)~#### 分享功能其实也是对api的一种利用，（这里强调一下，api真的很重要，喜欢大家好好阅读），微信小程序也是前段时间才可以通过按钮实现分享功能。

onShareAppMessage: function onShareAppMessage() { wx.createVideoContext(‘myVideo’).pause(); return { title: ‘【Fate全系列】英灵乱斗: 夺回未来的战争「Grand Order」’, desc: ‘【Fate全系列】英灵乱斗: 夺回未来的战争「Grand Order」’, path: ‘/pages/play/play’, success: function (res) { // 转发成功 wx.showToast({ title: ‘成功’, icon: ‘succes’, duration: 1000, mask: true }) wx.createVideoContext(‘myVideo’).play(); }, fail: function (res) { // 转发失败 wx.showToast({ title: ‘失败’, icon: ‘fail’, duration: 1000, mask: true }) wx.createVideoContext(‘myVideo’).play(); } } } “`

这是我的写法，下面给出api内容，可以根据不同人的想法进行修改。

分享api格式

onShareAppMessage: function () { return { title: '自定义分享标题', path: '/page/user?id=123' } } 但是这个id很多人不明白是什么id，之前我也不明白，后来发现这个id就是你要分享的这篇文章的id，但是一定要注意异步与同步的问题。

遇到的问题<(｀^´)>

1.微信小程序的编译包是不能超过2M的，一开始放了一大堆的本地图片，结果打包的时候，告诉我太大了，无奈下想办法将图片上传到云端，将图片链接化； 2.再次强调，小程序api很重要，里面包含了很多知识，我的弹幕功能也是后来查找时发现了api，这可以让我们少走很多弯路； 3.重要的事情说三遍，页面内跳转不能超过5级，页面内跳转不能超过5级，页面内跳转不能超过5级。(:з」∠)