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

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

  1. c#语言经典程序100例,C#入门必看的实例程序100个 - 源码下载|Windows编程|其他小程序|源代码 - 源码中国...

    C#入门必看的实例程序100个\实例01\01.bmp C#入门必看的实例程序100个\实例01\csc编译器路径.txt C#入门必看的实例程序100个\实例01\hello.cs C#入门必看的实 ...

  2. uni-app微信小程序生成自定义参数二维码,跳转小程序指定页面,获取参数;uni-app微信小程序获取二维码自定义参数;微信小程序生成动态参数二维码;uni-app微信小程序获取动态参数二维码;

    一.场景需求: 在小程序个人名片页面A页面,生成用户的个人名片二维码(该二维码携带用户的唯一标识id):微信扫一扫或长按图片识别这个二维码,可以跳转到小程序的B页面,并且在B页面拿到二维码上的唯一标识 ...

  3. 最新ThinkPHP内核全行业小程序运营管理系统源码 DIY布局 一键生成小程序

    介绍: ThinkPHP内核全行业小程序运营管理系统源码 自由DIY布局 一键生成小程序,内附安装说明 无需编程,各行业模版直接套用,一键生成,轻松搭建小程序 界面自由DIY,打造个性小程序 可拖拽式 ...

  4. 神秘空投/小空投网站源码,小空投公众号源码下载,空投小程序源码下载制作介绍

    ------------------- 程序特色 ---------------------- 发送空投:支持发送文字.图片.语音.视频等多种类型的空投 接受空投:用户在输入对应的空投后,可以查看到空 ...

  5. 松翰松翰c语言编程指导,松翰C程序检单例程代码下载

    标签: 松翰C程序检单例程 #include "define.h" #include "sn8p2501b.h" //--------------------- ...

  6. java星际小战_星际飞战下载-星际飞战小游戏最新版下载v1.0.4-游迅网

    星际飞战,这是一款玩法十分刺激的飞行射击小游戏.这款星际飞战拥有大量的关卡,并且,每一个关卡的通关要求都各不相同,玩家们在这里能够体验无比刺激的飞行射击玩法.同时,整个星际飞战游戏进行过程都伴有符合场 ...

  7. STC15-STC15W4K56S4-STC15F2K60S2串口通信程序代码-提供源码下载

    源码下载地址: 源码: //**********************************************//STC15F2K60S2串口通信程序,将串口接受到的数据从串口发出去 //采 ...

  8. uni-App小程序、canvas 生成海报 +下载图片+分享微信好友

    功能:分享弹窗,生成海报并支持保存,目前仅支持微信小程序 ·插件包链接 https://ext.dcloud.net.cn/plugin?id=586 代码: <template>< ...

  9. lisp源码 微盘,AutoLISP - 源码下载|Windows编程|其他小程序|源代码 - 源码中国

    CAD操作Excel函数 ................\circle_data_2xls写数据到表格.LSP ................\ExcelLisp表格通用程序.LSP ...... ...

最新文章

  1. 在软件中常用的“撤销”操作,其本质是“栈”!
  2. Hibernate的复合主键映射
  3. [zz]路由表和静态路由
  4. (转)FPGA的速度等级(speed grade)
  5. java 异常 过滤器_在过滤器Filter中抛出一个全局异常可以捕获的异常
  6. Java BIO、NIO、AIO的区别
  7. linux下exec系列(一)
  8. php用a什么软件来下载,AMQB官方PHP库
  9. python requests库api_python利用requests库进行接口测试的方法详解
  10. ViewPager子类与父类滑动冲突的情况
  11. 实战中的Agile开发
  12. 奥威尔:老大哥在看着你-软件公司十诫
  13. 易鲸捷首架刘明:Trafodion值得放入工具箱,因为有以下优点
  14. juce教程005-中文显示
  15. TS 中 as 用法
  16. 腾讯linux集成化界面,腾讯TOS系统今日开启内测:界面扁平化风格
  17. 技术人员帮助电商运营选择最合适的物流快递运输公司的5个切入点
  18. Pycharm debug Process finished with exit code 1
  19. Hashtable使用
  20. 什么是MISRA?如何满足该行业标准?

热门文章

  1. LeetCode:104_Maximum Depth of Binary Tree | 二叉树的最大深度 | Easy
  2. FaceDataset常用的人脸数据库
  3. 微服务部署HTTP反向代理、负载均衡工具Træfɪk
  4. 通用机器学习流程与问题解决架构模板
  5. opencv grabcut
  6. es_分组-分页-TransportClient实现
  7. 记一次错误的伪静态配置文件
  8. LINUX网络状态工具SS命令使用详解
  9. 解决Windows下栈内存过小的问题
  10. POJ 1160 Post Office