7月安卓手機性能榜：紅魔8S Pro再奪榜首
7月份的手機市場風平浪靜，除了紅魔和努比亞帶來了兩款搭載驍龍8Gen2領先版處理器的新機之外，別的也想不到有什么新品了，這也正常，通常6月7月都是手機廠商修整的時間，進入8月份之
想了解更多關于開源的內容，請訪問：
51CTO 鴻蒙開發者社區
https://ost.51cto.com
這次的端云一體化活動同樣是開發鴻蒙應用或者元服務，上次的端云一體化活動，我也參加了，當時簡單入手，在原有模板的基礎上開發了一個元服務，那個完全不算一個正常的項目，充其量只能稱呼為一個測試DEMO。通過那個DEMO，我熟悉了端云一體化開發的步驟，工具的用法，服務卡片的開發和交互也都熟悉了。但當時受限于個人的技術水平，沒能開發一個像樣的元服務提交發布，但當時有了一個簡單的構思，暢想了一下自己會做一個什么樣的元服務，當時構思的項目是“快遞盲盒”，這個快遞裝載著陌生朋友的心情，所以叫它盲盒。礙于當時個人對端云一體化的云端還不夠熟悉，手邊也沒有支持API9的真機可以調試，所以當時研究了幾天，感覺無望，毅然放棄了。時隔了小半年的時間，通過不斷的學習官網的文檔和別人的帖子，發現在自己項目中集成serverless云服務真是并不復雜，一旦搞懂，就所向披靡了，感覺開發的道路豁然開朗，有任何想法都可以去試試手了。這次，為了圓夢，我就把上次那個想法開發出來了，做成了一個元服務，并成功上架了。這個元服務就是“心情盲盒”，使用的人不多，可能使用價值和受歡迎程度都還不夠，不要緊，這次的經歷，堅定了我克服困難勇往直前的信念，也大大提高了自己遇到問題時分析問題和解決問題的能力。
“心情盲盒”這款元服務，主要包含兩個模塊，服務卡片和應用主頁面。
服務卡片查看隨機抽取的陌生人的心情寄語，用戶點擊卡片盒子邊緣空白處，可以改變盒子的顏色，點擊盒子會觸發盒子旋轉，同時獲取別人的心情，心情分為喜怒哀樂四種，分別以不同的表情圖像顯示，圖像下會顯示對方的手機號末尾4位數字，卡片中間顯示心情詳情，下方是功能操作按鈕，可以繼續獲取，或者發布一個心情。
應用主頁面中，用戶可以輸入自己的心里話，并選擇此刻的心情，然后發布。
因為這個元服務的業務功能定義為盲盒，所以查看者和發布者都是匿名的。盲盒信息是每日自動更新的，因為每個人每天都會有新的心情，所以服務端只保存了當天的心情數據，昨天和之前的會被服務器自動刪除，到了明天今天的心情數據也會消失。
本篇文檔簡單介紹一下心情盲盒的功能和實現過程。
盒子顏色可以隨機改變，點擊服務卡片中盒子外的部分，盒子顏色和背景底色都會跟隨改變。
點擊盒子，觸發盒子旋轉動畫，同時跳轉到新的界面。
獲取到心情數據后，會直接顯示心情信息。
上方的人臉表情是代表喜怒哀樂心情的，看上面這樣子好像是有些不高興，下方的小數字代表發布者手機號尾部4位，說明這句心里話是尾號6236的朋友發布的。中間的黑色文字就是對方說的話。點擊“再換個人”，會重新返回盲盒界面，同時顏色隨機改變，再點擊盲盒，又會繼續獲取新的心情信息。不論你登錄與否，都可以查看別人的心情，但要想發表自己的心情，就需要通過手機號進行注冊一下了。
有時，也可能你是當天第一個查看盲盒的人，沒有新數據就會顯示如下界面，此時，你可以發表一個心情，作為首發哦。或者刷新一下，看看是不是因為網絡不太好的原因沒獲取到數據。
點擊發表之后，會出現如下的發表界面。
在我想說中，輸入自己想說的心里話，在心情一欄，選擇自己此刻的比較接近的心情，然后點擊“發布盲盒”就可以了。
發布成功后，會提示發布成功，用戶可以選擇“再發一個”繼續發表心情，或者“以后再說”關閉發表界面。
如果用戶首次使用，沒有登錄，會提示如下界面，讓用戶進行登錄。
勾選底部的“閱讀并同意”的方框，就可以進行登錄操作了。
基于鴻蒙系統對卡片支持的多功能性，我們可以添加多個心情盲盒服務卡片，構成一個卡片墻，或者把多個心情盲盒堆疊在一起。
盲盒墻效果：
盲盒堆疊效果：
服務卡片通過message類型的action通知EntryFormAbility獲取新數據。
async getMood() { postCardAction(this, { 'action': 'message', 'params': { } });}EntryFormAbility在onFormEvent中處理message類型消息，并讀取云數據庫。
async onFormEvent(formId, message) { // Called when a specified message event defined by the form provider is triggered. initialize(this.context, json); try { const context = this.context const value = await context.resourceManager.getRawFileContent('schema.json'); let json: string = buffer.from(value).toString("utf8"); let objectTypeInfo: ObjectTypeInfo = JSON.parse(json); ... let agcDataBase = cloud.database({ objectTypeInfo: objectTypeInfo, zoneName: "MessageDB" }) const resultArray = await (agcDataBase as Database) .collection(Message) .query() .equalTo('insertDate', curDate) .orderByDesc("id") .limit(100, 0) .get(); ... } catch (err) { } }然后將結果反饋給服務卡片。
// updateform let formData = { 'user': msg.getUser(), 'content': msg.getContent(), 'mood': moodIdx, }; let formInfo = formBindingData.createFormBindingData(formData) formProvider.updateForm(formId, formInfo).then((data) => { console.info('FormAbility updateForm success.' + JSON.stringify(data)); }).catch((error) => { console.error('FormAbility updateForm failed: ' + JSON.stringify(error)); })用戶發布心情數據，直接更新云數據庫。
const value = await context.resourceManager.getRawFileContent('schema.json');let json: string = buffer.from(value).toString("utf8");let schema: ObjectTypeInfo = JSON.parse(json);const record = await cloud.database({ objectTypeInfo: schema, zoneName: "MessageDB" }) .collection(Message) .upsert({ "user": phone, "content": content, "mood": mood, "insertDate": curDate });用戶登錄的實現。
Login({ modes: [AuthMode.PHONE_VERIFY_CODE], onSuccess: async (user: AuthUser) => { // this.shownPartIndex = 2; this.isShowButton = false AppStorage.Set<AuthUser>('user', user); this.currentUser = AppStorage.Get<AuthUser>('user'); if (this.currentUser != null && this.currentUser != undefined) { let agcUserExtra = await this.currentUser.getUserExtra(); this.creatTime = agcUserExtra.getCreateTime() this.lastLogin = agcUserExtra.getLastSignInTime() router.replaceUrl({ url: 'pages/Home' }) } }}) { if (this.isShowButton && this.isAccept) { Button({ type: ButtonType.Normal }) { Text($r('app.string.auth_service_login_button_text')) .fontColor($r('app.color.white')) } }}用戶登出的實現。
async logout() { cloud.auth().signOut().then(() => { this.isShowButton = true this.currentUser = null }).catch((error: Object) => { });}用戶注銷的實現。
deleteUser() { cloud.auth().deleteUser().then(() => { this.isShowButton = true this.currentUser = null }).catch((err: Object) => { })}通過這次實踐，熟悉了端云一體化新模板的功能，也熟悉了云數據庫、云函數和用戶認證的用法，為以后開發其他項目打了一個基礎。
想了解更多關于開源的內容，請訪問：
51CTO 鴻蒙開發者社區
https://ost.51cto.com
本文鏈接：http://www.www897cc.com/showinfo-26-57938-0.html分享元服務「心情盲盒」開發經歷
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： 五個用于前端的Python庫
下一篇： 還得是騰訊，撈了我一把！
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號