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

一、头部自定义导航栏

将配置文件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的相关设置。

<view class="container">
	<scroll-view scroll-y="true"></scroll-view>
</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: 网易云小程序的本地服务接口，基于国外大佬的接口

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

猜你喜欢