前言
最近基于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)!