找回密码
 立即注册

QQ登录

只需一步,快速开始

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

  [复制链接]
查看: 5275|回复: 269
最佳答案
0 

3

主题

4

帖子

110

积分

新人求带

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

20180423204224251.jpg

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

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

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

前端葡京赌场网站如下:wx:if判断是否显示未背的单词界面
  1. <view wx:if="{{!(showNot)&&!(cpt)}}" class="job_day">
  2. <view class="day_num">{{content}}</view>
  3. <view class="pron-container">
  4. <image class="pron-icon" bindtap="read" id="{{pron_audio.us[0]}}" src="/images/ji.png"></image>
  5. <text class="word-pron" bindtap="read" id="{{pron_audio.us[0]}}">/{{pron.uk}}/</text>
  6. </view>

  7. </view>
复制葡京赌场网站

用户点击不知道,进入单词详细界面
  1. <view wx:if="{{showNot}}" class="detail_card">
  2. <view class='page'>
  3. <view class="detail_word">{{content}}</view>
  4. <view class="detail_pron">
  5. <image bindtap="read"style="width: 20px; height: 20px; background-color: wheat;" mode="scaleToFill" src="../../images/yuying.png" id="{pron_audio.uk[0]}}"></image>
  6. <view bindtap="read"id="{{pron_audio.uk[0]}}">英/{{pron.uk}}/</view>
  7. <image bindtap="read" id="{{pron_audio.us[0]}}" style="width: 20px; height: 20px; background-color: wheat;" mode="scaleToFill" src="../../images/yuying.png"></image>
  8. <view bindtap="read" id="{{pron_audio.us[0]}}">美/{{pron.us}}/</view>
  9. </view>
  10. <view style="width:80%;font-size: 16px;font-family: Songti TC;padding-bottom: 6px;" >{{definition}}</view>
  11. <view class="notice_line"></view>
  12. <view bindtap="moredefen" style="width:76%; color:gray;text-align:right;padding-bottom:20px;padding-right:45px;font-size:16px; ">更多例句
  13. </view>
  14. <view wx:if="{{!(more)}}">
  15. <view class="liju_content">
  16. <view class="detail_defin" >{{defen[0].first}}<view style="color:red;display:inline;"> {{defen[0].mid}} </view>{{defen[0].last}}</view>
  17. <view class="detail_defin">{{defen[0].translation}}</view>
  18. <view style="padding-bottom:20px;"></view>
  19. <view class="detail_defin" >{{defen[1].first}}<view style="color:red;display:inline;"> {{defen[1].mid}} </view>{{defen[1].last}}</view>
  20. <view class="detail_defin">{{defen[1].translation}}</view>
  21. </view>
复制葡京赌场网站

20180423204244299.jpg

下面是js部分葡京赌场网站

当用户点击(不认识)后的函数

这个页面的关键点,将用户不认识的单词,重新放入未背单词队列中,并且在队列末尾添加一个,队列中间添加一个today_task.push(this.data.counter)
today_task.splice(length / 2, 0, this.data.counter)

这样用户在后续中就会经常看到这个单词,加深印象

具体葡京赌场网站如下
  1. this.setData({
  2. showNot: true,
  3. more: false
  4. })
  5. var today_task = wx.getStorageSync('task')
  6. var length = today_task.length
  7. today_task.push(this.data.counter)
  8. today_task.splice(length / 2, 0, this.data.counter)
  9. wx.setStorage({
  10. key: "task",
  11. data: today_task
  12. })
  13. },
复制葡京赌场网站

用户点击下一个时

因为页面有两个“下一个”的按钮,一个是用户在背单词界面已经认识该单词后直接点击的按钮

第二个是用户不认识该按钮,进入单词详细界面时的按钮,所以我给他们的id做了标记

通过id来判断用户是否记住这个单
  1. next:function(e) {
  2. console.log(e)
  3. if (e.currentTarget.id ){
  4. wx.setStorage({
  5. key: this.data.time,
  6. data: wx.getStorageSync(this.data.time)+1
  7. })
  8. }
  9. var today_task = wx.getStorageSync('task')
  10. var length = today_task.length
  11. if (length > 0) {
  12. var n = today_task.shift()
  13. this.setData({ showNot: false})
  14. this.setData({counter:n})
  15. wx.setStorage({
  16. key: "task",
  17. data: today_task
  18. })this.search(n)
  19. }
  20. else{
  21. this.complete()
  22. }},
复制葡京赌场网站

用户收藏单词,将单词写入收藏的缓存,其实有用自己服务器的话,写入数据库比较安全
  1. handleSaveTap(){
  2. if(wx.getStorageSync('collect')){
  3. var collect = wx.getStorageSync('collect')
  4. }
  5. else {
  6. var collect=[]
  7. }
  8. collect.push([this.data.content, this.data.pron, this.data.pron_audio, this.data.defen, this.data.definition])
  9. wx.setStorage({
  10. key: "collect",
  11. data: collect
  12. })

  13. wx.showToast({ title: '收藏成功' })
  14. },
  15. liju(id) {
  16. var that=this
  17. wx.request({
  18. url: 'https://api.shanbay.com/bdc/example/?vocabulary_id=' + id,
  19. data: {},
  20. method: 'GET',
  21. success: function (res) {
  22. console.log(res)
  23. that.setData({
  24. defen: [res.data.data[0], res.data.data[1], res.data.data[3], res.data.data[4]]

  25. })
  26. },
  27. fail: function () {
  28. },
  29. complete: function () {
  30. }
  31. })
复制葡京赌场网站

用户完成单词任务后,点击进行单词测试
  1. test(){
  2. wx.navigateTo({
  3. url: '../test/test',
  4. success: function(res) {},
  5. fail: function(res) {},
  6. complete: function(res) {},
  7. })
  8. }
  9. })
复制葡京赌场网站


回复下载葡京赌场网站:
游客,如果您要查看本帖隐藏内容请回复

回复

使用道具 举报

最佳答案
0 

0

主题

40

帖子

135

积分

新人求带

积分
135
发表于 2018-4-24 22:32:03 | 显示全部楼层
欢乐夺宝,开心生活
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

90

积分

等待验证会员

积分
90
发表于 2018-4-24 23:15:09 | 显示全部楼层
老哥稳啊,不错
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

813

帖子

1万

积分

黄金VIP

Rank: 3Rank: 3

积分
19798
发表于 2018-4-24 23:27:50 | 显示全部楼层
微信背单词类小程序,小鸡单词源码下载,打卡微信小程序
回复 支持 反对

使用道具 举报

最佳答案
0 

3

主题

102

帖子

2683

积分

专家路上

积分
2683
发表于 2018-4-24 23:57:48 | 显示全部楼层
这个东西很好
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

378

帖子

4587

积分

专家路上

积分
4587
发表于 2018-4-25 08:52:22 | 显示全部楼层
不错的资源
回复 支持 反对

使用道具 举报

最佳答案
0 

2

主题

142

帖子

4200

积分

专家路上

积分
4200
发表于 2018-4-25 09:08:18 | 显示全部楼层
dsafsdgfsdgsdf
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

111

帖子

1017

积分

专家路上

积分
1017
发表于 2018-4-25 10:37:13 | 显示全部楼层
很不错,学习哈
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

6

帖子

90

积分

新人求带

积分
90
发表于 2018-4-25 11:51:30 | 显示全部楼层
谢谢分享不错
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

15

帖子

280

积分

等待验证会员

积分
280
发表于 2018-4-25 15:56:13 | 显示全部楼层
支持一下
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.mainetimberworks.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信葡京娱乐网址号

市场合作
[email protected]