《网易云音乐小程序》开发总结

一、头部自定义导航栏

将配置文件pages.json中，每个页面的style->navigationStyle设置为custom即可开启自定义导航栏。

{"pages": [{"path": "pages/index/index","style": {// "navigationBarTitleText": "uni-app"// 使用自定义顶部状态栏"navigationStyle":"custom"}}    ]}

开启自定义导航栏会出现一些问题，因为手机顶部窗体是沉浸式的原因，手机顶部状态栏区域会被页面内容覆盖。

你并不能通过设置一个固定的margin来解决此问题，因为不同类型的手机，右侧微信默认导航栏的margin-top是不一样的。官方提供了一个css变量 --status-bar-height 来解决此问题，此变量能够获得不同手机的导航栏距离顶部的距离，通过合适的使用此变量即可基本解决。

二、某个页面背景图片的设置。

如果页面中需要将服务器返回的图片背景数据进行渲染展示，可以将样式类放入App根组件，供全局使用。

样式可以这样书写：

.bgImg{width: 100%;height: 100vh;// background-image: url(../../static/logo.png); // 平铺background-size: cover; // 居中background-position: center 0;position: fixed;top: 0;left: 0;z-index: -1;filter: blur(20px) brightness(0.7);transform: scale(1.2);}

三、可视滚动区域scroll-view的相关设置。

在App.vue根组件中配置container即可

.container{width: 750rpx;// 80px是动态的，这里的80px是指头部导航栏的高度，将其减去即可height: calc(100vh - 80px);overflow: hidden;scroll-view{width: 100%;height: 100%;}}

四、文本超出分为显示省略号的实现

1.超出一行显示省略号

// 文字超出范围，省略号代替的全局样式.app-text-ellipsis{overflow: hidden;text-overflow: ellipsis;// 限制一行white-space: nowrap;}

2.超出两行或多行显示省略号

.className{    overflow: hidden;text-overflow: ellipsis;// 显示两行后，多余的内容用省略号代替display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;}

5.gitee仓库连接（含源码）

源码：https://gitee.com/mrdai123/netease-cloud-applet

本地接口服务器：网易云小程序_server: 网易云小程序的本地服务接口，基于国外大佬的接口