HarmonyOS元服務開發(fā)實踐：桌面卡片字典
一、項目說明
1.DEMO創(chuàng)意為卡片字典。
2.不同卡片顯示不同內容：微卡、小卡、中卡、大卡，根據(jù)不同卡片特征顯示同一個字的不同內容，基于用戶習慣可選擇喜歡的卡片。
3.萬能卡片刷新：用戶點擊卡片刷新按鈕查看新內容，同時卡片設置了定時刷新，讓用戶每天看到的卡片都是新的文字，便于用戶學習和查閱。
4.元服務內具有搜索功能，用戶可以通過搜索查詢相應的字和解釋，采用了類似現(xiàn)在用戶習慣的上下滑動方式來進行逐字詳細闡述。
5.基于API9、ArkTS語言開發(fā)，通過serverless云服務實現(xiàn)注冊、登錄等功能。
二、元服務效果
1.萬能卡片效果
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
2.元服務內頁
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
三、項目開發(fā)
1.環(huán)境搭建
軟件要求：
DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。
HarmonyOS SDK版本：API version 9及以上版本。
硬件要求：
設備類型：華為手機或運行在DevEco Studio上的華為手機設備模擬器。
HarmonyOS系統(tǒng)：3.1.0 Developer Release及以上版本。2.主要代碼結構解讀
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
entry/src/main/ets: 文件入口
common：公共資源文件
images：公共圖片資源
Constants.ts：公共常量
CountryViewModel.ts：國家號碼類
LazyFE_Class.ets：懶數(shù)據(jù)加載類
Log.ts：日志類
components：封裝組件文件
database：數(shù)據(jù)庫封裝類
data_cyhz.ets：數(shù)據(jù)文件
entryability：應用/服務入口
entryformability：卡片服務
pages：應用/服務頁面
Auth.ets：認證授權
CloudFunction.ets：云函數(shù)
CloudProject.ets：云項目
CloudStorage.ets：云存儲
Index.ets：主頁
User_Login.ets：登錄頁
User_SignUp.ets：注冊頁
User_VerifyCodeLogin.ets：驗證碼登錄頁
services：后臺操作類
widget：服務卡片
resources：資源文件目錄
3.進入應用說明
由于創(chuàng)建的是云模板項目，所以無需額外配置SDK依賴，只需要注意的是，云模板的初始集成sdk位置不一樣，所以我們還是在應用初始化階段使用context初始化SDK，推薦在entryability的onCreate中進行。
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
4.首頁
我們需要給應用添加底部菜單欄，用于切換不同的應用模塊，由于各個模塊之間屬于完全獨立的情況，并且不需要每次切換都進行界面的刷新，所以我們用到了Tabs，TabContent組件。
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
本應用一共有首頁、我的兩個模塊，分別對應Tabs組件的兩個子組件TabContent。
首頁包含搜索文字和滑動瀏覽信息兩個模塊，具體代碼實現(xiàn)我們將在下邊分模塊進行說明。
搜索文字：主要用到Search組件，通過搜索文字來跳轉到相應的文字展示信息，主要代碼如下：
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
...
//常用漢字搜索欄
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ù)的懶加載行為，來預緩存數(shù)據(jù)，通過滑動頁面來展示文字信息，主要代碼如下：
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
...
//常用漢字輪播部分
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.我的
我的頁包含游客登陸、用戶登錄兩個模塊。
其中游客登陸不顯示登錄信息以及應用部分功能，僅能使用部分應用能力；
用戶登錄顯示用戶部分信息，并展開應用所有功能，需要用戶注冊登錄；
具體代碼實現(xiàn)我們將在下邊分模塊進行說明。
游客登錄：
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
...
//游客登陸狀態(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)
}
...用戶登錄：
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
...
//已經(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)
//選擇項
Column() {
...
}.width('100%')
.height("100%")
.backgroundColor(0xF5F5F5)
.justifyContent(FlexAlign.Start)6.注冊登錄頁
讓用戶進行賬號注冊，能夠完全使用應用。
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
核心代碼：
...
.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) //可以給用戶設置初始密碼。填寫后后續(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: "手機號和密碼不能為空" })
}
})7.其他云服務
說明：這是云模板初始業(yè)務，如有其他業(yè)務需求，可自行添加。
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
四、卡片開發(fā)
按需求添加卡片，也可以只用初始創(chuàng)建卡片，修改相關卡片參數(shù)即可。1.創(chuàng)建卡片
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
2.初始卡片修改相關參數(shù)
打開resources/base/profile目錄下的form_config.json文件，按需修改參數(shù)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
3.卡片加載與獲取數(shù)據(jù)
卡片加載更新部分由EntryFormAbility.ts文件完成，這里可參考官方文檔操作即可。
由于沒有連接到后臺數(shù)據(jù)部分，所以我們這里采用自定義模擬數(shù)據(jù)，然后在每次卡片掛載到桌面時，隨機選取卡片內容，代碼如下：
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
...
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元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
...
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,
}
});
})
...五、項目運行
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
六、結語
各位感興趣的開發(fā)者可以點擊進入元服務官網(wǎng)，詳細了解元服務、萬能卡片相關信息。大家還可以在華為手機的負一屏、華為應用市場元服務專區(qū)體驗本文作者及團隊已經(jīng)上架運營的元服務-成語心情，用萬能卡片按照自己的心情來刷刷成語吧。
HarmonyOS元服務開發(fā)實踐：桌面卡片字典-開源基礎軟件社區(qū)
