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

一、头部自定义导航栏

将配置文件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: 网易云小程序的本地服务接口，基于国外大佬的接口

《网易云音乐小程序》开发总结相关推荐

taro 重新加载小程序_taro-music一款开源网易云音乐小程序
简介 taro-music 是基于taro + taro-ui + redux + react-hooks + typescript 开发的网易云音乐小程序,目前正在使用react-hooks重构中. ...
网易云音乐小程序，带后台（SpringBoot）
目录 1.简介 2.技术栈 3.环境 4.项目后台配置 5.项目展示 6.下载地址 1.简介此系统是仿网易云音乐网易云音乐是一款专注于发现与分享的音乐产品,依托专业音乐人.DJ.好友推荐及社交功能 ...
简单的仿网易云音乐小程序（一）
简单的仿网易云音乐小程序(一) 前言思维图注意事项虚拟机调试真机调试主页面搜索框歌单列表歌单模版 wxs filter 页面逻辑等待搜索页面搜索框 clearValue start ...
简单的仿网易云音乐小程序（总结）
简单的仿网易云音乐小程序(总结) 这个小程序学到了以下知识点配置网络请求进行网络请求进行音乐播放进行模版使用各种页面触发事件输入框的使用简单的自定义tab页面切换导航的数据传输
网易云音乐小程序案例分享附完整代码
todo: 添加音乐到收藏(最近)列表歌词滚动从一个 hello world 开始微信开发者工具生成目录如下: . |-- app.js |-- app.json |-- app.wxss | ...
网易云音乐小程序登录接口显示400，拥挤问题解决
有在做网易云登录接口的小伙伴会发现自己会出现如下问题解决办法: 用这个接口:https://neteasecloudmusicapi.js.org/#/ 配置好,先cmd,再npm i,如果出现np ...
网易云音乐小程序笔记
小程序750px html 双引号 js 单引号 flex布局:弹性盒子授权动作只发生一次获取用户信息 flex-direction: column; // 修改flex主轴x修改为y lign- ...
网易云音乐排行榜接口取消后解决方法（网易云音乐小程序）
解决办法: 结合"所有榜单"和"获取歌单详情"两个api获取.因为获取歌单详情api只能获取单个歌单的内容,所以要先获得多个歌单id. 完整代码: let to ...
云音乐小程序开发知识小记（上）
云音乐小程序开发知识小记(上) 在云音乐小程序开发中学到的分上中下,因为本人也是在学习中,请多指教本次的**云音乐小程序开发知识小记(上)**主要涉及四个方面: 轮播图数字格式化处理自定义组件 ...
netease-im网易云通信小程序集成实践+群组功能完善
在微信里放一个IM,被指定放网易云通信.这次实践是一场非常虐心的体验,虽然集成网易云通信有官方资料参考,也有官方的demo参考,但是踩的坑也不少. 一.不完全是技术问题消息漫游需要联系商务开通二. ...

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

《网易云音乐小程序》开发总结相关推荐

最新文章

热门文章