微信背單詞類小程序，小雞單詞源碼下載，微信小程序開發(fā)學(xué)習(xí)案例，小程序開發(fā)教程。一個用來背單詞每天打卡的微信小程序，還有詞匯測試，包含多種詞庫后臺由騰訊云wafer解決方案。



前段時間開始學(xué)做微信小程序，花了半個月時間算是入門了

個人感覺學(xué)習(xí)還是挺快的，寫了一個背單詞打開的小程序，大概十幾個頁面

本文介紹的是實(shí)現(xiàn)每天背單詞任務(wù)的這一個主要頁面

前端代碼如下: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>

?

用戶點(diǎn)擊不知道，進(jìn)入單詞詳細(xì)界面

<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部分代碼

當(dāng)用戶點(diǎn)擊（不認(rèn)識）后的函數(shù)

這個頁面的關(guān)鍵點(diǎn)，將用戶不認(rèn)識的單詞，重新放入未背單詞隊列中，并且在隊列末尾添加一個，隊列中間添加一個today_task.push(this.data.counter)
today_task.splice(length / 2, 0, this.data.counter)

這樣用戶在后續(xù)中就會經(jīng)常看到這個單詞，加深印象

具體代碼如下

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})},

　

用戶點(diǎn)擊下一個時

因?yàn)轫撁嬗袃蓚€“下一個”的按鈕，一個是用戶在背單詞界面已經(jīng)認(rèn)識該單詞后直接點(diǎn)擊的按鈕

第二個是用戶不認(rèn)識該按鈕，進(jìn)入單詞詳細(xì)界面時的按鈕，所以我給他們的id做了標(biāo)記

通過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()}},

　

用戶收藏單詞，將單詞寫入收藏的緩存，其實(shí)有用自己服務(wù)器的話，寫入數(shù)據(jù)庫比較安全

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 () {}})

　　

用戶完成單詞任務(wù)后，點(diǎn)擊進(jìn)行單詞測試

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

?

代碼下載地址：微信小程序小雞單詞源碼下載

?

更多微信小程序開發(fā)學(xué)習(xí)源碼下載

微信視頻教育類小程序源碼下載，在線教育小程序demo

movable-area、cover-view組件實(shí)現(xiàn)的微信小程序左劃刪除功能

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

微信小程序日歷插件功能

微信小程序開發(fā)的日歷組件，用swiper實(shí)現(xiàn)，可左右滑動選擇

微信小程序地址選擇器，可左右滑動選擇，小程序?qū)嵱霉δ?/p>

微信小程序?qū)崿F(xiàn)discuz論壇，小程序開發(fā)論壇系統(tǒng)

?

更多微信小程序開發(fā)資源下載：微信小程序開發(fā)案例參考

?

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/slim/p/8932972.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的微信背单词类小程序，小鸡单词源码下载，打卡微信小程序的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。