微信背单词类小程序，小鸡单词源码下载，打卡微信小程序

微信背单词类小程序，小鸡单词源码下载，微信小程序开发学习案例，小程序开发教程。一个用来背单词每天打卡的微信小程序，还有词汇测试，包含多种词库后台由腾讯云wafer解决方案。



前段时间开始学做微信小程序，花了半个月时间算是入门了

个人感觉学习还是挺快的，写了一个背单词打开的小程序，大概十几个页面

本文介绍的是实现每天背单词任务的这一个主要页面

前端代码如下: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.lengthtoday_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('task')var length = today_task.lengthif (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=thiswx.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) {},})} })

 

代码下载地址：微信小程序小鸡单词源码下载

 

更多微信小程序开发学习源码下载

微信视频教育类小程序源码下载，在线教育小程序demo

movable-area、cover-view组件实现的微信小程序左划删除功能

微信小程序版F2，支持F2原生所有功能，各种小程序图表示例

微信小程序日历插件功能

微信小程序开发的日历组件，用swiper实现，可左右滑动选择

微信小程序地址选择器，可左右滑动选择，小程序实用功能

微信小程序实现discuz论坛，小程序开发论坛系统

 

更多微信小程序开发资源下载：微信小程序开发案例参考

 

 

 

转载于:https://www.cnblogs.com/slim/p/8932972.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的微信背单词类小程序，小鸡单词源码下载，打卡微信小程序的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。