HarmonyOS メタサービス開発実践: デスクトップカード辞書

1. プロジェクトの説明

1.DEMOのアイデアはカード辞書です。

2. カードによって表示される内容が異なります。マイクロカード、小カード、中カード、大カード。カードの特性に応じて、同じ単語の異なる内容が表示されます。ユーザーは自分の習慣に基づいて好きなカードを選択できます。

3. ユニバーサルカード更新: ユーザーはカード更新ボタンをクリックして新しいコンテンツを表示します。同時に、カードはスケジュールされた時間に更新されるように設定されており、ユーザーが毎日見るカードは新しいテキストであり、ユーザーが学習したり確認したりするのに便利です。

4. メタサービスには検索機能があり、ユーザーは、現在ユーザーが慣れている上下スライド方式と同様の方法で、単語ごとに詳細な説明を提供しながら、対応する単語と説明を検索できます。

5. API9とArkTS言語開発に基づいて、登録、ログインなどの機能がサーバーレスクラウドサービスを通じて実現されます。

2. メタサービス効果

1. ユニバーサルカード効果

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

2. メタサービス内部ページ

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

3. プロジェクト開発

1. 環境構築

ソフトウェア要件:

DevEco Studio バージョン: DevEco Studio 3.1 リリース以上。

HarmonyOS SDK バージョン: API バージョン 9 以上。

ハードウェア要件:

デバイスタイプ: DevEco Studio で実行されている Huawei 携帯電話または Huawei 携帯電話デバイスシミュレーター。

HarmonyOS システム: 3.1.0 開発者リリース以上。 2. 主なコード構造の解釈

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

entry/src/main/ets: ファイルエントリ

共通: パブリックリソースファイル

画像: 公開画像リソース

Constants.ts: パブリック定数

CountryViewModel.ts: 国番号クラス

LazyFE_Class.ets: 遅延データ読み込みクラス

Log.ts: ログクラス

コンポーネント: コンポーネントファイルをカプセル化する

データベース: データベースカプセル化クラス
data_cyhz.ets: データファイル

エントリー可能性: アプリケーション/サービスエントリー

エントリーフォーム: カードサービス

ページ: アプリケーション/サービスページ

Auth.ets: 認証と承認

CloudFunction.ets: クラウド関数

CloudProject.ets: クラウドプロジェクト

CloudStorage.ets: クラウドストレージ

Index.ets: ホームページ

User_Login.ets: ログインページ

User_SignUp.ets: 登録ページ

User_VerifyCodeLogin.ets: 検証コードログインページ

サービス: バックグラウンド操作クラス

ウィジェット: サービスカード

リソース: リソースファイルディレクトリ

3. アプリケーションの説明を入力します

クラウドテンプレートプロジェクトが作成されるので、SDK 依存関係を追加で構成する必要はありません。注意すべき唯一の点は、クラウドテンプレートの初期統合 SDK の場所が異なるため、アプリケーションの初期化フェーズでコンテキストを使用して SDK を初期化することです。これは、entryability の onCreate で行うことをお勧めします。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

4. ホームページ

異なるアプリケーションモジュールを切り替えるために、アプリケーションに下部メニューバーを追加する必要があります。各モジュールは完全に独立しており、切り替えるたびにインターフェイスを更新する必要がないため、Tabs および TabContent コンポーネントを使用します。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

このアプリケーションには、Home と My という 2 つのモジュールがあり、これらは Tabs コンポーネントの 2 つのサブコンポーネントである TabContent に対応しています。

ホームページには、テキスト検索とスライドブラウジング情報の 2 つのモジュールが含まれています。モジュール内の具体的なコード実装については、以下で説明します。

テキスト検索: 主にテキストを検索して対応するテキスト表示情報にジャンプするために検索コンポーネントを使用します。主なコードは次のとおりです。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

... //常用汉字搜索栏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 }) ......

ブラウジング情報モジュール: 主にスワイパーコンポーネントを使用し、データの遅延読み込み動作を通じてデータを事前キャッシュし、ページをスライドすることでテキスト情報を表示します。主なコードは次のとおりです。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

... //常用汉字轮播部分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. 私の

私のページには、訪問者ログインとユーザーログインの 2 つのモジュールが含まれています。

そのうち、訪問者がログインしたときにログイン情報と一部のアプリケーション機能は表示されず、一部のアプリケーション機能のみを使用できます。

ユーザーログインでは一部のユーザー情報が表示され、すべてのアプリケーション機能が拡張され、ユーザー登録とログインが必要になります。

具体的なコード実装については、以下のモジュールで説明します。

訪問者ログイン:

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

... //游客登陆状态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) } ...

ユーザーログイン:

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

... //已经登陆状态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) //选择项Column() { ... }.width('100%') .height("100%") .backgroundColor(0xF5F5F5) .justifyContent(FlexAlign.Start)

6. 登録ログインページ

ユーザーがアカウントを登録し、アプリケーションを完全に使用できるようにします。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

コアコード:

 ... .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() //验证码申请成功}).catch(error => { //验证码申请失败Prompt.showToast({ message: "请输入正确的手机号和密码" + JSON.stringify(error) }) }); }else { Prompt.showToast({ message: "手机号和密码不能为空" }) } }) ...... ...... .onClick(() => { if (this.phoneNumber !== '' && this.password !== '') { let user = new PhoneUserBuilder() .setCountryCode(this.countryCode) .setPhoneNumber(this.phoneNumber) .setPassword(this.password) //可以给用户设置初始密码。填写后后续可以用密码来登录.setVerifyCode(this.VerifyCode) .build(); agconnect.auth().createPhoneUser(user) .then(result => { // 创建用户成功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 => { // 创建用户失败Prompt.showToast({ message: "注册失败," + JSON.stringify(error),duration:4 }) }) } else { Prompt.showToast({ message: "手机号和密码不能为空" }) } })

7. その他のクラウドサービス

注: これはクラウドテンプレートの初期ビジネスです。他のビジネスニーズがある場合は、自分で追加できます。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

4. カード開発

必要に応じてカードを追加することも、最初にカードを作成して関連するカードパラメータを変更することもできます。 1. カードを作成する

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

2. 初期カード変更関連パラメータ

resources/base/profileディレクトリのform_config.jsonファイルを開き、必要に応じてパラメータを変更します。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

3. カードの読み込みとデータ取得

カードの読み込みと更新部分は、EntryFormAbility.ts ファイルによって完了します。操作については、こちらの公式ドキュメントを参照してください。

バックグラウンドデータ部分への接続がないため、ここではカスタムシミュレーションデータを使用し、カードがデスクトップにマウントされるたびにカードの内容をランダムに選択します。コードは次のとおりです。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

... 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. カードメインコード

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

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

V. プロジェクトの運営

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

VI. 結論

関心のある開発者は、Meta Service の公式 Web サイトにアクセスして、Meta Service とユニバーサルカードの詳細を確認してください。 Huawei 携帯電話のネガティブファーストスクリーンと Huawei App Market のメタサービスエリアでは、本記事の著者とチームが立ち上げ、運営しているメタサービス「イディオムムード」を体験することもできます。ユニバーサルカードを使用して、気分に合わせてイディオムを閲覧してください。

HarmonyOS メタサービス開発の実践: デスクトップカード辞書 - オープンソース基本ソフトウェアコミュニティ

<<:

>>: 韓国のLK-99の作者が新しいビデオを公開し、サンプルは25度の室温で吊り下げられ、一部のネットユーザーは磁化率を推定した。