项目介绍

这是一个使用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中，点击运行，选择运行的方式就可以得到运行结果。