Wechat back word class applet, chicken word source code download, wechat applet development study case, applet development tutorial. A WeChat applet used to memorize words and punch cards every day, as well as vocabulary tests, including a variety of thesaurus backend solutions provided by Tencent Cloud Wafer. 
Some time ago, I started learning to make WeChat mini-programs. It took half a month to get started.
Personally, I feel that learning is quite fast. I wrote a mini-program that opens by memorizing words, about a dozen pages
. This article introduces the task of memorizing words every day. The front-end code of this main page
is as follows: wx:if determines whether to display the unrecited word interface
<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>
The user clicks Don't know to enter the word detail interface
<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>
The following is the key point of the function of the js part of the code
when the user clicks (doesn't know)
, put the words that the user does not know back into the unrecited word queue, add one at the end of the queue, and add a today_task in the middle of the queue. push(this.data.counter)
today_task.splice(length / 2, 0, this.data.counter)
In this way, users will often see this word in the follow-up, and deepen their impression.
The specific code is as follows
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
})
},
When the user clicks next,
because there are two "next" buttons on the page, one is the button that the user clicks directly after the user already knows the word in the word memorization interface, and the
second is the button when the user does not know the button and enters the word detail interface. , so I marked
their id to determine whether the user remembered the order by 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()
}},
The user collects words and writes the words into the cache of the collection. In fact, if you use your own server, it is safer to write them into the database.
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: 'Saving success' })
},
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 () {
}
})
After the user completes the word task, click to take the word test
test(){
wx.navigateTo({
url: '../test/test',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
}
})
Code download address: WeChat applet chick word source code download
More WeChat applet development learning source code download
WeChat video education applet source code download, online education applet demo
Wechat applet left swipe deletion function implemented by movable-area and cover-view components
WeChat applet version F2, supports all the native functions of F2, various applet chart examples
WeChat applet calendar plugin function
WeChat applet address selector, swipe left and right to select, small program utility function
WeChat applet implements discuz forum, a small program development forum system
Download more WeChat applet development resources: WeChat applet development case reference