小程序开发|小程序制作|小程序开发网

搜索
查看: 3352|回复: 6

【微信小程序开发教程】仿bilibil(哔哩哔哩)小程序

[复制链接]

99

主题

277

帖子

854

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
854
发表于 2017-8-14 17:39:05 | 显示全部楼层 |阅读模式
项目预览图
小程序?大改变?“”
  APPGPS专业点来说,是一种不需要下载安装即可使用的应用,它实现了应用触手可及的梦想,用户扫一扫或搜一下即可打开应用。小程序的轻量化带来了所不具有的许多优点,它同时也在向着我们的日常宣战,这场战争花落谁家,就让我们拭目以待吧。小程序作为一颗冉冉升起的新星,他之所以能被大家接受,不仅仅是因为他的轻量化,脱去了的繁重外壳,还因为他很容易上手。在经过几天时间去熟悉小程序的构建和说明文档等,我这种初学者也能慢慢地摸到小程序的门槛,进入小程序这个新世界,完成自己的构思。作为一个二次元爱好者(别看着我,我当然不是死宅ノノ),使用最多的当然就是我大站了(哔哩哔哩 ゜゜つロ 干杯),所以应着自己的爱好,尝试着制作了一个哔哩哔哩的小程序,途中简直是经历了千难万险,最后因为能力问题只是制作了一个半成品,尚有很多功能尚未实现,但是我是有梦想的人,之后还是要多学习,将它慢慢完善,这次就当交流,大家互相学习(。。)微信开发者工 <font style="color:rgb(0, 51, 153)">微信开发的小程序编辑软件,下载安装即可使用; API图标库:Iconfont-<font style="color:rgb(0, 51, 153)">
  目录结构├── app.json├── utils├── pages│   │   ├── header.wxml│   ├── index│   │   ├── index.wxml│   ├── selectColor│   │   ├── selectColor.wxml│   ├── play│   │   ├── play.json│   │   └── play.wxss └── imagesapp.json已实现功能:

<ul>视频播放
弹窗功能
未实现功能:B
  部分功能实现顶部导航栏实际就是利用控件,给他绑定当前页面的,当触发点击事件时,加载与该匹配的信息。要注意的是一开始要给一个页面的值,不然无法显示出来。

小程序本身具备弹幕功能,阅读,对着原版代码进行了一些改变,实现了弹幕自己选择颜色,并且将弹幕和弹出层结合在一起使用。参考了开源代码后,发现弹幕其实就是对字进行动画效果,沿着轴滚动出现,利用计时器不停播放多组动画,抽屉效果也就是对遮罩层的利用,然后利用动画效果,将弹出栏显示出来,在制作时,记得让视频暂停,这样才能给用户一个好的体验,毕竟没有人想错过一部精彩的视频 ̄ ̄
  分享功能apiapi
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格式但是这个很多人不明白是什么,之前我也不明白,后来发现这个就是你要分享的这篇文章的,但是一定要注意异步与同步的问题。

<(^´)>微信小程序的编译包是不能超过的,一开始放了一大堆的本地图片,结果打包的时候,告诉我太大了,无奈下想办法将图片上传到云端,将图片链接化;再次强调,小程序很重要,里面包含了很多知识,我的弹幕功能也是后来查找时发现了,这可以让我们少走很多弯路;重要的事情说三遍,页面内跳转不能超过级,页面内跳转不能超过级,页面内跳转不能超过级。」
  项目下载文件太大了
稍后附上地址
现在的自己技术还是有些不太成熟,接触小程序不久,还有很多需要学习的地方,不能很好的重现哔哩哔哩的功能,不过作为一个学生,还有很长的学习之路要走。:star:(´∀)♡

[/td][/tr][/table][/td][/tr][/table][/td][/tr][/table][/td][/tr][/table][/td][/tr][/table]
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

47

主题

214

帖子

476

积分

中级会员

Rank: 3Rank: 3

积分
476
发表于 2017-8-25 12:15:48 | 显示全部楼层
弹幕怎么实现的
回复

使用道具 举报

51

主题

227

帖子

505

积分

高级会员

Rank: 4

积分
505
发表于 2017-9-4 10:44:41 | 显示全部楼层
看着不错
回复

使用道具 举报

79

主题

267

帖子

635

积分

高级会员

Rank: 4

积分
635
发表于 2017-9-13 14:01:23 | 显示全部楼层
感谢楼主无私奉献分享
回复

使用道具 举报

55

主题

228

帖子

512

积分

高级会员

Rank: 4

积分
512
发表于 2017-9-29 18:45:31 | 显示全部楼层
好 学习学习
回复

使用道具 举报

55

主题

228

帖子

512

积分

高级会员

Rank: 4

积分
512
发表于 2018-3-27 00:41:22 | 显示全部楼层
感谢楼主学习
回复

使用道具 举报

47

主题

214

帖子

476

积分

中级会员

Rank: 3Rank: 3

积分
476
发表于 2018-3-31 11:28:13 | 显示全部楼层
真的很牛皮,我喜欢,要滚去学习啦!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表