前言
最近基于Harmony OS最新版本開發(fā)了一個作品，本文來詳細(xì)講解一下，如何我是如何開發(fā)這個作品的。以及如何使用OpenHarmony，基于ArkTS，API 9來開發(fā)一個屬于自己的元服務(wù)。
廢話不多說，我的作品名稱叫做Company Operate 公司運營，是一個根據(jù)會計公式來預(yù)測公司未來幾個月的資產(chǎn)運營情況。
主要分為三部分，
第一部分：填寫公司基本情況表單
第二部分：通過公司計算公司未來幾個月的運營情況，使用扇形圖，標(biāo)識公司資金組成部分。
第三部分：使用元服務(wù)卡片來顯示當(dāng)前月份的公司資金狀況。
具體動態(tài)效果圖如下：
卡片展示效果
使用到的組件有：Gauge，ForEach，TextInput，Radio，Flex，Text，Row，Column，Button。
下面開始講解開發(fā)過程。
開發(fā)過程
由于我們要開發(fā)的應(yīng)用是云服務(wù)，所有在IDE中創(chuàng)建項目時是按照下圖來選擇的：
參數(shù)解釋
- Compile SDK: 3.1.0 (API 9) 目前最新版本，具有很有優(yōu)秀的特性
- Model: Stage 目前有兩種模式，Stage是持續(xù)迭代穩(wěn)定的版本
- Enable Super Visual : disable。是否開始低代碼編輯模式
- Language: ArkTS 當(dāng)使用最新版本的時的SDK時，只能選擇ArkTS開發(fā)語言
- Compatible SDK: 3.1.0(API 9) 兼容SDK版本
- Devuce type: Phone Tablet 需要支持的設(shè)備，手機和平板
創(chuàng)建項目后，IDE會自動將我們的項目依賴包拉取到本地。
注意在IDE里講相關(guān)版本的SDK及套件下載到本地
打開 首頁文件， 打開右側(cè)的 預(yù)覽。
這樣就可以開始愉快地編寫了。
這里的預(yù)覽具有熱更新的功能，修改頁面后會自動更新頁面。
表單設(shè)計
由于我們不考慮國家化，所以直接使用表單直接使用中文，
像素單位使用虛擬像素，
虛擬像素(virtual pixel)是一臺設(shè)備針對應(yīng)用而言所具有的虛擬尺寸（區(qū)別于屏幕硬件本身的像素單位）。它提供了一種靈活的方式來適應(yīng)不同屏幕密度的顯示效果。使用虛擬像素，使元素在不同密度的設(shè)備上具有一致的視覺體量。
每行40vp，表單項的lable長度為80vp，輸入框為220vp。
每行間隔12vp，這項常量組成了我們表單的盒子模型。
定義表單的數(shù)據(jù)模型
@State formData: any = {
name: '111',
currentAssets: null,
nonCurrentAssets: null,
equityAccount: null,
currency: null,
unitPrice: null,
variableCosts: null,
quantity: null,
fixedCost: null,
month: 6
}
數(shù)據(jù)模型與輸入框綁定起來
TextInput().width(220).height(ROW_HEIGHT).onChange((value: string) => {
this.formData.name = value
})
與Counter組件綁定
Counter() { Text(this.formData.month.toString()) }
.onInc(() => {
this.formData.month++
})
.onDec(() => {
this.formData.month--
})
首頁的效果圖
不同于網(wǎng)頁的Vue應(yīng)用開發(fā)，數(shù)據(jù)模型與視圖并不是雙向綁定關(guān)系，開發(fā)者需要監(jiān)聽每個輸入框，單選按鈕的修改事件。修改事件的回調(diào)函數(shù)里給數(shù)據(jù)模型重新賦值。
組件公共屬性，事件介紹，盒子模型
基于ArkTS的組件，都有通用的一些屬性，如：width，height，padding，margin。這些通用通用屬性就組成了盒子模型 布局的基礎(chǔ)。 組件完整的通用屬性可以查閱此鏈接
除了通用屬性，所有的組件也有通用事件 如onClick，onTouch，onKeyEvent，onDragStart。
完整通用事件可以查閱此處
結(jié)果頁
在首頁輸入公司的運營數(shù)據(jù)后，點擊開始預(yù)測，就會進入結(jié)果頁。從首頁跳轉(zhuǎn)到結(jié)果頁時，會將所有的表單數(shù)據(jù)傳遞過去。
router.pushUrl({url:'pages/res', params: {...this.formData}})
在結(jié)果頁，在onPageShow生命周期中獲取從路由傳遞過的參數(shù)
onPageShow() {
const params = router.getParams(); // 獲取傳遞過來的參數(shù)對象
this.formData = params as any // 賦值給數(shù)據(jù)模型
console.log(JSON.stringify(this.formData), '1111')
}
通過計算傳過來的值，我們能夠得到一系列公司運營的數(shù)據(jù)。
并最終使用Text組件將其顯示到頁面上。
值的注意的是
Gauge組件和ForEach的使用。
Gauge組件的使用
Gauge({ value: 75 })
.value(25)
.width(100).height(100)
.colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1]])
colors 屬性中填寫所要顯示的元素，元素的顏色值和0-1的比例。
ForEach 的使用
ForEach(
arr: any[],
itemGenerator: (item: any, index?: number) => void,
keyGenerator?: (item: any, index?: number) => string
)
- ForEach必須在容器組件內(nèi)使用。
- 生成的子組件應(yīng)當(dāng)是允許包含在ForEach父容器組件中的子組件。
- 允許子組件生成器函數(shù)中包含if/else條件渲染，同時也允許ForEach包含在if/else條件渲染語句中。
- itemGenerator函數(shù)的調(diào)用順序不一定和數(shù)組中的數(shù)據(jù)項相同，在開發(fā)過程中不要假設(shè)
- itemGenerator和keyGenerator函數(shù)是否執(zhí)行及其執(zhí)行順序。例如，以下示例可能無法正確運行：
最終效果圖
遇到的問題
預(yù)覽無法出現(xiàn)滾動條，沒有下來
預(yù)覽模式下，當(dāng)內(nèi)容超過一屏?xí)r，無法自動出現(xiàn)滾動條，不知道這是一個特性，還是bug。還是說需要特殊處理才能出現(xiàn)滾動條，比如使用滾動條組件。
缺少折線圖
本來我想使用折線圖來表現(xiàn)公司資產(chǎn)運營資產(chǎn)趨勢，這也是普遍的做法。但是試了很多方法，都不太理想，使用canvas畫折線圖。缺少交互，標(biāo)注，或者坐標(biāo)軸的分割塊顯示不準(zhǔn)確?？傊壳耙胧褂谜劬€圖，是需要一些技術(shù)的?；蛟S也可以嘗試從svg下手，嘗試。
支持 API 9的設(shè)備太少
由于本應(yīng)用使用的是最新版的API 9，要想使用真機模擬。結(jié)果 遠(yuǎn)程設(shè)備只有一個支持API 9，并且狀態(tài)一直是 unavailable， 不可用狀態(tài)。汗那，總不能為了開發(fā)一個應(yīng)用，買一個Mate 50把。
文章來源：http://www.zghlxwxcb.cn/news/detail-789624.html
總結(jié)
總的來講，在開發(fā)云服務(wù)應(yīng)用時，鴻蒙提供的文檔還是很全的的，但是由于相對其他的成熟web技術(shù)，還是比較新的，所以生態(tài)還不算很完善。這也是可以理解的，生態(tài)還是要靠全體開發(fā)者來支持。文章來源地址http://www.zghlxwxcb.cn/news/detail-789624.html
到了這里，關(guān)于基于鴻蒙HarmonyOS 元服務(wù)開發(fā)一款公司運營應(yīng)用（ArkTS API 9）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
