• 完成學習前面章節的微信小程序開發必備的基礎知識，從本章開始就可以進入完整的應用開發了。很多大型的應用主要通過App來實現，微信小程序的定義則主要是工具類的應用，宗旨是做到即用即走。抽簽應用完全符合這一特性，所以本章將實現一個抽簽類型的小程序。

本章主要涉及的知識點有：

• UI組件的使用
• 表單的使用
• 本地存儲

1.項目起步

本節開始設計抽簽項目所需要包含的功能。在平時遇到難以決定的事情時，可以使用小程序進行抽簽。該抽簽應用包括以下功能。

• 增加抽簽項及其內容項
• 刪除抽簽項及其內容項
• 抽簽
• 本地存儲
• 輸入校驗
• 用戶交互提示

接下來新建一個項目draw作為本章的項目。導入UI框架iView，并在根目錄新建文件夾images。項目中所需要用到的圖片可以直接從示例代碼中獲取。目錄如圖所示。

將app.js清空，刪除index和logs頁面，新建home、mine、edit-item、draw-view頁面，最后在app.json、app.wxss中輸入以下代碼：

// app.json ·.. "tabBar":{ "selectedColor":"#2C8BEF""list": [ { "selectedIconPath":"images/home2.png","iconPath":"images/home.png","pagePath":"pages/home/home","text":"首頁"}，{ "selectedIconPath":"images/mine2.png","iconPath":"images/mine.png","pagePath":"pages/mine/mine","text":"我的" }] }， ·..// app.wxss page { background-color: #EFEFEF;

運行效果如圖所示。

【代碼解析】一個帶底部導航欄的首頁已經完成。導航欄的內容主要是通過tabBar參數來實現的。

注意:應把app.json中的v2刪除，否則UI框架可能會運行出錯。

2.項目開發

準備工作完成后，正式進入編碼階段。

2.1首頁開發

打開home頁面，輸入以下代碼：

// home.json"navigationBarTitleText":"首頁""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">添加選項</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="刪除確認" visible="{{ visible }}" actions="{{ actions }}" bind:click="realDelete"> <view>刪除后無法恢復哦</view></i-modal>// home.js // pages/home/home.js Page({ data:{ listData:[], currentItem:'' actions: [{ name:'取消'}，name:'刪除'， color:'#ed3f14', loading:false} ]， visible:false}， onShow: function () { this.setData({ listData:wx.getStorageSync('homeList')})}， //加選項 addItem() { wx.navigateTo({ url:'../edit-item/edit-item',}， //進入抽簽頁 draw(e){ wx.navigateTo({ url:'../draw-view/draw-view?item='+ e.currentTarget.dataset.item}， //刪除子選項彈窗 delete(e){ console.log(e) this.setData({ visible: true, currentItem: e.currentTarget.dataset.item});// 刪除子選項 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:'刪除成功'， 1)this.setData({ visible: false !({ })

【代碼解析】首先在home.json中導入需要用到的UI組件。在頁面結構上，頂部是一個添加選項按鈕，并通過wxfor來顯示選項，最后的i-modal是彈窗組件，通過visible控制。在頁面跳轉方面，edit-item是添加選項頁，draw-view是抽簽頁。刪除功能通過覆蓋homeList的選項來實現，刪除成功后，要循環刪除子選項。

2.2新增頁面開發

由于還沒有開發添加選項頁，因此放效果圖之前需要先開發一個添加選項頁面。在edit-item頁面中輸入以下代碼：

// edit-item.json{ "navigationBarTitleText":"選項"，"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="請輸入選項" bind:change="changeItem"/></i-panel><i-button bind:click="submit" type="primary">提交</i-button>// edit-item.js // pages/edit-item/edit-item.js Page({ data:{ title:'添加選項'， saveKey:'homeList', itemName:''}， onLoad:function (options){ if (options.item){ this.setData({ title:'添加"'+options.item+'"的子選項'， saveKey:options.item})} }， changeItem(e){ this.setData({ itemName: e.detail.detail.value}) }， // 提交 submit() { if (this.data.itemName.length===0) { wx.showToast({ title:'內容過短'， icon:'none'}) } else if (this.data.itemName.length >10){ wx.showToast({ title:'內容過長'， 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:'已存在'， icon:'none'}) returni} }else { items = []; items.push(this.data.itemName); wx.setStorageSync(key,items); wx.showToast({ title:'保存成功'，}) setTimeout(() => { wx.navigateBack()}，1000)}})

添加選項頁的運行效果如圖一所示。

【代碼解析】新增選項頁面之后需要與新增子選項復用，所以我們編寫代碼的時候要兼顧兩者。同樣先在JSON文件中導入用到的UI組件。表單上只有一個input需要輸入，提交的時候判斷是否為空、是否過長即可。如果是首頁選項，就保存在homeList中，子選項則以首頁選項的名字為key保存。添加完成后，首頁如下下圖所示。

【添加選項頁】

【首頁效果】

2.3　抽簽頁面開發

現在首頁已經有了選項，并且可以通過新增頁來增加。此時可以開發抽簽頁，列出子選項，用于抽簽。打開draw-view頁面，輸入以下代碼：

// draw-view.json"navigationBarTitleText":"抽簽"，"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">添加子選項</i-button><i-button type="success" bind:click="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="刪除確認"visible="{{ visible }}" actions="{{ actions }}" bind:click="realDelete"> <view>刪除后無法恢復哦</view></i-modal>// draw-view.js //pages/draw-view/draw-view.js Page({ data:{ listData:[]， lastItem:'' currentItem:'', actions:[{ name:'取消'}， name:'刪除'， color:'#ed3f14', loading:false} ]， visible:false}， onLoad:function(options){ this.setData({ lastItem: options.itemwx.setNavigationBarTitle({ title: options.item,})}， onShow:function() { this.setData({ listData:wx.getStorageSync(this.data.lastItem)})}， //添加子選項 addItem() { wx.navigateTo({ url:'../edit-item/edit-item?item='+ this.data.lastitem })}， // 抽簽 draw(){ if (this.data.listData.length == 0) { wx.showToast({ title:'沒有數據'， icon:'none'}) } else { const randomNumber=this.getRandomNumber(0, this.data.listData.length); wx.showToast({ title:this.data.listData[randomNumber]})}， // 獲取隨機數 getRandomNumber(begin,end){ return Math.floor(Math.random() * (end-begin))+ beging}， // 刪除子選項彈窗 delete(e){ this.setData({ visible: true, currentItem: e.currentTarget.dataset.item }); }， // 刪除子選項 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:'刪除成功'，})} this.setData({ visible:false});} })

添加子選項后，點擊“抽簽”按鈕，運行效果如圖所示。

【代碼解析】進入頁面后，會根據上一個頁面傳入的選項名來獲取存儲的子選項數據。點擊“抽簽”按鈕，會通過隨機數從現有子選項中抽取一個進行彈窗顯示。添加、刪除子選項功能與首頁的基本相同。

2.4　我的頁面開發

通過前面3個頁面的開發，主要的抽簽流程已經走通了。為了完善這個應用，補充“我的”頁面，增加清空、微信登錄功能。打開mine頁面，輸入以下代碼：

// mine.json{ "navigationBarTitleText":"我的"， "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">用戶名:張三</view> --></i-card> </view><view class="view-margin"><i-cell-group><i-cell title="清空數據" bindtap="clearData" is-link></i-cell><i-cell title="意見反饋" bindtap="callBack" is-link></i-cell></i-cell-group></view><i-button wx:if="{{userInfo.nickName=='未登錄'}}" type="primary" open-type="getUserInfo" bind:getuserinfo="login">登錄</i-button><i-button wx:if="{{userInfo.nickName!='未登錄'}}" type="error" bind:click="logout">退出登錄</i-button><i-modal title="清空確認" visible="{{ visible }}" bind:ok="delete" bind:cancel="cancel"> <view>清空后無法恢復哦</view></i-modal>// mine.wxss.view-margin{ margin-top:16px;}// mine.js Page({ data:{ userInfo:{ nickName:'未登錄'， country:'-', avatarUrl:'https://i.loli.net/2017/08/21/599a521472424.jpgvisible:falseonLoad(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:falsecancel() { 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:'登錄失敗'， icon:'none'}) } }， logout() { wx.removeStorageSync('userInfo'y this.setData({ userInfo:{ nickName:'未登錄'， country: '-', avatarUrl:"https://i.loli.net/2017/08/21/599a521472424.ipq } })}})

在“我的”頁面點擊“登錄”按鈕，會彈出權限申請框，點擊允許授予權限后即可登錄，運行效果如圖所示。

【代碼解析】清空數據通過循環homeList里的數據把所有數據移除掉。登錄功能在用戶，點擊允許按鈕后，從e.detail.userInfo取出用戶的頭像、昵稱等信息進行展示，并通過wxif控制“顯示登錄”或“退出登錄”按鈕。如果需要測試，可以點擊微信開發工具中的“清緩存→清除登錄狀態”，如圖所示。

3.小結

本章綜合運用前面學到的知識創建了一個易用的工具類應用。雖然該程序的基本功能已經齊全，但是仍有較大的改進空間。建議讀者自行添加編輯選項、改變排序等功能來作為練習。為了將各種知識分類展示，本章的內容僅使用了本地存儲，沒有設計網絡請求。下一章我們將做一個帶網絡請求的完整應用。

總結

以上是生活随笔為你收集整理的【微信小程序】项目实战—抽签应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。