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

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

微信背单词类小程序,小鸡单词源码下载,打卡微信小程序_第1张图片

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

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

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

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


 {{content}}
 
 
 /{{pron.uk}}/
 
 

 

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



{{content}}


英/{{pron.uk}}/

美/{{pron.us}}/

 {{definition}}

更多例句 
 


 {{defen[0].first}} {{defen[0].mid}} {{defen[0].last}}
 {{defen[0].translation}}

 {{defen[1].first}} {{defen[1].mid}} {{defen[1].last}}
 {{defen[1].translation}}

 

微信背单词类小程序,小鸡单词源码下载,打卡微信小程序_第2张图片


下面是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('task')
 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) {},
 })
 }
})

 

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

 

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

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

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

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

微信小程序日历插件功能

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

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

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

 

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

 

 

 

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

你可能感兴趣的:(微信背单词类小程序,小鸡单词源码下载,打卡微信小程序)