[wechat applet] project practice - lottery application

• Complete the necessary basic knowledge of wechat applet development in the previous chapter , From the beginning of this chapter, you can enter the complete application development . Many large applications are mainly through App To achieve , The definition of wechat applet is mainly the application of tools , The purpose is to use and go . The lottery application fully conforms to this feature , So this chapter will implement a lottery type applet .

The main knowledge points involved in this chapter are ：

• UI Use of components

• Use of forms

• The local store

1. The project starts

This section begins to design the functions that need to be included in the lottery project . When you encounter something difficult to decide , You can use an applet to draw lots . The lottery application includes the following functions .

• Add lottery items and content items

• Delete the lottery items and their content items

• draw

• The local store

• Input verification

• User interaction tips

Next, create a new project draw As the project of this chapter . Import UI frame iView, And create a new folder in the root directory images. The pictures needed in the project can be obtained directly from the sample code . The table of contents is shown in the figure .

take

app.js

Empty , Delete index and logs page , newly build

home、mine、edit-item、draw-view

page , Last in

app.json、app.wxss

Enter the following code in ：

// app.json
·..
"tabBar":{
"selectedColor":"#2C8BEF""list": [
{
"selectedIconPath":"images/home2.png","iconPath":"images/home.png","pagePath":"pages/home/home","text":" home page "},{
"selectedIconPath":"images/mine2.png","iconPath":"images/mine.png","pagePath":"pages/mine/mine","text":" my "
}]
},
·..

// app.wxss page {
background-color: #EFEFEF;


The operation effect is as shown in the figure .

【 Code parsing 】 A home page with a bottom navigation bar has been completed . The content of the navigation bar is mainly through tabBar Parameter to implement .

Be careful

: Should put app.json Medium v2 Delete , otherwise UI The framework may run incorrectly .

2. Project development

After the preparatory work , Officially enter the coding stage .

2.1 Homepage development

open home page , Enter the following code ：

// home.json

"navigationBarTitleText":" home page ""usingComponents":
{
"i-button":"/dist/button/index",
"i-cell-group":"/dist/cell-group/i ndex","i-cell":"/dist/cell/index",
 "i-modal":"/dist/modal/index"

}

// home.wxml
<i-button type=&quot;primary&quot; bind:click=&quot;addItem&quot;> Add options </i-button>

<i-cell-group><i-cell
wx:for=&quot;{{listData}}&quot; wx:for-item=&quot;item&quot; wx:key=&quot;item&quot;
data-item=&quot;{{item}}&quot; title=&quot;{{item}}&quot; bindtap=&quot;draw&quot;
bindlongpress=&quot;delete&quot; is-link></i-cell></i-cell-group>

<i-modal title=&quot; Delete confirmation &quot; visible=&quot;{{ visible }}&quot; actions=&quot;{{ actions }}&quot; bind:click=&quot;realDelete&quot;>
<view> Cannot recover after deletion </view></i-modal>

// home.js
// pages/home/home.js
Page({ data:{
listData:[],
currentItem:'' actions: [{
name:' Cancel '},

name:' Delete ',
color:'#ed3f14', loading:false}
],
visible:false},
onShow: function () { 
this.setData({
listData:wx.getStorageSync('homeList')})},
// Plus options  addItem() {
wx.navigateTo({
url:'../edit-item/edit-item',

},
// Enter the lottery page  draw(e){
wx.navigateTo({
url:'../draw-view/draw-view?item='+ e.currentTarget.dataset.item

},
// Delete sub option popup  delete(e){
console.log(e) this.setData({
visible: true,
currentItem: e.currentTarget.dataset.item});

//  Delete sub options
realDelete({detail}){
if (detail.index=== 1) {
var newArray=[];
for (const item of this.data.listData){
if (item!=this.data.currentItem){ newArray.push(item);
}
}
this.setData({
listData: newArray
1
wx.setStorageSync('homeList',this.data.listData)
wx.removeStoraqeSync(this.data.currentItem) wx.showToast({
title:' Delete successful ',
1)
 this.setData({
visible: false
!({
})


【 Code parsing 】 First, in the home.json Import the required UI Components . On the page structure , At the top is an add option button , And pass wxfor To display options , final i-modal Pop up window assembly , adopt visible control . In terms of page Jump ,edit-item Is to add an option page ,draw-view It's the lottery page . Delete the function by overwriting homeList Options to achieve , After deleting successfully , To cycle through sub options .

2.2 New page development

Because the option page has not been developed yet , Therefore, you need to develop an add options page before putting the renderings . stay edit-item Enter the following code in the page ：

// edit-item.json{
"navigationBarTitleText":" Options ","usingComponents":{
"i-panel":"/dist/panel/index","i-input":"/dist/input/index","i-button":"/dist/button/index"
/
// edit-item.wxml
<i-panel title=&quot;{{title}}&quot;>
<i-input
value=&quot;{{itemName}!&quot;
placeholder=&quot; Please enter the option &quot;
bind:change=&quot;changeItem&quot;/></i-panel>

<i-button bind:click=&quot;submit&quot; type=&quot;primary&quot;> Submit </i-button>

// edit-item.js
// pages/edit-item/edit-item.js Page({
data:{
title:' Add options ',
saveKey:'homeList', itemName:''
 },
onLoad:function (options){ if (options.item){ this.setData({
title:' add to &quot;'+options.item+'&quot; Sub options for ', saveKey:options.item})}
},
changeItem(e){ this.setData({
itemName: e.detail.detail.value})
},
//  Submit
submit() {
if (this.data.itemName.length===0) { wx.showToast({
title:' Content too short ', icon:'none'})
} else if (this.data.itemName.length >10){ wx.showToast({
title:' The content is too long ', icon:'none'})
}else {
var items;
var key= this.data.saveKey; if (wx.getStorageSync(key)) {
items=wx.getstorageSync(key); for (const key of items) {
if (key== this.data.itemName){ wx.showToast({ title:' Already exists ', icon:'none'})
returni

}
}else {
items = [];
items.push(this.data.itemName);
wx.setStorageSync(key,items); wx.showToast({
title:' Saved successfully ',})
setTimeout(() => {
wx.navigateBack()},1000)

}})


The operation effect of adding options page is shown in Figure 1 .

【 Code parsing 】 After the new option page is added, it needs to be reused with the new sub option , So when we write code, we should consider both . Also first in JSON File used for importing UI Components . There is only one on the form input Need to enter , Judge whether it is empty when submitting 、 Whether it is too long . If it is the homepage option , It's stored in homeList in , The sub option is named after the home page option key preservation . When I'm done , The home page is shown in the following figure .

【 Add an option page 】

【 Home page effect 】

2.3　 Lottery page development

Now there are options on the homepage , And you can add... By adding new pages . At this point, you can develop the lottery page , List sub options , For drawing lots . open draw-view page , Enter the following code ：

// draw-view.json

"navigationBarTitleText":" draw ","usingComponents":{
"i-button":"/dist/button/index"
"i-cell-group":"/dist/cell-group/index","i-cell":"/dist/cell/index","i-modal":"/dist/modal/index"

// draw-view.wxml
<i-button type=&quot;primary&quot; bind:click=&quot;addItem&quot;> Add sub options </i-button><i-button type=&quot;success&quot; bind:click=&quot;draw&quot;> draw </i-button>

<i-cell-group><i-cell
wx:for=&quot;{{listData}}&quot; wx:for-item=&quot;item&quot; wx:key=&quot;item&quot;
data-item=&quot;{{item}}&quot; title=&quot;{{item}}&quot;
bindlongpress=&quot;delete&quot;></i-cell></i-cell-group>

<i-modal title=&quot; Delete confirmation &quot;visible=&quot;{{ visible }}&quot; actions=&quot;{{ actions }}&quot;
bind:click=&quot;realDelete&quot;>
<view> Cannot recover after deletion </view></i-modal>

// draw-view.js
//pages/draw-view/draw-view.js Page({
data:{
listData:[], lastItem:''
currentItem:'', actions:[{
name:' Cancel '},
name:' Delete ',
color:'#ed3f14', loading:false}
],
visible:false},
onLoad:function(options){
this.setData({
lastItem: options.item

wx.setNavigationBarTitle({
title: options.item,})},
onShow:function() {
this.setData({
listData:wx.getStorageSync(this.data.lastItem)})},
// Add sub options  addItem() {
wx.navigateTo({
url:'../edit-item/edit-item?item='+ this.data.lastitem
})},
//  draw  draw(){
if (this.data.listData.length == 0) { wx.showToast({
title:' No data ', icon:'none'})
} else {
const randomNumber=this.getRandomNumber(0,
this.data.listData.length);
wx.showToast({
title:this.data.listData[randomNumber]})

},
//  Get random numbers
getRandomNumber(begin,end){
return Math.floor(Math.random() * (end-begin))+ beging},
//  Delete sub option popup  delete(e){
this.setData({
visible: true,
currentItem: e.currentTarget.dataset.item
});
},
//  Delete sub options
realDelete({detail}) {
if (detail.index=== 1) {
var newArray=[];
for (const item of this.data.listData){
if (item!= this.data.currentItem){
newArray.push(item);
)}
this.setData({
listData: newArray})
wx.setStorageSync(this.data.lastItem,this.data.listData); wx.showToast({
title:' Delete successful ',})}
this.setData({
visible:false});}
})


After adding sub options , Click on “ draw ” Button , The operation effect is as shown in the figure .

【 Code parsing 】 After entering the page , The stored sub option data will be obtained according to the option name passed in from the previous page . Click on “ draw ” Button , A random number will be selected from the existing sub options for pop-up display . add to 、 The function of deleting sub options is basically the same as that of the home page .

2.4　 My page development

Through the front 3 Development of pages , The main lottery process has been completed . In order to perfect this application , Add “ my ” page , Add emptying 、 Wechat login function . open mine page , Enter the following code ：

// mine.json{
"navigationBarTitleText":" my ",
"usingComponents":{
"i-card":"/dist/card/index"
"i-button":"/dist/button/index"
"i-cell-group":"/dist/cell-group/index""i-cell":"/dist/cell/index","i-modal":"/dist/modal/index"

// mine.wxml
<view class=&quot;view-margin&quot;>
<i-card
title=&quot;{{userInfo.nickName}}&quot;
extra=&quot;{{userInfo.country}}&quot;
thumb=&quot;{{userInfo.avatarUrl}}&quot;>
<!-- <view slot=&quot;content&quot;> user name : Zhang San </view> --></i-card>
</view>

<view class=&quot;view-margin&quot;><i-cell-group><i-cell
title=&quot; Empty data &quot;
bindtap=&quot;clearData&quot; is-link></i-cell><i-cell
title=&quot; Feedback &quot;
bindtap=&quot;callBack&quot; is-link></i-cell></i-cell-group></view>

<i-button
wx:if=&quot;{{userInfo.nickName==' Not logged in '}}&quot; type=&quot;primary&quot;
open-type=&quot;getUserInfo&quot;
bind:getuserinfo=&quot;login&quot;> Sign in </i-button>

<i-button
wx:if=&quot;{{userInfo.nickName!=' Not logged in '}}&quot; type=&quot;error&quot;
bind:click=&quot;logout&quot;> Log out </i-button>

<i-modal
title=&quot; Empty confirm &quot;
visible=&quot;{{ visible }}&quot; bind:ok=&quot;delete&quot;
bind:cancel=&quot;cancel&quot;>
<view> You cannot recover after emptying </view></i-modal>

// mine.wxss.view-margin{
margin-top:16px;}

// mine.js Page({
data:{
userInfo:{
nickName:' Not logged in ', country:'-',
avatarUrl:'https://i.loli.net/2017/08/21/599a521472424.jpg

visible:false

onLoad(options){
if (wx.getStorageSync('userInfo')){ this.setData({
userInfo: wx.getStorageSync('userInfo')
})
},
clearData(){
this.setData({ visible:true

},
delete() {
const array=wx.getstorageSync('homeList') for (const item of array) {
wx.removeStorageSync(item)}
wx.removeStorageSync('homeList') this.setData({ visible:false

cancel() {
this.setData({ visible:false})},
login(e){
if (e.detail.userInfo){
this.setData({
userInfo: e.detail.userInfo})
wx.setStorageSync('userInfo',e.detail.userInfo)} else {
wx.showToast({
title:' Login failed ', icon:'none'})
}
},
logout() {
wx.removeStorageSync('userInfo'y this.setData({
userInfo:{
nickName:' Not logged in ', country: '-',
avatarUrl:&quot;https://i.loli.net/2017/08/21/599a521472424.ipq
}
})}})


stay “ my ” Page hits “ Sign in ” Button , The permission application box will pop up , Click allow to grant permission to log in , The operation effect is as shown in the figure .

【 Code parsing 】 Clear the data through the loop homeList Remove all data from the data in . Login function in user , Click the allow button , from e.detail.userInfo Take out the user's Avatar 、 Display nicknames and other information , And pass wxif control “ Show login ” or “ Log out ” Button . If you need to test , You can click “ Clear cache → Clear login status ”, As shown in the figure .

3. Summary

This chapter comprehensively uses the previous knowledge to create an easy-to-use tool application . Although the basic functions of the program are complete , But there is still much room for improvement . Readers are advised to add editing options by themselves 、 Change sorting and other functions as an exercise . In order to classify and display all kinds of knowledge , The content of this chapter only uses local storage , No design network request . In the next chapter, we will make a complete application with network request .