小程序实战--仿bilibil(哔哩哔哩)小程序

本文介绍了一个小程序实战项目,模仿哔哩哔哩(bilibili)的实现,包括广告轮播图、视频播放、弹幕、弹窗和分享等功能。作者分享了学习小程序的心得,探讨了顶部导航栏、弹幕功能的实现,并提到了在开发过程中遇到的挑战和解决方案。
摘要由CSDN通过智能技术生成

项目预览图

小程序?大改变?

之前就被朋友安利使用小程序,最近接近了小程序,发现了它竟然带来了一场“大革命”。

简单说,它就是一个可以实现之前只能是原生态APP可以实现的效果和功能。比如说,一些酷炫的页面与转场,一些可以直接和手机硬件交互的功能,录音啊,拍视频啊,调用手机的重力感应啊,GPS啊等等。

专业点来说,是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。

小程序的轻量化带来了app所不具有的许多优点,它同时也在向着我们的日常app“宣战”,这场战争花落谁家,就让我们拭目以待吧。

制作简单?

小程序作为一颗冉冉升起的新星,他之所以能被大家接受,不仅仅是因为他的轻量化,脱去了app的繁重外壳,还因为他很容易上手。在经过几天时间去熟悉小程序的构建和说明文档等,我这种初学者也能慢慢地摸到小程序的门槛,进入小程序这个新世界,完成自己的构思。

我们能做什么?

作为一个二次元爱好者(别看着我,我当然不是死宅(ノ=Д=)ノ┻━┻),使用最多的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
好的,下面是微信-哔哩哔哩小程序一级页面设计的实验过程: 1. 确定页面主题和风格 首先需要确定页面的主题和风格,例如是娱乐、科技、教育等。确定好主题和风格后,需要考虑页面的色彩搭配、字体、布局等方面,以保证整个页面的统一性和美观度。 2. 设计页面布局 根据页面的主题和功能需求,设计页面的布局,包括页面的导航栏、内容区、底部标签等。需要注意的是,页面的布局应该简洁明了,不要过于复杂,以方便用户浏览和操作。 3. 设计页面元素 根据页面的布局,开始设计页面的元素,如图片、文字、按钮等。需要注意的是,页面的元素应该符合页面的主题和风格,并且要有足够的吸引力,以吸引用户的注意力。 4. 进行页面原型设计 在确定好页面布局和元素后,可以进行页面原型设计,将设计好的元素按照布局进行排版,形成页面的原型。需要注意的是,原型的设计应该符合用户的使用习惯和心理需求,以提高用户的体验度。 5. 进行页面UI设计 在完成页面原型设计后,可以进行页面UI设计,将原型的元素进行美化和优化,以提高页面的美观度和用户的体验度。需要注意的是,UI设计应该符合页面的主题和风格,并且要有足够的吸引力,以吸引用户的注意力。 6. 进行页面测试和优化 在完成页面UI设计后,可以进行页面测试和优化,检查页面的各个方面是否符合设计要求,并进行必要的优化和改进,以提高页面的效果和用户的体验度。 以上是微信-哔哩哔哩小程序一级页面设计的实验过程,希望能对你有所帮助。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值