?? 歡迎大家來到景天科技苑??

🎈🎈 養成好習慣，先贊后看哦~🎈🎈

🏆 作者簡介：景天科技苑
🏆《頭銜》：大廠架構師，華為云開發者社區專家博主，阿里云開發者社區專家博主，CSDN全棧領域優質創作者，掘金優秀博主，51CTO博客專家等。
🏆《博客》：Python全棧，前后端開發，小程序開發，人工智能，js逆向，App逆向，網絡系統安全，數據分析，Django，fastapi，flask等框架，linux，shell腳本等實操經驗，網站搭建，數據庫等分享。

所屬的專欄：微信小程序開發零基礎教學，難點與應用實戰總結
景天的主頁：景天科技苑

1.對話框

在開發微信小程序的時候，不可避免地會使用到彈窗提示，比如點擊刪除，彈窗提示：確定刪除嗎？ 之類的提示
還有一些消息對話框的提醒

1.1 模態對話框

wx.showModal
官方指導用法

在開發工具中，方法里面寫wx.showModal 會自動將方法里面的用法補齊
####js###

handleShowModel(){wx.showModal({title: '您確定要刪除嗎?',content: '這里是內容部分',//complete里面的參數.cancel是取消  .confirm是確定complete: (res) => {if (res.cancel) {console.log('用戶取消了')}if (res.confirm) {//正常來講，用戶點擊了確認會向后端發送請求，做一些操作，比如刪除等console.log('用戶確認了')}}})
}

###wxml###

<button type="primary" plain bind:tap="handleShowModel">點我彈出對話框</button>

當我們點擊按鈕，就會彈出窗口

看下控制臺打印的邏輯交互

1.2 消息對話框

wx.showToast
官方用法指導

###js###

handleShowTost(){wx.showToast({title: '恭喜您，秒殺成功~~',icon:'success',   //圖標duration:2000  //顯示多長時間，單位毫秒})
}

###wxml###

<button type="warn" plain bind:tap="handleShowTost">點我彈出消息框</button>

點擊按鈕

2.存儲

比如登錄成功–》后端返回token串【用戶登錄信息】—》把token存到小程序端–》后續發送請求，要攜帶token–》后端才能校驗通過—》小程序端本地如何存儲數據

####wxml####

<button type="default" plain bind:tap="handleSave">存儲數據</button>
<button type="primary" plain bind:tap="handleGet">獲取數據</button>
<button type="default" plain bind:tap="handleDelete">刪除數據</button>
<button type="primary" plain bind:tap="handleClear">清空數據</button>

保存數據分為同步保存和異步保存

//存儲數據

2.1 同步數據存儲操作

//###########同步###########
// 后期可以使用同步或異步--》感官身上差不多，但是寫法不一樣
// 同步保存，程序會感覺有點卡卡的，有點慢
handleSave() {wx.setStorageSync('name', 'jintian')wx.setStorageSync('age', 19)// 微信小程序，直接存對象即可---》最終它被轉成json格式字符串存到 本地存儲中wx.setStorageSync('wife', {name:'劉亦菲',age:'37',hobby:'高爾夫'})
},
//獲取數據
handleGet() {const name=wx.getStorageSync("name")const age=wx.getStorageSync("age")const wife=wx.getStorageSync("wife")console.log(name)console.log(age)console.log(wife)},//刪除數據
handleDelete() {// 清除微信緩存--刪除小程序--用代碼wx.removeStorageSync('wife')
},//清空數據
handleClear() {wx.clearStorageSync()
},

數據存在開發工具的Storage中，剛開始數據是空的

當我們點擊存儲數據，Storage中就有了我們設置的數據

當我們點擊刪除數據，wife被刪除

當我們點擊清空數據，所有數據被清空

2.2 異步數據存儲操作

異步，與同步比，就是方法中不帶Sync
#######異步###########

// 異步保存
handleSave() {// 如果不需要獲取返回值--》可以直接寫，不用寫成promis風格// 注意，異步存儲數據的時候，鍵值的字段名 必須是key和datawx.setStorage({key:'name',data:'lqz'})wx.setStorage({key:'boyfriend',data:{name:'彭于晏',age:67}})},// 異步獲取--》函數定義成 async  內部獲取的時候，前面寫 await
async handleGet() {const boyfriend=await wx.getStorage({key:'boyfriend'})console.log(boyfriend.data)
},
handleDelete() {wx.removeStorage({key:'name'})
},
handleClear() {wx.clearStorage()
}

點擊保存數據，其他都與同步的操作一樣