最近,浏览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的插件市场。