uni-app实战--音频小说app小程序
项目介绍
这是一个使用vue和uni官方提供的框架API在Hbulider开发的项目。我这里主要做的前端和界面设计,数据是后台接口提供的,但是自己也可以修改可以不使用接口,自己mock或者提供数据。如果要学习的话只需要掌握vue基础,和会看微信云开发文档就行了。其中细节处理了H5,微信小程序,安卓和苹果的一些数据兼容处理,在微信开发者工具和浏览器上都能运行。
功能演示
2.1 项目结构
使用Hbulider软件Vue框架语言开发其中主要运用了很多uni源生的组件例如媒体audio实现音频播放、uni-drawer抽屉上拉框、uni-pop弹窗、uni-translation过度动画、uni-load-more加载更多组件等。可以参考官网uni-app官网 (dcloud.net.cn),官方文档有很详细的讲解和案例。
整个项目可以编译到浏览器端,也可以使用开发者工具打开自动转换成小程序开发语言。可以运行成一个小程序,一个网页或者手机上的一个软件。
2.2 主界面
主界面大多数使用Iconfont图标来布局
2.3 听歌界面
点击主界面的播放悬浮窗进入详情界面,详情中有歌手信息展示和歌曲列表展示,可以点击上一首或者下一首切换音乐,也可以通过歌曲列表切换,此外还有夜间模式的切换。
2.4 读书界面
2.5 阅读界面
阅读界面下面的功能栏有四个,点击目录可以查看当前目录和跳转目录,点击夜间模式界面背景会变暗,点击字体则可以调整自己大小和行距,点击更多可以修改背景样式。
2.6 书本挑选界面
书本的数据可以自己修改也可以后端mock
2.7 排行界面
打包后展示
3.1 手机端(安卓)
因为处理了兼容和不同运行环境的差异与兼容,在手机上运行跟浏览器上运行是一样的效果。只需要把代码打包然后手机安装就可以自己使用了。
3.2 小程序界面
3.3main.js代码
import Vue from 'vue'
import store from 'store'
import App from './App'
import myIcon from '@/components/myIcon.vue';
import request from '@/common/request';Vue.config.productionTip = false;App.mpType = 'app';
Vue.prototype.$statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
Vue.prototype.$http = request;Vue.component('myIcon',myIcon);const app = new Vue({store,...App
}).$mount()
可以通过配置运行到不同的地方
总结
项目的大部分数据只是简单的采用了静态获取的方式,没有实时更新,可以加进修改添加功能让前后端连接交互更多,还可以完善更多功能或者添加更多功能。
有兴趣的小伙伴可以访问Gitee地址拿到源码:https://gitee.com/wdoxshzt/miniprogram.git
下载源码后直接放在Hbulider中,点击运行,选择运行的方式就可以得到运行结果。
uni-app实战--音频小说app小程序相关推荐
- 【毕业设计之微信小程序系列】基于APP的微信点餐小程序的设计与实现
基于APP的微信点餐小程序的设计与实现 摘 要 本文介绍了一种基于APP的微信点餐小程序的设计与实现方法.该系统利用微信公众号作为用户入口,用户可以通过微信扫码进入点餐系统,选择菜品.下单.支付等操作 ...
- 十多个巨头App上可跑智能小程序了
十多个巨头App上可跑智能小程序了 11月1日,百度副总裁沈抖在2018百度世界大会上抛出智能小程序的多个重磅消息,再次成为开发者关注的焦点. 十多个头部App开跑智能小程序 百度正式成立智能小程序开 ...
- APP 抓包和微信小程序抓包-Charles 的精简使用教程
APP 抓包和微信小程序抓包-Charles 的精简使用教程 2021-09-25 更新 2019-07-10 更新 目标 教程 一.安装 Charles 二.Charles 简介 (1)Charle ...
- 订阅号助手APP怎么插入留言板小程序?
现在很多小伙伴都是都是利用碎片化的时间来编写文章,身边并没有电脑,这个时候就没有办法使用电脑浏览器上的订阅号留言板插件来接入留言功能了,好在我们又开发了手机端在订阅号助手APP上接入留言板小程序的功能 ...
- 移动端App分享,以及微信小程序和公众号分享功能实现
移动端App分享,以及微信小程序和公众号分享功能实现 分享功能记录收藏,上链接 前端工作记录
- APP自动化_操作微信小程序/H5页面实现自动化_多终端并行
APP自动化_混合App自动化理论相关 原理:本质是混合app,应该用切入webview的方法去自动化web页面. 现状:目前由于技术原因无法切到webview中做自动化. 方案:采用原生app自动方 ...
- python flask实战订餐系统微信小程序-60nginx + uwsgi 实现多进程访问
python flask实战订餐系统微信小程序-60nginx + uwsgi 实现多进程访问 B站配套视频教程观看 uwsgi多进程配置 uwsgi.ini配置 nginx和uwsgi通过配置文件s ...
- python flask实战订餐系统微信小程序-59flask部署单进程启动服务
欢迎关注原创 Python微信订餐小程序课程视频 https://edu.csdn.net/course/detail/36074 Python实战量化交易理财系统 https://edu.csdn. ...
- 渗透实战-抓取微信小程序流量包
渗透实战-抓取微信小程序流量包 前言 Proxifier使用 启用HTTPProxy服务器 设置监听地址 设置代理规则 利用Proxifier抓取微信小程序 前言 现在渗透测试不仅要对传统的web测试 ...
最新文章
- JSP 中使用Struts2的值
- .NET Core 迁移躺坑记
- r中rep_Spring中@ Component,@ Service,@ Controller和@Repository之间的区别
- Netty writeAndFlush() 流程与异步
- scrapy安装_爬虫框架Scrapy简介与安装
- 汇编语言复习摘要二——寄存器
- kafka exporter v0.3.0 发布: Prometheus官方推荐,欢迎试用
- 漫谈 | “黎曼猜想”和区块链加密算法到底有什么关系?
- javascript call apply
- 持续交付模型中文化转型的重要意义
- Ueditor使用以及遇到的问题
- 2018科大讯飞AI营销算法大赛总结(冠军)
- Mesos和Marathon下容器无法正常部署可能的原因
- 常用视频像素格式NV12、NV21、I420、YV12、YUYV
- 混凝土静力受压弹性模量试验计算公式_C50混凝土静力受压弹性模量试验报告
- java实现微信公众号的模板消息推送
- Netty权威指南 第2版
- 读懂这三本书,才算真懂大数据!(套装共3册) (如何读懂大数据主题系列) - 电子书下载(高清版PDF格式+EPUB格式)...
- php临时终止,PHP终止脚本执行的方法介绍
- 启动 AXD 配置开发板
热门文章
- osg osgb osgt格式
- Ubuntu下使用Tobii Eye Tracker 4C眼动仪
- 支付宝小程序设置通栏标题栏
- 64位 regsrv win10_怎么把Win10注册表恢复初始?
- win10怎么设置外接摄像头_win10系统外接摄像头不能用的解决方法
- 合并果子2之蚂蚁搬沙
- 最详细Struts2基础入门
- vivado+zedboard之音频分析仪_SW
- 数据库练习题:学生表(学号,姓名,性别,系部,年龄)选课表(学号,课程号,成绩)课程表(课程号,课程名,学分)...
- 为保卫学术自由和公民权利而斗争