uniapp：ruoyi-App画英语每日一句页面，类似抖音翻页

       最近，浏览csdn的时候，发现一篇很有意思的文章，一个博主无意间发现的金山词霸每日一句的接口，这给我了我灵感，我为啥不调用这个接口，写一个英语每日一句的页面，话不多说，开干

那个博主的链接：词霸的每日一句的api接口_每日一句api接口-CSDN博客

1.学不学之前，先看效果图

各位大佬满意吗，满意的话，咱们就直接开干

2.上代码

2.1 template代码

<template>
	<view>
		<swiper :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" vertical 
			style="height: 100vh;">
			<swiper-item class="fullscreen-item" v-for="(item,index) in swiperList" :key="index">
				<view class="sentence_container">
					<view class="sentence_card" :style="{'background-image':'url(' + item.picture2 + ')'}">
						<view class="sentence_Date">
							<view class="sentence_week">{{ item.title }}</view>
							<view class="sentence_date">{{ item.currentWeekday }}</view>
						</view>
						<view class="sentence_English">
							{{ item.content }}
						</view>
						<view class="sentence_chinese">
							{{ item.note }}
						</view>
						<view class="sentence_footer">
							<text class="button_text"># {{ item.caption}}</text>
							<button class="sentence_button" @click="play(item.content)">
								<text class="iconfont icon-laba-copy listen"></text>
							</button>
						</view>
					</view>
					<view class="sentence_bottom">
						<button class="bottom_button">
							<view class="iconfont icon-maikefeng bottom_icon"></view>
						</button>
						<view class="bottom_tool">
							<text>收藏</text>
							<text>分享</text>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

2.2 js代码

在代码里，我引用了百度语音合成，百度语音合成我在本专栏的uniapp：ruoyiApp百度语音合成里面有讲解，各位大佬有需要的话，直接拿去

地址 uniapp: ruoyi-App 引用百度语音合成-CSDN博客

<script>
	export default {
		// 组件代码
		data() {
			return {
				english: "Nothing is impossible; the word itself says 'I'm possible!",
				currentDate: '',
				currentWeekday: '',
				nowDate: '',
				swiperList: [],
			}
		},
		methods: {
			play(content) {
				//this.english = 'Здравствуйте, я разработчик Shandong Yi Road, очень рад, что вы можете использовать наши продукты '
				const innerAudioContext = uni.createInnerAudioContext()
				uni.request({
					url: 'https://aip.baidubce.com/oauth/2.0/token',
					data: {
						grant_type: 'client_credentials',
						client_id: '你的ApiKey',
						client_secret: '你的Secret Key'
					},
					success: (res) => {
						if (uni.setInnerAudioOption) {
							uni.setInnerAudioOption({
								obeyMuteSwitch: false,
								autoplay: true
							})
						} else {
							innerAudioContext.obeyMuteSwitch = false;
							innerAudioContext.autoplay = true;
						}
						innerAudioContext.onCanplay(() => {
							console.log('可以播放');
						});
						innerAudioContext.onError((res) => {
							console.log(res.errMsg);
							console.log(res.errCode);
						});
						innerAudioContext.autoplay = true;
						innerAudioContext.src =
							'https://tsn.baidu.com/text2audio?lan=zh&ctp=1&cuid=abcdxxx&tok=' +
							res.data.access_token + '&tex=' + encodeURIComponent(content) +
							'&vol=5&per=0&spd=5&pit=5&aue=3';
						innerAudioContext.onPlay(() => {
							console.log('开始播放');
						});

					}
				})

			},
			async getSentenceData() {
			    return new Promise((resolve, reject) => {
			        let _then = this;
			        uni.request({
			            url: 'http://sentence.iciba.com/index.php?c=dailysentence&m=getdetail',
			            method: 'GET',
			            data: {
			                title: this.currentDate
			            },
			            success(res) {
			                console.log('词霸', res.data);
			                res.data.currentWeekday = _then.currentWeekday;
			                _then.swiperList.push(res.data);
			                console.log(_then.swiperList);
			                resolve(); // 请求成功，调用 resolve 表示可以进行下一个请求
			            }
			        });
			    });
			},
			
			async getCurrentDate(date) {
			    const year = date.getFullYear();
			    const month = String(date.getMonth() + 1).padStart(2, '0');
			    const day = String(date.getDate()).padStart(2, '0');
			    this.currentDate = `${year}-${month}-${day}`;
			
			    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
			    const weekdayIndex = date.getDay();
			    this.currentWeekday = weekdays[weekdayIndex];
			    
			    await this.getSentenceData(); // 等待当前日期数据请求完成
			
			    // 其他操作...
			},
			
			async processDates() {
			    for (let i = 0; i <= 7; i++) {
			        const today = new Date();
			        const targetDate = new Date(today);
			        targetDate.setDate(today.getDate() - i);
			        await this.getCurrentDate(targetDate);
			    }
			}

		},
		onReady() {
			this.processDates()


		}
	};
</script>

2.3 css代码

<style>
	.fullscreen-item {
		width: 100%;
		height: 100%;
	}

	.sentence_container {
		width: 100%;
	}

	.sentence_card {
		margin: 20px;
		width: 690rpx;
		border-radius: 20px;
		height: 1200rpx;
		background-size: cover;
		background-position: center;
		color: white;
		text-align: center;
		/* 垂直居中文本 */
	}


	.sentence_Date {
		padding-top: 15%;
		float: right;
		margin-right: 20px;

	}

	.sentence_date {
		margin-top: 5px;
		font-size: 20px;
		font-family: Georgia, serif;

	}

	.sentence_week {
		font-size: 38px;
		font-family: Georgia, serif;
	}

	.bottom_icon {
		font-size: 22px;
		text-align: center;
	}

	.sentence_English {
		font-family: Georgia, serif;
		padding-top: 100%;
		font-size: 26px;
	}

	.sentence_chinese {
		padding-top: 15%;
		font-size: 14px;
	}

	.sentence_footer {
		padding-top: 20%;
		display: flex;
		align-items: center;
	}

	.button_text {
		margin-left: 20px;
	}

	.sentence_button {
		background-color: black;
		opacity: 0.6;
		margin-right: 20px;
		width: 90px;
		height: 34px;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.listen {
		color: #fff;
		display: inline-block;
		vertical-align: middle;
		font-size: 30px;
	}

	.sentence_bottom {
		display: flex;
		align-items: center;
	}

	.bottom_button {
		width: 100px;
		height: 40px;
		background-color: #FC494E;
		margin-left: 20px;
		border-radius: 20px;
	}

	.bottom_tool {
		margin-right: 20px;
	}
</style>

这样，我们的代码就写完了，可以ctrl + s 在微信小程序模拟器上看效果了

3.备注

这个demo还是有点儿问题的，现在不能一拉到底，一直翻页，一直显示，后续，我在研究研究，在改善一下，到时候发在Hbuilder的插件市场。