睡前故事听音频文本阅读小程序代码分享，顺便记录开发心得

闲来无事，制作了一款睡前故事听音频文本阅读的小程序，前端代码用uniapp编写，后端JAVA，数据库mysql。顺便记录一下自己的开发心得。

uniapp本人用了两年有余，最初使用uni是希望开发兼容微信，字节的小程序，但理想很美好，现实很骨感。前期开发第一个项目中就遇到了很多问题。首先是微信端和字节端的css样式问题，一样的代码，会出现不同的间距，这个可能是平台的差异造成的，没办法用条件编译来分别适应。

接着使用js的时候同样的问题又出现了，在调取某些权限，如保存图片到图库，预览文档这些功能的时候，不同平台又有不一样的规定，没法办，条件编译用上吧！最后开发完成感觉虽然是一套代码，但是和开发两套没什么区别。而且页面中到处是条件编译，看起来反而很乱，让人头大。

但是你说uniapp没有优点吗？这肯定不是的，本人现在开发小程序一直用的uni开发。如果不用云开发的话，uni自身的vue语法用起来真的很棒，比频繁的setData舒服不知道多少倍。uni把文本标签，js，css整合成一个页面，用起来也不用频繁的切换文件。

综上所述，虽说uni是跨平台，但是本人现在开发一般先开发出一套微信端的，再复制一份项目修改为其他平台，这样起码代码看起来会舒服很多。问题也很明显就是升级版本的时候，需要修改多套前端代码。

不知道各位同学是怎么解决的呢？

最后，分享一下自己的小程序代码把！目前已经开通了流量主

小程序名称：童话寓言儿童睡前故事 喜欢的小伙伴可以微信端查看鸭

小程序截图：

button::after { border: none; }

.music-view {
	width: 750rpx;
	height: 300rpx;
	position: sticky;
	top: 0;
	background-image: url(https://ruienqiniu.dyfy.group/agushi/fsdfdsfdsfdetrtrhuyfhngfgdfafesfsdfdsfcsd.png);
}

.music-view-controller {
	width: 750rpx;
	height: 100rpx;
	display: flex;
}

.music-view-controller-left {
	width: 100rpx;
	height: 100rpx;
}

.music-view-controller-left-image {
	width: 100rpx;
	height: 100rpx;
}

.music-view-controller-right {
	width: 100rpx;
	height: 100rpx;
}

.music-view-controller-right-image {
	width: 100rpx;
	height: 100rpx;
}

.music-view-controller-play {
	width: 130rpx;
	height: 130rpx;
	margin-top: -10rpx;
}

.music-view-controller-play-image {
	width: 130rpx;
	height: 130rpx;
	margin-top: -10rpx;
}

.scroller-view {
	width: 750rpx;
	padding: 20rpx;
	box-sizing: border-box;
	overflow: auto;
	height: 800rpx;
}

.gushi-list {
	width: 700rpx;
	height: 80rpx;
	margin-left: 25rpx;
	display: flex;
	flex-direction: row;
	line-height: 80rpx;
	background-color: #88888820;
	border-radius: 10rpx;
	margin-bottom: 20rpx;
}

.gushi-list-mingcheng {
	width: 600rpx;
	font-size: 28rpx;
	color: #666;
	overflow: hidden;

}

.gushi-list-mingcheng-play {
	width: 550rpx;
	font-size: 28rpx;
	color: #ff73a9;
	overflow: hidden;

}

.gushi-list-tishi {
	width: 120rpx;
	font-size: 28rpx;
	color: #ff73a9;
}

.music-view-picture {
	width: 120rpx;
	height: 120rpx;
	margin-left: 310rpx;
}

.music-view-picture-image {
	width: 120rpx;
	height: 120rpx;
	padding-top: 20rpx;
}

.music-view-picture-image-animation {
	width: 120rpx;
	height: 120rpx;
	padding-top: 20rpx;
	animation: box-ani 10s infinite linear;
}

@keyframes box-ani {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}
.yuedu-view{
	width: 700rpx;
	margin-left: 25rpx;
}
.popup-view{
	width: 587rpx;
	height: 562rpx;
	background: #ffffff00;
	background-image: url(https://qiniu.dyfy.group/Ashouchaobao/chengxu/134ewqds46f41h444iu64ou1238676867.png);
	background-size: 100% 100%;
}
.popup-view-text1{
	width: 587rpx;
	height: 34rpx;
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #333333;
	line-height: 34rpx;
	text-align: center;
}
.popup-view-text2{
	width: 587rpx;
	height: 26rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #E8B34C;
	line-height: 29rpx;
	text-align: center;
}
.popup-image-button-view{
	width: 587rpx;
	height: 100rpx;
	margin-top: 42rpx;
	
	display: flex;
}
.popup-image-button-view-button{
	width: 222rpx;
	height: 76rpx;
	font-size: 24rpx;
	line-height: 76rpx;
	text-align: center;
	color: #333;
	border-radius: 50rpx;
}