bilibili小程序

微信小程序学习 哔哩哔哩小程序(待完善)

项目预览图

image

小程序?

随着BML和CJ的落幕,我的内心有一种期许,生为一个未来的程序员,当然要动手做一个哔哩哔哩项目,想起最近热门的小程序,自己抱着学习的态度制作了一个bilibili小程序,希望大家能支持一下,并提出你宝贵的意见。

我们能做什么?

作为一个二次元爱好者(别看着我,我当然不是死宅(ノ=Д=)ノ┻━┻),使用最多的app当然就是我大b站了(哔哩哔哩 (゜-゜)つロ 干杯~-bilibili),所以应着自己的爱好,尝试着制作了一个哔哩哔哩的小程序,途中简直是经历了千难万险,最后因为能力问题只是制作了一个半成品,尚有很多功能尚未实现,但是我是有梦想的人,之后还是要多学习,将它慢慢完善,这次就当交流,大家互相学习(。ò ∀ ó。)

项目工具及文档

  1. 微信web开发者工具:微信小程序官网 微信开发的小程序编辑软件,下载安装即可使用;
  2. 开发文档:微信小程序宝典秘籍 这里面详细的介绍了小程序的各种信息,包括组件、框架、API等等,有很多值得我们去阅读的信息;
  3. 图标库: Iconfont-阿里巴巴矢量图标库 这个是网站简直是神器,什么图标都能找到,我很喜欢。

目录结构

├── 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
└── resources
    └── images
页面注册
app.json
    "pages":[
        "pages/index/index",
        "pages/play/play",    
        "pages/selectColor/selectColor"
      ],

项目功能

已实现功能:
  • 广告轮播图
  • 视频播放
  • 弹幕功能
  • 弹窗功能
  • 分享功能
未实现功能:

这个有点多。。。毕竟是我大B站,目前只实现了一些力所能及的功能,以后会完善的。

部分功能实现

顶部导航栏

“`

```
 onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.setTopDistance();
    this.setData({
      stagePoint: util.stagePoint()
    })
    if (this.data.currentId == 1001) {
      this.Page();
    }
    else if (this.data.currentId == 1004) {
      this.channelPage();
    }
    else if (this.data.currentId == 1003) {
      this.livePage();
    }
  }
  ```
顶部导航栏实际就是利用scroll-view控件,给他绑定当前页面的id,当触发点击事件时,加载与该id匹配的信息。要注意的是一开始要给currentId一个页面的值,不然无法显示出来。

#### 弹幕功能
小程序本身具备弹幕功能,阅读api,对着原版代码进行了一些改变,实现了弹幕自己选择颜色,并且将弹幕和弹出层结合在一起使用。

Page({
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级。(:з」∠)

项目地址

https://github.com/wuyangshu/bilibili

最后要说的话

现在的自己技术还是有些不太成熟,接触小程序不久,还有很多需要学习的地方,不能很好的重现哔哩哔哩的功能,不过作为一个学生,还有很长的学习之路要走。
最后希望能得到各位在求学路上同行的小伙伴的小星星⭐,谢谢(´∀`)♡

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值