一、項(xiàng)目說明
1.DEMO創(chuàng)意為卡片字典。
2.不同卡片顯示不同內(nèi)容：微卡、小卡、中卡、大卡，根據(jù)不同卡片特征顯示同一個(gè)字的不同內(nèi)容，基于用戶習(xí)慣可選擇喜歡的卡片。
3.萬能卡片刷新：用戶點(diǎn)擊卡片刷新按鈕查看新內(nèi)容，同時(shí)卡片設(shè)置了定時(shí)刷新，讓用戶每天看到的卡片都是新的文字，便于用戶學(xué)習(xí)和查閱。
4.元服務(wù)內(nèi)具有搜索功能，用戶可以通過搜索查詢相應(yīng)的字和解釋，采用了類似現(xiàn)在用戶習(xí)慣的上下滑動(dòng)方式來進(jìn)行逐字詳細(xì)闡述。
5.基于API9、ArkTS語言開發(fā)，通過serverless云服務(wù)實(shí)現(xiàn)注冊、登錄等功能。
二、元服務(wù)效果
1.萬能卡片效果

?

2.元服務(wù)內(nèi)頁
?

三、項(xiàng)目開發(fā)
1.環(huán)境搭建
軟件要求：
DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
HarmonyOS SDK版本：API version 9及以上版本。
硬件要求：
設(shè)備類型：華為手機(jī)或運(yùn)行在DevEco Studio上的華為手機(jī)設(shè)備模擬器。
HarmonyOS系統(tǒng)：3.1.0 Developer Release及以上版本。

2.主要代碼結(jié)構(gòu)解讀
?

entry/src/main/ets: 文件入口
common：公共資源文件
images：公共圖片資源
Constants.ts：公共常量
CountryViewModel.ts：國家號(hào)碼類
LazyFE_Class.ets：懶數(shù)據(jù)加載類
Log.ts：日志類

components：封裝組件文件

database：數(shù)據(jù)庫封裝類
data_cyhz.ets：數(shù)據(jù)文件

entryability：應(yīng)用/服務(wù)入口

entryformability：卡片服務(wù)

pages：應(yīng)用/服務(wù)頁面
Auth.ets：認(rèn)證授權(quán)
CloudFunction.ets：云函數(shù)
CloudProject.ets：云項(xiàng)目
CloudStorage.ets：云存儲(chǔ)
Index.ets：主頁
User_Login.ets：登錄頁
User_SignUp.ets：注冊頁
User_VerifyCodeLogin.ets：驗(yàn)證碼登錄頁

services：后臺(tái)操作類

widget：服務(wù)卡片

resources：資源文件目錄

3.進(jìn)入應(yīng)用說明
由于創(chuàng)建的是云模板項(xiàng)目，所以無需額外配置SDK依賴，只需要注意的是，云模板的初始集成sdk位置不一樣，所以我們還是在應(yīng)用初始化階段使用context初始化SDK，推薦在entryability的onCreate中進(jìn)行。
?

4.首頁
我們需要給應(yīng)用添加底部菜單欄，用于切換不同的應(yīng)用模塊，由于各個(gè)模塊之間屬于完全獨(dú)立的情況，并且不需要每次切換都進(jìn)行界面的刷新，所以我們用到了Tabs，TabContent組件。
?

本應(yīng)用一共有首頁、我的兩個(gè)模塊，分別對應(yīng)Tabs組件的兩個(gè)子組件TabContent。

首頁包含搜索文字和滑動(dòng)瀏覽信息兩個(gè)模塊，具體代碼實(shí)現(xiàn)我們將在下邊分模塊進(jìn)行說明。

搜索文字：主要用到Search組件，通過搜索文字來跳轉(zhuǎn)到相應(yīng)的文字展示信息，主要代碼如下：

...
//常用漢字搜索欄
Column() {
  Search({ value: this.submitValue, placeholder: '漢字搜索', controller: this.search })
    .searchButton('搜索')
    .placeholderColor(Color.Grey)
    .textFont({ size: 14, weight: 400 })
    .margin({ left: 20, right: 20 })
    .onSubmit((value: string) => {
      this.submitValue = value
      for (let i = 0; i < wz.length; i++) {
        const element: any = wz[i];
        if (this.submitValue == element.zi) {
          this.swiperIndex = i
          this.submitValue = ''
        }
      }
    })
    .onChange((value: string) => {
      this.changeValue = value
    })
}.width("100%").margin({ top: 20, bottom: 20 })
......

瀏覽信息模塊：主要用到swiper組件，通過數(shù)據(jù)的懶加載行為，來預(yù)緩存數(shù)據(jù)，通過滑動(dòng)頁面來展示文字信息，主要代碼如下：

...

//常用漢字輪播部分
Column() {
  Swiper(this.swiperController) {
    LazyForEach(this.data_wz, (item: any) => {
      Column() {
        ...
      }.width("100%")
      .height("100%")
      .justifyContent(FlexAlign.Start)
      .alignItems(HorizontalAlign.Start)
    }, item => item)
  }
  .vertical(true)
  .cachedCount(2)
  .autoPlay(false)
  .indicator(false)
  .loop(false)
  .duration(400)
  .itemSpace(0)
  .curve(Curve.Linear)
  .cachedCount(3)
  .index(this.swiperIndex)
  .disableSwipe(this.disableSwipe)
  .onChange((index: number) => {
    console.info("swiper:" + index.toString())
    this.swiperIndex = index
  })
}.width("100%")

...

5.我的
我的頁包含游客登陸、用戶登錄兩個(gè)模塊。
其中游客登陸不顯示登錄信息以及應(yīng)用部分功能，僅能使用部分應(yīng)用能力；
用戶登錄顯示用戶部分信息，并展開應(yīng)用所有功能，需要用戶注冊登錄；
具體代碼實(shí)現(xiàn)我們將在下邊分模塊進(jìn)行說明。

游客登錄：

...

//游客登陸狀態(tài)
if (this.isVisitor) {
  //頭像信息
  Column() {
    Image($r('app.media.icon'))
      .width(90)
      .objectFit(ImageFit.Contain)
      .borderRadius(50)
    Text(this.isVisitor ? "游客_" : this.userName).fontSize(16).margin(20)
    Button(this.isLogin ? "退出" : "登錄", { type: ButtonType.Capsule })
      .fontSize(14)
      .width('120')
      .height('30')
      .backgroundColor(0xf48fb1)
      .onClick(() => {
        router.replaceUrl({
          url: "pages/User_Login"
        })
      })
  }
  .width('90%')
  .height('240')
  .borderRadius(12)
  .margin({ top: 20 })
  .backgroundColor(0xFFFFFF)
  .shadow({ radius: 12, color: 0xCECECE, offsetX: 4, offsetY: 6 })
  .justifyContent(FlexAlign.Center)
}

...

用戶登錄：

...

//已經(jīng)登陸狀態(tài)
  if (!this.isVisitor) {
    //頭像信息
    Column() {
...
      }
    .width('90%')
    .height('240')
    .borderRadius(12)
    .margin({ top: 20 })
    .backgroundColor(0xFFFFFF)
    .shadow({ radius: 12, color: 0xCECECE, offsetX: 4, offsetY: 6 })
    .justifyContent(FlexAlign.Center)

    //選擇項(xiàng)
    Column() {
      ...
}.width('100%')
.height("100%")
.backgroundColor(0xF5F5F5)
.justifyContent(FlexAlign.Start)

6.注冊登錄頁
讓用戶進(jìn)行賬號(hào)注冊，能夠完全使用應(yīng)用。
?

?

核心代碼：

...

.onClick(() => {
  if (this.phoneNumber !== '' && this.password !== '') {
    let verifyCodeSettings = new VerifyCodeSettingBuilder()
      .setAction(VerifyCodeAction.REGISTER_LOGIN)
      .setLang('zh_CN')
      .setSendInterval(60)
      .build();
    agconnect.auth().requestPhoneVerifyCode(this.countryCode, this.phoneNumber, verifyCodeSettings)
      .then(verifyCodeResult => {
        this.startTimer()
        //驗(yàn)證碼申請成功
      }).catch(error => {
      //驗(yàn)證碼申請失敗
      Prompt.showToast({ message: "請輸入正確的手機(jī)號(hào)和密碼" + JSON.stringify(error) })
    });
  }else {
    Prompt.showToast({ message: "手機(jī)號(hào)和密碼不能為空" })
  }
})

......
......

.onClick(() => {
  if (this.phoneNumber !== '' && this.password !== '') {
    let user = new PhoneUserBuilder()
      .setCountryCode(this.countryCode)
      .setPhoneNumber(this.phoneNumber)
      .setPassword(this.password) //可以給用戶設(shè)置初始密碼。填寫后后續(xù)可以用密碼來登錄
      .setVerifyCode(this.VerifyCode)
      .build();
    agconnect.auth().createPhoneUser(user)
      .then(result => {
        // 創(chuàng)建用戶成功
        AppStorage.Set('phoneNumber', user.phoneNumber)
        AppStorage.Set('password', user.password)
        AppStorage.Set('isVisitor', false)
        AppStorage.Set('isLogin', true)
        AppStorage.Set('userName', user.phoneNumber)
        router.pushUrl({
          url: "pages/Index"
        })
      })
      .catch(error => {
        // 創(chuàng)建用戶失敗
        Prompt.showToast({ message: "注冊失敗," + JSON.stringify(error),duration:4 })
      })
  } else {
    Prompt.showToast({ message: "手機(jī)號(hào)和密碼不能為空" })
  }
})

7.其他云服務(wù)
說明：這是云模板初始業(yè)務(wù)，如有其他業(yè)務(wù)需求，可自行添加。
?

四、卡片開發(fā)
按需求添加卡片，也可以只用初始創(chuàng)建卡片，修改相關(guān)卡片參數(shù)即可。

1.創(chuàng)建卡片
?

2.初始卡片修改相關(guān)參數(shù)
打開resources/base/profile目錄下的form_config.json文件，按需修改參數(shù)
?

3.卡片加載與獲取數(shù)據(jù)

卡片加載更新部分由EntryFormAbility.ts文件完成，這里可參考官方文檔操作即可。

由于沒有連接到后臺(tái)數(shù)據(jù)部分，所以我們這里采用自定義模擬數(shù)據(jù)，然后在每次卡片掛載到桌面時(shí)，隨機(jī)選取卡片內(nèi)容，代碼如下：
?

...
aboutToAppear() {
  let idx = Math.floor((Math.random() * wz_arr.length))
  this.zi = wz_arr[idx].zi
  this.pinYin = wz_arr[idx].pinYin
  this.buShou = wz_arr[idx].buShou
  this.biHua = wz_arr[idx].biHua
  this.fanTi = wz_arr[idx].fanTi
  this.near_words = wz_arr[idx].near_words
  this.reverse_words = wz_arr[idx].reverse_words
  this.explain = wz_arr[idx].explain.toString()
}

...

4.卡片主要代碼

...

Column() {
  //微卡
  Stack() {
    Text(this.zi)
      .width("100%")
      .textAlign(TextAlign.Center)
      .fontSize(30)
      .fontColor('#1f1f1f')
      .fontWeight(600)
      .margin({right:20})
    Row(){
      Image("/common/images/R2.png")
        .width(18)
        .height(18)
        .margin({right:"15%"})
        .objectRepeat(ImageRepeat.NoRepeat)
        .onClick(()=>{
          this.rotateAngle = 180
          this.aboutToAppear()
        })
        .rotate({ angle: this.rotateAngle })
        .animation({
          duration:300,
          curve: Curve.Linear,
          playMode: PlayMode.Normal
        })
    }.width("100%").justifyContent(FlexAlign.End)

  }
  .width("100%")
  .height(72)
  //小卡、中卡
  Flex({direction:FlexDirection.Column,wrap:FlexWrap.Wrap,justifyContent:FlexAlign.Start}){
    Column(){
      Text("拼音："+this.pinYin).fontSize(14).margin({left:15})
      Text("部首："+this.buShou).fontSize(14).margin({top:4,left:15})
      Text("筆畫："+this.biHua).fontSize(14).margin({top:4,left:15})
      Text("繁體："+this.fanTi).fontSize(14).margin({top:4,left:15})
    }.width(208)
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)

    Column(){
      Text("近義詞："+this.near_words).fontSize(12).margin({right:15})
      Text("反義詞："+this.reverse_words).fontSize(12).margin({top:4,right:15})
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Start)
  }
  .width("100%")
  .height(102)
  //大卡
  Column(){
    Text("解釋：").width("100%").textAlign(TextAlign.Start).fontSize(12).margin({left:15,right:15})
    Text(this.explain).fontSize(14).margin({top:4,left:15,right:15})
  }.width("100%")
  .height("100%")
  .justifyContent(FlexAlign.Start)
  .alignItems(HorizontalAlign.Start)
}
.width("100%")
.alignItems(HorizontalAlign.Center)
.backgroundImage("/common/images/cywz.jpg")
.backgroundImageSize(ImageSize.Cover)
.onClick(() => {
  postCardAction(this, {
    "action": this.ACTION_TYPE,
    "abilityName": this.ABILITY_NAME,
    "params": {
      "message": this.MESSAGE,
    }
  });
})

...

五、項(xiàng)目運(yùn)行
?

六、結(jié)語
各位感興趣的開發(fā)者可以點(diǎn)擊進(jìn)入元服務(wù)官網(wǎng)，詳細(xì)了解元服務(wù)、萬能卡片相關(guān)信息。大家還可以在華為手機(jī)的負(fù)一屏、華為應(yīng)用市場元服務(wù)專區(qū)體驗(yàn)本文作者及團(tuán)隊(duì)已經(jīng)上架運(yùn)營的元服務(wù)-成語心情，用萬能卡片按照自己的心情來刷刷成語吧。

文章來源地址http://www.zghlxwxcb.cn/news/detail-629514.html

到了這里，關(guān)于HarmonyOS元服務(wù)開發(fā)實(shí)踐：桌面卡片字典的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！