日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當前位置:首頁 > 科技  > 軟件

分享元服務「心情盲盒」開發經歷

來源: 責編: 時間:2024-01-08 09:18:11 230觀看
導讀想了解更多關于開源的內容,請訪問:51CTO 鴻蒙開發者社區https://ost.51cto.com前言這次的端云一體化活動同樣是開發鴻蒙應用或者元服務,上次的端云一體化活動,我也參加了,當時簡單入手,在原有模板的基礎上開發了一個元服務,

n6s28資訊網——每日最新資訊28at.com

想了解更多關于開源的內容,請訪問:n6s28資訊網——每日最新資訊28at.com

51CTO 鴻蒙開發者社區n6s28資訊網——每日最新資訊28at.com

https://ost.51cto.comn6s28資訊網——每日最新資訊28at.com

前言

這次的端云一體化活動同樣是開發鴻蒙應用或者元服務,上次的端云一體化活動,我也參加了,當時簡單入手,在原有模板的基礎上開發了一個元服務,那個完全不算一個正常的項目,充其量只能稱呼為一個測試DEMO。通過那個DEMO,我熟悉了端云一體化開發的步驟,工具的用法,服務卡片的開發和交互也都熟悉了。但當時受限于個人的技術水平,沒能開發一個像樣的元服務提交發布,但當時有了一個簡單的構思,暢想了一下自己會做一個什么樣的元服務,當時構思的項目是“快遞盲盒”,這個快遞裝載著陌生朋友的心情,所以叫它盲盒。礙于當時個人對端云一體化的云端還不夠熟悉,手邊也沒有支持API9的真機可以調試,所以當時研究了幾天,感覺無望,毅然放棄了。時隔了小半年的時間,通過不斷的學習官網的文檔和別人的帖子,發現在自己項目中集成serverless云服務真是并不復雜,一旦搞懂,就所向披靡了,感覺開發的道路豁然開朗,有任何想法都可以去試試手了。這次,為了圓夢,我就把上次那個想法開發出來了,做成了一個元服務,并成功上架了。這個元服務就是“心情盲盒”,使用的人不多,可能使用價值和受歡迎程度都還不夠,不要緊,這次的經歷,堅定了我克服困難勇往直前的信念,也大大提高了自己遇到問題時分析問題和解決問題的能力。n6s28資訊網——每日最新資訊28at.com

簡介

“心情盲盒”這款元服務,主要包含兩個模塊,服務卡片和應用主頁面。n6s28資訊網——每日最新資訊28at.com

服務卡片查看隨機抽取的陌生人的心情寄語,用戶點擊卡片盒子邊緣空白處,可以改變盒子的顏色,點擊盒子會觸發盒子旋轉,同時獲取別人的心情,心情分為喜怒哀樂四種,分別以不同的表情圖像顯示,圖像下會顯示對方的手機號末尾4位數字,卡片中間顯示心情詳情,下方是功能操作按鈕,可以繼續獲取,或者發布一個心情。n6s28資訊網——每日最新資訊28at.com

應用主頁面中,用戶可以輸入自己的心里話,并選擇此刻的心情,然后發布。n6s28資訊網——每日最新資訊28at.com

因為這個元服務的業務功能定義為盲盒,所以查看者和發布者都是匿名的。盲盒信息是每日自動更新的,因為每個人每天都會有新的心情,所以服務端只保存了當天的心情數據,昨天和之前的會被服務器自動刪除,到了明天今天的心情數據也會消失。n6s28資訊網——每日最新資訊28at.com

本篇文檔簡單介紹一下心情盲盒的功能和實現過程。n6s28資訊網——每日最新資訊28at.com

預覽

n6s28資訊網——每日最新資訊28at.com

功能介紹

盒子顏色可以隨機改變,點擊服務卡片中盒子外的部分,盒子顏色和背景底色都會跟隨改變。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

點擊盒子,觸發盒子旋轉動畫,同時跳轉到新的界面。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

獲取到心情數據后,會直接顯示心情信息。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

上方的人臉表情是代表喜怒哀樂心情的,看上面這樣子好像是有些不高興,下方的小數字代表發布者手機號尾部4位,說明這句心里話是尾號6236的朋友發布的。中間的黑色文字就是對方說的話。點擊“再換個人”,會重新返回盲盒界面,同時顏色隨機改變,再點擊盲盒,又會繼續獲取新的心情信息。不論你登錄與否,都可以查看別人的心情,但要想發表自己的心情,就需要通過手機號進行注冊一下了。n6s28資訊網——每日最新資訊28at.com

有時,也可能你是當天第一個查看盲盒的人,沒有新數據就會顯示如下界面,此時,你可以發表一個心情,作為首發哦。或者刷新一下,看看是不是因為網絡不太好的原因沒獲取到數據。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

點擊發表之后,會出現如下的發表界面。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

在我想說中,輸入自己想說的心里話,在心情一欄,選擇自己此刻的比較接近的心情,然后點擊“發布盲盒”就可以了。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

發布成功后,會提示發布成功,用戶可以選擇“再發一個”繼續發表心情,或者“以后再說”關閉發表界面。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

如果用戶首次使用,沒有登錄,會提示如下界面,讓用戶進行登錄。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

勾選底部的“閱讀并同意”的方框,就可以進行登錄操作了。n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

其他玩法

基于鴻蒙系統對卡片支持的多功能性,我們可以添加多個心情盲盒服務卡片,構成一個卡片墻,或者把多個心情盲盒堆疊在一起。n6s28資訊網——每日最新資訊28at.com

盲盒墻效果:n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

盲盒堆疊效果:n6s28資訊網——每日最新資訊28at.com

n6s28資訊網——每日最新資訊28at.com

代碼實現

服務卡片通過message類型的action通知EntryFormAbility獲取新數據。n6s28資訊網——每日最新資訊28at.com

async getMood() {  postCardAction(this, {    'action': 'message',    'params': {    }  });}

EntryFormAbility在onFormEvent中處理message類型消息,并讀取云數據庫。n6s28資訊網——每日最新資訊28at.com

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) {    }  }

然后將結果反饋給服務卡片。n6s28資訊網——每日最新資訊28at.com

// 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));      })

用戶發布心情數據,直接更新云數據庫。n6s28資訊網——每日最新資訊28at.com

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  });

用戶登錄的實現。n6s28資訊網——每日最新資訊28at.com

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'))    }  }}

用戶登出的實現。n6s28資訊網——每日最新資訊28at.com

async logout() {  cloud.auth().signOut().then(() => {    this.isShowButton = true    this.currentUser = null  }).catch((error: Object) => {  });}

用戶注銷的實現。n6s28資訊網——每日最新資訊28at.com

deleteUser() {  cloud.auth().deleteUser().then(() => {    this.isShowButton = true    this.currentUser = null  }).catch((err: Object) => {  })}

總結

通過這次實踐,熟悉了端云一體化新模板的功能,也熟悉了云數據庫、云函數和用戶認證的用法,為以后開發其他項目打了一個基礎。n6s28資訊網——每日最新資訊28at.com

想了解更多關于開源的內容,請訪問:n6s28資訊網——每日最新資訊28at.com

51CTO 鴻蒙開發者社區n6s28資訊網——每日最新資訊28at.com

https://ost.51cto.comn6s28資訊網——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-57938-0.html分享元服務「心情盲盒」開發經歷

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: 五個用于前端的Python庫

下一篇: 還得是騰訊,撈了我一把!

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 龙里县| 成武县| 德保县| 积石山| 浦县| 洪江市| 延庆县| 上栗县| 德清县| 缙云县| 湛江市| 双桥区| 军事| 娄烦县| 资阳市| 饶河县| 南溪县| 黄大仙区| 锦屏县| 霍山县| 凭祥市| 东城区| 锦屏县| 海淀区| 建阳市| 大关县| 宁武县| 顺昌县| 白玉县| 肃北| 达孜县| 江永县| 电白县| 万盛区| 乌海市| 杭锦后旗| 银川市| 苏尼特右旗| 黄冈市| 巴青县| 柳林县|