微信背单词小程序/小鸡单词

小鸡
阅读685 喜欢3 javascript 更新2018-5-14

前段时间开始学做微信小程序,花了半个月时间算是入门了
个人感觉学习还是挺快的,写了一个背单词打开的小程序,大概十几个页面 本文介绍的是实现每天背单词任务的这一个主要页面

项目做完第一个版本就停止维护了哈哈

前端代码如下:wx:if判断是否显示未背的单词界面

<view wx:if="{ {!(showNot)&&!(cpt)}}" class="job_day">
<view class="day_num">{ {content}}</view>
<view class="pron-container">
<image class="pron-icon" bindtap="read" id="{ {pron_audio.us[0]}}" src="/images/ji.png"></image>
<text class="word-pron" bindtap="read" id="{ {pron_audio.us[0]}}">/{ {pron.uk}}/</text>
</view>
</view>

用户点击不知道,进入单词详细界面

<view wx:if="{ {showNot}}" class="detail_card">
<view class=page>
<view class="detail_word">{ {content}}</view>
<view class="detail_pron">
<image bindtap="read"style="width: 20px; height: 20px; background-color: wheat;" mode="scaleToFill" src="../../images/yuying.png" id="{pron_audio.uk[0]}}"></image>
<view bindtap="read"id="{ {pron_audio.uk[0]}}">英/{ {pron.uk}}/</view>
<image bindtap="read" id="{ {pron_audio.us[0]}}" style="width: 20px; height: 20px; background-color: wheat;" mode="scaleToFill" src="../../images/yuying.png"></image>
<view bindtap="read" id="{ {pron_audio.us[0]}}">美/{ {pron.us}}/</view>
</view>
<view style="width:80%;font-size: 16px;font-family: Songti TC;padding-bottom: 6px;" >{ {definition}}</view>
<view class="notice_line"></view>
<view bindtap="moredefen" style="width:76%; color:gray;text-align:right;padding-bottom:20px;padding-right:45px;font-size:16px; ">更多例句
</view>
<view wx:if="{ {!(more)}}">
<view class="liju_content">
<view class="detail_defin" >{ {defen[0].first}}<view style="color:red;display:inline;"> { {defen[0].mid}} </view>{ {defen[0].last}}</view>
<view class="detail_defin">{ {defen[0].translation}}</view>
<view style="padding-bottom:20px;"></view>
<view class="detail_defin" >{ {defen[1].first}}<view style="color:red;display:inline;"> { {defen[1].mid}} </view>{ {defen[1].last}}</view>
<view class="detail_defin">{ {defen[1].translation}}</view>
</view>

下面是js部分代码 当用户点击(不认识)后的函数 这个页面的关键点,将用户不认识的单词,重新放入未背单词队列中,并且在队列末尾添加一个,队列中间添加一个 **today_task.push(this.data.counter) today_task.splice(length / 2, 0, this.data.counter)** 这样用户在后续中就会经常看到这个单词,加深印象 具体代码如下

this.setData({
 showNot: true,
 more: false
 })
 var today_task = wx.getStorageSync(task)
 var length = today_task.length
 today_task.push(this.data.counter)
 today_task.splice(length / 2, 0, this.data.counter)
 wx.setStorage({
 key: "task",
 data: today_task
 })
 },

###用户点击下一个时 因为页面有两个“下一个”的按钮,一个是用户在背单词界面已经认识该单词后直接点击的按钮 第二个是用户不认识该按钮,进入单词详细界面时的按钮,所以我给他们的id做了标记

通过id来判断用户是否记住这个单

next:function(e) {
console.log(e)
if (e.currentTarget.id ){
wx.setStorage({
key: this.data.time,
data: wx.getStorageSync(this.data.time)+1
})
}
var today_task = wx.getStorageSync(&apostask&apos)
var length = today_task.length
if (length > 0) {
var n = today_task.shift()
this.setData({ showNot: false})
this.setData({counter:n})
wx.setStorage({
key: "task",
data: today_task
})this.search(n)
}
else{
this.complete()
}},`

###用户收藏单词,将单词写入收藏的缓存,其实有用自己服务器的话,写入数据库比较安全

handleSaveTap(){
 if(wx.getStorageSync(collect)){
 var collect = wx.getStorageSync(collect)
 }
 else {
 var collect=[]
 }
 collect.push([this.data.content, this.data.pron, this.data.pron_audio, this.data.defen, this.data.definition])
 wx.setStorage({
 key: "collect",
 data: collect
 })
 
 wx.showToast({ title: 收藏成功 })
 },
 liju(id) {
 var that=this
 wx.request({
 url: https://api.shanbay.com/bdc/example/?vocabulary_id= + id,
 data: {},
 method: GET,
 success: function (res) {
 console.log(res)
 that.setData({ 
 defen: [res.data.data[0], res.data.data[1], res.data.data[3], res.data.data[4]]
 
 })
 },
 fail: function () {
 },
 complete: function () {
 }
 })

###用户完成单词任务后,点击进行单词测试

test(){
wx.navigateTo({
url: ../test/test,
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
})