<rp id="jfnnt"><em id="jfnnt"><form id="jfnnt"></form></em></rp><video id="jfnnt"></video>

<big id="jfnnt"><dl id="jfnnt"><video id="jfnnt"></video></dl></big>
<nobr id="jfnnt"><pre id="jfnnt"></pre></nobr>
<track id="jfnnt"></track>

        <nobr id="jfnnt"></nobr>

        <big id="jfnnt"></big>

            很快微信開發者平臺

             找回密碼
             注冊
            查看: 49886|回復: 497
            打印 上一主題 下一主題

            [Demo源碼] 微信背單詞類小程序,小雞單詞源碼下載,打卡微信小程序

              [復制鏈接]

            3

            主題

            4

            帖子

            999

            積分

            略知一二

            積分
            999
            跳轉到指定樓層
            樓主
             樓主| 發表于 2018-4-24 18:07:28 | 只看該作者 |只看大圖 回帖獎勵 |倒序瀏覽 |閱讀模式
            微信背單詞類小程序,小雞單詞源碼下載,微信小程序開發學習案例,小程序開發教程。一個用來背單詞每天打卡的微信小程序,還有詞匯測試,包含多種詞庫后臺由騰訊云wafer解決方案。



            前段時間開始學做微信小程序,花了半個月時間算是入門了

            個人感覺學習還是挺快的,寫了一個背單詞打開的小程序,大概十幾個頁面

            本文介紹的是實現每天背單詞任務的這一個主要頁面

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



            下面是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

            主題

            40

            帖子

            135

            積分

            新人求帶

            積分
            135
            沙發
            發表于 2018-4-24 22:32:03 | 只看該作者
            歡樂奪寶,開心生活
            回復

            使用道具 舉報

            0

            主題

            6

            帖子

            90

            積分

            等待驗證會員

            積分
            90
            板凳
            發表于 2018-4-24 23:15:09 | 只看該作者
            老哥穩啊,不錯
            回復

            使用道具 舉報

            2

            主題

            819

            帖子

            2萬

            積分

            S3

            積分
            22058
            地板
            發表于 2018-4-24 23:27:50 | 只看該作者
            微信背單詞類小程序,小雞單詞源碼下載,打卡微信小程序
            回復

            使用道具 舉報

            3

            主題

            101

            帖子

            2673

            積分

            專家路上

            積分
            2673
            5#
            發表于 2018-4-24 23:57:48 | 只看該作者
            這個東西很好
            回復

            使用道具 舉報

            0

            主題

            378

            帖子

            4597

            積分

            專家路上

            積分
            4597
            6#
            發表于 2018-4-25 08:52:22 | 只看該作者
            不錯的資源
            回復

            使用道具 舉報

            3

            主題

            148

            帖子

            1萬

            積分

            S2

            積分
            10739
            7#
            發表于 2018-4-25 09:08:18 | 只看該作者
            dsafsdgfsdgsdf
            回復

            使用道具 舉報

            0

            主題

            111

            帖子

            1017

            積分

            專家路上

            積分
            1017
            8#
            發表于 2018-4-25 10:37:13 | 只看該作者
            很不錯,學習哈
            回復

            使用道具 舉報

            0

            主題

            6

            帖子

            90

            積分

            新人求帶

            積分
            90
            9#
            發表于 2018-4-25 11:51:30 | 只看該作者
            謝謝分享不錯
            回復

            使用道具 舉報

            0

            主題

            15

            帖子

            280

            積分

            等待驗證會員

            積分
            280
            10#
            發表于 2018-4-25 15:56:13 | 只看該作者
            支持一下
            回復

            使用道具 舉報

            您需要登錄后才可以回帖 登錄 | 注冊

            本版積分規則

            QQ|Archiver|手機版|小黑屋|很快微信開發者平臺 ( 京ICP備2021022608號 )

            GMT+8, 2021-9-26 21:58 , Processed in 0.036030 second(s), 25 queries .

            Powered by Discuz! X3.4

            Copyright © 2001-2020, Tencent Cloud.

            快速回復 返回頂部 返回列表
            高潮白浆潮喷正在播放

            <rp id="jfnnt"><em id="jfnnt"><form id="jfnnt"></form></em></rp><video id="jfnnt"></video>

            <big id="jfnnt"><dl id="jfnnt"><video id="jfnnt"></video></dl></big>
            <nobr id="jfnnt"><pre id="jfnnt"></pre></nobr>
            <track id="jfnnt"></track>

                  <nobr id="jfnnt"></nobr>

                  <big id="jfnnt"></big>