[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="primary" bind:click="addItem"> Add options </i-button>

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

<i-modal title=" Delete confirmation " visible="{
    { visible }}" actions="{
    { actions }}" bind:click="realDelete">
<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="{
    {title}}">
<i-input
value="{
    {itemName}!"
placeholder=" Please enter the option "
bind:change="changeItem"/></i-panel>

<i-button bind:click="submit" type="primary"> 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 "'+options.item+'" 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="primary" bind:click="addItem"> Add sub options </i-button><i-button type="success" bind:click="draw"> draw </i-button>

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

<i-modal title=" Delete confirmation "visible="{
    { visible }}" actions="{
    { actions }}"
bind:click="realDelete">
<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="view-margin">
<i-card
title="{
    {userInfo.nickName}}"
extra="{
    {userInfo.country}}"
thumb="{
    {userInfo.avatarUrl}}">
<!-- <view slot="content"> user name : Zhang San </view> --></i-card>
</view>

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

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

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

<i-modal
title=" Empty confirm "
visible="{
    { visible }}" bind:ok="delete"
bind:cancel="cancel">
<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:"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 .