shenzuqiang/rabbit-harmony
shenzuqiang
/
rabbit-harmony
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dev: 

1、UniMp下载逻辑优化
2、UniMpManager管理加载类型
This commit is contained in:
shenzuqiang 2026-05-13 13:35:23 +08:00
parent 833f229bd4
commit e6a26c4c5f
12 changed files with 504 additions and 482 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
build-profile.json5
View File

@ -43,12 +43,12 @@
"arkOptions": {
"buildProfileFields": {
"CHANNEL": "harmony",
"BUILD_TIME": "2605120917"
"BUILD_TIME": "2605131158"
}
}
},
"output": {
"artifactName": "rabbit_harmony_debug_v1.0.0_2605120917"
"artifactName": "rabbit_harmony_debug_v1.0.0_2605131158"
}
}
],

2
common/BuildProfile.ets
View File

@ -6,7 +6,7 @@ export const BUILD_MODE_NAME = 'debug';
export const DEBUG = true;
export const TARGET_NAME = 'default';
export const CHANNEL = 'harmony';
export const BUILD_TIME = '2605120914';
export const BUILD_TIME = '2605131158';
/**
* BuildProfile Class is used only for compatibility purposes.

2
common/src/main/ets/dialog/GlobalDownloadingDialog.ets
View File

@ -2,7 +2,7 @@
export struct GlobalDownloadingDialog {
controller: CustomDialogController;
@State show: boolean = false;
@State progress: number = 0;
@Link progress: number;
build() {
Stack() {

51
common/src/main/ets/utils/UniMpManager.ets
View File

@ -3,7 +3,7 @@ import { AESDecrypt, PLATFORM, RELEASE_BASE_URL, Signature, TOKEN } from '../con
import { ToastUtils } from '../dialog/ToastUtils'
import { UniVersionEntity,TradeData, UniIconEntity } from '../viewmodel/DataBean'
import { downloadFile } from './DownloaderUtils'
import { isUniMpNeedDownload, isUniMpNeedDownloadForPath } from './KVManager'
import { isUniMpNeedDownload, isUniMpNeedDownloadForPath, setUniMpNeedDownload } from './KVManager'
import { KVStore } from './KVStore'
import { Logger } from './Logger'
import { bundleManager, common } from '@kit.AbilityKit'
@ -29,37 +29,37 @@ export function downStartUp(context: UIContext, entity: UniVersionEntity, callba
callback(1, 0)
//需要更新，则删除旧文件，重新下载wgt文件
if(!uniMpId){
ToastUtils.showToast(context, '加载失败，请重试或联系客服！')
ToastUtils.showToast(context, '加载失败，请重试或联系客服！');
callback(-1, 0)
callback(-1, 0);
return
}
//下载模拟器
downloadFile(getContext(), uniMpUrl??'', uniMpId + '.wgt', (status, progress, path) => {
if(status == 2){
callback(status, progress, path)
callback(status, progress, path);
//已下载完成，释放并启动
releaseRunUniMp(context, uniMpId??'', '', (status) => {
callback(status, progress, path)
callback(status, progress, path);
})
}else if(status == -1){
ToastUtils.showToast(context, '加载失败，请重试或联系客服！')
callback(status, progress, path)
ToastUtils.showToast(context, '加载失败，请重试或联系客服！');
callback(status, progress, path);
}else{
callback(status, progress, path)
callback(status, progress, path);
}
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress)
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress);
})
}else{
//不需要更新，已释放则直接打开模拟器，否则先释放，再打开
runUniMp(context, uniMpId??'', '', (status) => {
callback(status, 100)
callback(status, 100);
})
}
});
}
Logger.info('UniMp','uniMpId:'+uniMpId+ ', uniMpType:' + uniMpType + ', uniMpUrl:' + uniMpUrl + ', uniMpVersion:' + uniVersion)
Logger.info('UniMp','uniMpId:'+uniMpId+ ', uniMpType:' + uniMpType + ', uniMpUrl:' + uniMpUrl + ', uniMpVersion:' + uniVersion);
}
export function downStartUpForPath(context: UIContext, uniMpVersions: UniVersionEntity[], uniIconEntity: UniIconEntity, callback: (status: number, progress: number, path?: string) => void) {
@ -68,31 +68,34 @@ export function downStartUpForPath(context: UIContext, uniMpVersions: UniVersion
return item.unimp_type === uniMpType;
});
const targetPath = uniIconEntity.url??''
const uniMpUrl = uniMpEntity?.url??''//'https://cdn.batiao8.com/flaunt/uni_mp/wgt/alipay/__UNI__D535736_2026-4-20-test4.wgt';
const uniMpId = uniMpEntity?.unimp_id??''
const targetPath = uniIconEntity.url??'';
const uniMpUrl = uniMpEntity?.url??'';//'https://cdn.batiao8.com/flaunt/uni_mp/wgt/alipay/__UNI__D535736_2026-4-20-test4.wgt';
const uniMpId = uniMpEntity?.unimp_id??'';
const uniMpversion = uniMpEntity?.version??'';
isUniMpNeedDownloadForPath(uniMpId).then(res => {
if(res == true){
// 已释放，直接运行
runUniMp(context, uniMpId??'', '', (status) => {
callback(status, 100)
callback(status, 100);
})
}else{
// 未下载，先下载释放，再运行
downloadFile(getContext(), uniMpUrl??'', uniMpId + '.wgt', (status, progress, path) => {
if(status == 2){
callback(status, progress, path)
//已下载完成，释放并启动
// 设置下载的版本信信
setUniMpNeedDownload(uniMpId??'', uniMpType??'', uniMpversion??'', path??'');
callback(status, progress, path);
// 已下载完成，释放并启动
releaseRunUniMp(context, uniMpId??'', targetPath, (status) => {
callback(status, progress, path)
callback(status, progress, path);
})
}else if(status == -1){
ToastUtils.showToast(context, '加载失败，请重试或联系客服！')
callback(status, progress, path)
callback(status, progress, path);
}else{
callback(status, progress, path)
callback(status, progress, path);
}
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress)
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress);
})
}
});
@ -144,7 +147,9 @@ export function releaseRunUniMp(context: UIContext, uniMpId: string, targetPath:
mp.on('uniMPEvent', (event: string, data: object, _notify: boolean) => {
Logger.info('UniMp', 'uniMPEvent:' + event + ', data:' + data)
if(event === 'start_combo_pay'){
if(event === 'openUniAPP'){
//渲染完成
}else if(event === 'start_combo_pay'){
const jsonStr = typeof data === 'string' ? data : JSON.stringify(data);
const obj = JSON.parse(jsonStr) as TradeData;
@ -191,4 +196,4 @@ async function uniMpConfig(): Promise<Record<string, string>>{
extraData["isCombo"] = 'ok';
return extraData
}
}

5
common/src/main/ets/view/SplashWxUniMpView.ets
View File

@ -1,3 +1,4 @@
// entry/src/main/ets/view/SplashWxUniMpView.ets
@Component
export struct SplashWxUniMpView {
build() {
@ -5,8 +6,10 @@ export struct SplashWxUniMpView {
Image($r('app.media.ic_splash_wx_unimp'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Cover) // 建议使用 Cover 保持无白边拉伸
.syncLoad(true) // 关键：强制同步解码，防止在窗口出现时闪烁白屏
}
.width('100%')
.height('100%')
}
}
}

2
features/mainLayout/BuildProfile.ets
View File

@ -6,7 +6,7 @@ export const BUILD_MODE_NAME = 'debug';
export const DEBUG = true;
export const TARGET_NAME = 'default';
export const CHANNEL = 'harmony';
export const BUILD_TIME = '2605120914';
export const BUILD_TIME = '2605131158';
/**
* BuildProfile Class is used only for compatibility purposes.

2
features/mainLayout/oh_modules/@ohos/common/BuildProfile.ets
View File

@ -6,7 +6,7 @@ export const BUILD_MODE_NAME = 'debug';
export const DEBUG = true;
export const TARGET_NAME = 'default';
export const CHANNEL = 'harmony';
export const BUILD_TIME = '2605120914';
export const BUILD_TIME = '2605131158';
/**
* BuildProfile Class is used only for compatibility purposes.

51
features/mainLayout/oh_modules/@ohos/common/src/main/ets/utils/UniMpManager.ets
View File

@ -3,7 +3,7 @@ import { AESDecrypt, PLATFORM, RELEASE_BASE_URL, Signature, TOKEN } from '../con
import { ToastUtils } from '../dialog/ToastUtils'
import { UniVersionEntity,TradeData, UniIconEntity } from '../viewmodel/DataBean'
import { downloadFile } from './DownloaderUtils'
import { isUniMpNeedDownload, isUniMpNeedDownloadForPath } from './KVManager'
import { isUniMpNeedDownload, isUniMpNeedDownloadForPath, setUniMpNeedDownload } from './KVManager'
import { KVStore } from './KVStore'
import { Logger } from './Logger'
import { bundleManager, common } from '@kit.AbilityKit'
@ -29,37 +29,37 @@ export function downStartUp(context: UIContext, entity: UniVersionEntity, callba
callback(1, 0)
//需要更新，则删除旧文件，重新下载wgt文件
if(!uniMpId){
ToastUtils.showToast(context, '加载失败，请重试或联系客服！')
ToastUtils.showToast(context, '加载失败，请重试或联系客服！');
callback(-1, 0)
callback(-1, 0);
return
}
//下载模拟器
downloadFile(getContext(), uniMpUrl??'', uniMpId + '.wgt', (status, progress, path) => {
if(status == 2){
callback(status, progress, path)
callback(status, progress, path);
//已下载完成，释放并启动
releaseRunUniMp(context, uniMpId??'', '', (status) => {
callback(status, progress, path)
callback(status, progress, path);
})
}else if(status == -1){
ToastUtils.showToast(context, '加载失败，请重试或联系客服！')
callback(status, progress, path)
ToastUtils.showToast(context, '加载失败，请重试或联系客服！');
callback(status, progress, path);
}else{
callback(status, progress, path)
callback(status, progress, path);
}
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress)
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress);
})
}else{
//不需要更新，已释放则直接打开模拟器，否则先释放，再打开
runUniMp(context, uniMpId??'', '', (status) => {
callback(status, 100)
callback(status, 100);
})
}
});
}
Logger.info('UniMp','uniMpId:'+uniMpId+ ', uniMpType:' + uniMpType + ', uniMpUrl:' + uniMpUrl + ', uniMpVersion:' + uniVersion)
Logger.info('UniMp','uniMpId:'+uniMpId+ ', uniMpType:' + uniMpType + ', uniMpUrl:' + uniMpUrl + ', uniMpVersion:' + uniVersion);
}
export function downStartUpForPath(context: UIContext, uniMpVersions: UniVersionEntity[], uniIconEntity: UniIconEntity, callback: (status: number, progress: number, path?: string) => void) {
@ -68,31 +68,34 @@ export function downStartUpForPath(context: UIContext, uniMpVersions: UniVersion
return item.unimp_type === uniMpType;
});
const targetPath = uniIconEntity.url??''
const uniMpUrl = uniMpEntity?.url??''//'https://cdn.batiao8.com/flaunt/uni_mp/wgt/alipay/__UNI__D535736_2026-4-20-test4.wgt';
const uniMpId = uniMpEntity?.unimp_id??''
const targetPath = uniIconEntity.url??'';
const uniMpUrl = uniMpEntity?.url??'';//'https://cdn.batiao8.com/flaunt/uni_mp/wgt/alipay/__UNI__D535736_2026-4-20-test4.wgt';
const uniMpId = uniMpEntity?.unimp_id??'';
const uniMpversion = uniMpEntity?.version??'';
isUniMpNeedDownloadForPath(uniMpId).then(res => {
if(res == true){
// 已释放，直接运行
runUniMp(context, uniMpId??'', '', (status) => {
callback(status, 100)
callback(status, 100);
})
}else{
// 未下载，先下载释放，再运行
downloadFile(getContext(), uniMpUrl??'', uniMpId + '.wgt', (status, progress, path) => {
if(status == 2){
callback(status, progress, path)
//已下载完成，释放并启动
// 设置下载的版本信信
setUniMpNeedDownload(uniMpId??'', uniMpType??'', uniMpversion??'', path??'');
callback(status, progress, path);
// 已下载完成，释放并启动
releaseRunUniMp(context, uniMpId??'', targetPath, (status) => {
callback(status, progress, path)
callback(status, progress, path);
})
}else if(status == -1){
ToastUtils.showToast(context, '加载失败，请重试或联系客服！')
callback(status, progress, path)
callback(status, progress, path);
}else{
callback(status, progress, path)
callback(status, progress, path);
}
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress)
Logger.info('UniMp','downloadFile status:' + status + ', progress:' + progress);
})
}
});
@ -144,7 +147,9 @@ export function releaseRunUniMp(context: UIContext, uniMpId: string, targetPath:
mp.on('uniMPEvent', (event: string, data: object, _notify: boolean) => {
Logger.info('UniMp', 'uniMPEvent:' + event + ', data:' + data)
if(event === 'start_combo_pay'){
if(event === 'openUniAPP'){
//渲染完成
}else if(event === 'start_combo_pay'){
const jsonStr = typeof data === 'string' ? data : JSON.stringify(data);
const obj = JSON.parse(jsonStr) as TradeData;
@ -191,4 +196,4 @@ async function uniMpConfig(): Promise<Record<string, string>>{
extraData["isCombo"] = 'ok';
return extraData
}
}

5
features/mainLayout/oh_modules/@ohos/common/src/main/ets/view/SplashWxUniMpView.ets
View File

@ -1,3 +1,4 @@
// entry/src/main/ets/view/SplashWxUniMpView.ets
@Component
export struct SplashWxUniMpView {
build() {
@ -5,8 +6,10 @@ export struct SplashWxUniMpView {
Image($r('app.media.ic_splash_wx_unimp'))
.width('100%')
.height('100%')
.objectFit(ImageFit.Cover) // 建议使用 Cover 保持无白边拉伸
.syncLoad(true) // 关键：强制同步解码，防止在窗口出现时闪烁白屏
}
.width('100%')
.height('100%')
}
}
}

2
products/app/build-profile.json5
View File

@ -26,7 +26,7 @@
{
"name": "default",
"output": {
"artifactName": "rabbit_harmony_v1.0.0_26512917"
"artifactName": "rabbit_harmony_v1.0.0_265131158"
}
},
{

4
products/app/src/main/ets/pages/Index.ets
View File

@ -54,8 +54,10 @@ struct Index {
}
build() {
Column() {
Stack() {
NavigationPage();
}
.width('100%')
.height('100%')
}
}

856
products/app/src/main/ets/view/HomeComponent.ets
View File

@ -120,459 +120,463 @@ export struct HomeComponent {
build() {
// 父容器 Column 默认从顶部开始排列
Column() {
List() {
// 顶部图片
ListItem() {
Image($r('app.media.ic_home_top_image')).width('100%')
}
if(this.uniMpEnable){
//模拟器（2位）
Stack(){
Column() {
List() {
// 顶部图片
ListItem() {
Column(){
//模拟器标题
Image($r('app.media.ic_home_unimp_title_icon')).width('67vp').height('26vp')
//模拟器支付宝、微信
Row({ space: 7 }){
Stack(){
Image($r('app.media.ic_unimp_wx_pld'))
.width('100%')
.onClick(()=> {
uniMpMpDeal(this.getUIContext(), this.uniMpVersions, 0, (status, progress, path) => {
this.downloadWxStatus = status
if(status===1){
this.downloadWxProgress = progress
}
if(status === 2){
// 下载完成,记录版本信息和下载路径
let uniMpVersion = this.uniMpVersions[0]
setUniMpNeedDownload(uniMpVersion.unimp_id??'', uniMpVersion.unimp_type??'', uniMpVersion.version??'', path??'')
}else if (status === 3){
// 已启动（运行）
}
Logger.info('uniMp', 'downloadWxProgress: ' + this.downloadWxProgress + ', path: ' + path)
})
})
if(this.downloadWxStatus === 1){
Stack(){
Column(){
Progress({
value: this.downloadWxProgress,
total: 100,
type: ProgressType.Linear
})
.width('100%')
.height(10)
.color('#ff4f8af6')
.backgroundColor('#ebebeb')
.style({ strokeWidth: 10, enableSmoothEffect: true })
Text('下载中，请稍后：' + this.downloadWxProgress + '%').fontColor(Color.White).fontSize(12).margin({ top: 4})
}
.margin({ left:8, right:8 })
}
.width('100%')
.height('100%')
.backgroundColor('#99000000')
.borderRadius(12)
}
}
.width('100%')
.aspectRatio(168/96)
.layoutWeight(1)
Stack(){
Image($r('app.media.ic_unimp_alipay_pld'))
.width('100%')
.aspectRatio(168/96)
.layoutWeight(1)
.onClick(()=> {
uniMpMpDeal(this.getUIContext(), this.uniMpVersions, 1, (status, progress, path) => {
this.downloadAlipayStatus = status
if(status===1){
this.downloadAlipayProgress = progress
}
if(status === 2){
// 下载完成,记录版本信息和下载路径
let uniMpVersion = this.uniMpVersions[1]
setUniMpNeedDownload(uniMpVersion.unimp_id??'', uniMpVersion.unimp_type??'', uniMpVersion.version??'', path??'')
}else if (status === 3){
// 已启动（运行）
}
Logger.info('uniMp', 'downloadAlipayProgress: ' + this.downloadAlipayProgress + ', path: ' + path)
})
})
if(this.downloadAlipayStatus === 1){
Stack(){
Column(){
Progress({
value: this.downloadAlipayProgress,
total: 100,
type: ProgressType.Linear
})
.width('100%')
.height(10)
.color('#ff4f8af6')
.backgroundColor('#ebebeb')
.style({ strokeWidth: 10, enableSmoothEffect: true })
Text('下载中，请稍后：' + this.downloadAlipayProgress + '%').fontColor(Color.White).fontSize(12).margin({ top: 4})
}
.margin({ left:8, right:8 })
}
.width('100%')
.height('100%')
.backgroundColor('#99000000')
.borderRadius(12)
}
}
.width('100%')
.aspectRatio(168/96)
.layoutWeight(1)
}
.width('100%')
.padding({ top: 12})
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.borderRadius(18)
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
Image($r('app.media.ic_home_top_image')).width('100%')
}
.offset({ y: -(this.itemPadding * 3) })
// 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
.zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果
if(this.uniMpEnable){
//模拟器（2位）
ListItem() {
Column(){
//模拟器标题
Image($r('app.media.ic_home_unimp_title_icon')).width('67vp').height('26vp')
// 模拟器（3~4位）
ListItem() {
Grid() {
ForEach(this.uniMpDatas, (item: UniIconEntity) => {
GridItem() {
Column(){
Image(item.icon).width(48).height(48)
Text(item.text)
//模拟器支付宝、微信
Row({ space: 7 }){
Stack(){
Image($r('app.media.ic_unimp_wx_pld'))
.width('100%')
.fontSize(12)
.fontColor('#000000')
.margin({ top: 8})
.backgroundColor('#FFFFFF')
.textAlign(TextAlign.Center)
.onClick(()=> {
uniMpMpDeal(this.getUIContext(), this.uniMpVersions, 0, (status, progress, path) => {
this.downloadWxStatus = status
if(status===1){
this.downloadWxProgress = progress
}
if(status === 2){
// 下载完成,记录版本信息和下载路径
let uniMpVersion = this.uniMpVersions[0]
setUniMpNeedDownload(uniMpVersion.unimp_id??'', uniMpVersion.unimp_type??'', uniMpVersion.version??'', path??'')
}else if (status === 3){
// 已启动（运行）
}
Logger.info('uniMp', 'downloadWxProgress: ' + this.downloadWxProgress + ', path: ' + path)
})
})
if(this.downloadWxStatus === 1){
Stack(){
Column(){
Progress({
value: this.downloadWxProgress,
total: 100,
type: ProgressType.Linear
})
.width('100%')
.height(10)
.color('#ff4f8af6')
.backgroundColor('#ebebeb')
.style({ strokeWidth: 10, enableSmoothEffect: true })
Text('下载中，请稍后：' + this.downloadWxProgress + '%').fontColor(Color.White).fontSize(12).margin({ top: 4})
}
.margin({ left:8, right:8 })
}
.width('100%')
.height('100%')
.backgroundColor('#99000000')
.borderRadius(12)
}
}
.onClick(()=> {
this.downloadingController.open()
downStartUpForPath(this.getUIContext(), this.uniMpVersions, item, (status, progress, path) => {
Logger.info('uniMp', 'downStartUpForPath: ' + status + ', progress: ' + progress + ', path: ' + path)
if(status===1){
this.downloadProgress = progress
}else{
this.downloadingController.close()
.width('100%')
.aspectRatio(168/96)
.layoutWeight(1)
Stack(){
Image($r('app.media.ic_unimp_alipay_pld'))
.width('100%')
.aspectRatio(168/96)
.layoutWeight(1)
.onClick(()=> {
uniMpMpDeal(this.getUIContext(), this.uniMpVersions, 1, (status, progress, path) => {
this.downloadAlipayStatus = status
if(status===1){
this.downloadAlipayProgress = progress
}
if(status === 2){
// 下载完成,记录版本信息和下载路径
let uniMpVersion = this.uniMpVersions[1]
setUniMpNeedDownload(uniMpVersion.unimp_id??'', uniMpVersion.unimp_type??'', uniMpVersion.version??'', path??'')
}else if (status === 3){
// 已启动（运行）
}
Logger.info('uniMp', 'downloadAlipayProgress: ' + this.downloadAlipayProgress + ', path: ' + path)
})
})
if(this.downloadAlipayStatus === 1){
Stack(){
Column(){
Progress({
value: this.downloadAlipayProgress,
total: 100,
type: ProgressType.Linear
})
.width('100%')
.height(10)
.color('#ff4f8af6')
.backgroundColor('#ebebeb')
.style({ strokeWidth: 10, enableSmoothEffect: true })
Text('下载中，请稍后：' + this.downloadAlipayProgress + '%').fontColor(Color.White).fontSize(12).margin({ top: 4})
}
.margin({ left:8, right:8 })
}
})
})
.width('100%')
.height('100%')
.backgroundColor('#99000000')
.borderRadius(12)
}
}
.width('100%')
.aspectRatio(168/96)
.layoutWeight(1)
}
}, (item: UniIconEntity) => item.url)
}
// 动态列数：数据 > 8 显示 3 列，否则 4 列
.columnsTemplate(this.uniMpDatas.length > 8 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
// 由内容撑开高度，禁用 Grid 内部滚动，交给外层 List 处理
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
// 如果 Grid 不设置高度，它会尝试占满。在 List 中建议根据行数计算高度
// 或者直接不设高度，依赖内部子组件高度和 Gap
.height(this.calculateUniMpGridHeight())
}
.offset({ y: -this.itemPadding })
}
if(this.uniMpEnable){
// 选尺寸制作（Resize）
ListItem() {
Column() {
//选尺寸制作标题
Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
//选尺寸制作内容
Grid() {
ForEach(this.resizeItems, (item: HomeItem) => {
GridItem() {
Stack(){
Image(item.icon).width('100%').layoutWeight(1)
Column() {
Text(item.name)
.width('100%')
.fontSize(12)
.textAlign(TextAlign.Start)
.fontColor('#000000')
.margin({ top: 8})
.borderRadius(12)
Text(item.resize)
.width('100%')
.fontSize(12)
.textAlign(TextAlign.Start)
.fontColor('#000000')
.margin({ top: 8})
.borderRadius(12)
}
.padding({ left: '40%' })
.align(Alignment.Start)
}
.onClick(() => {
const params: CuteParams = {
id: item.id,
name: "抠图尺寸",
width: item.width,
height: item.height,
};
this.pageStack.pushPathByName("CuteLayout", params);
})
}
}, (item: HomeItem) => item.id.toString())
.width('100%')
.padding({ top: 12})
}
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateResizeGridHeight())
.padding({ top: 12})
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.borderRadius(18)
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.offset({ y: -this.itemPadding })
}else{
// 选尺寸制作（Resize）
ListItem() {
Column() {
//选尺寸制作标题
Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
//选尺寸制作内容
.offset({ y: -(this.itemPadding * 3) })
// 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
.zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果
// 模拟器（3~4位）
ListItem() {
Grid() {
ForEach(this.resizeItems, (item: HomeItem) => {
ForEach(this.uniMpDatas, (item: UniIconEntity) => {
GridItem() {
Stack(){
Image(item.icon).width('100%').layoutWeight(1)
Column() {
Text(item.name)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Start)
.margin({ top: 8})
.borderRadius(12)
Text(item.resize)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Start)
.margin({ top: 8})
.borderRadius(12)
}
.padding({ left: '40%' })
.align(Alignment.Start)
}
.onClick(() => {
const params: CuteParams = {
id: item.id,
name: "抠图尺寸",
width: item.width,
height: item.height,
};
this.pageStack.pushPathByName("CuteLayout", params);
})
}
}, (item: HomeItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateResizeGridHeight())
.padding({ top: 12})
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.borderRadius(18)
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.offset({ y: -(this.itemPadding * 3) })
// 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
.zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果
}
// 选证件制作
ListItem() {
Column() {
//选尺寸制作标题
Image($r('app.media.ic_home_certificate_title_icon')).width('102vp').height('26vp')
//选尺寸制作内容
Grid() {
ForEach(this.certificateItems, (item: HomeItem) => {
GridItem() {
Column() {
Column(){
Image(item.icon).width(48).height(48)
Text(item.text)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.margin({ top: 8})
.backgroundColor('#FFFFFF')
.textAlign(TextAlign.Center)
.borderRadius(12)
}
.onClick(()=> {
this.downloadingController.open()
downStartUpForPath(this.getUIContext(), this.uniMpVersions, item, (status, progress, path) => {
Logger.info('uniMp', 'downStartUpForPath: ' + status + ', progress: ' + progress + ', path: ' + path)
if(status===1){
this.downloadProgress = progress
}else{
this.downloadingController.close()
}
})
})
}
}, (item: UniIconEntity) => item.url)
}
// 动态列数：数据 > 8 显示 3 列，否则 4 列
.columnsTemplate(this.uniMpDatas.length > 8 ? '1fr 1fr 1fr' : '1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
// 由内容撑开高度，禁用 Grid 内部滚动，交给外层 List 处理
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
// 如果 Grid 不设置高度，它会尝试占满。在 List 中建议根据行数计算高度
// 或者直接不设高度，依赖内部子组件高度和 Gap
.height(this.calculateUniMpGridHeight())
}
.offset({ y: -this.itemPadding })
}
if(this.uniMpEnable){
// 选尺寸制作（Resize）
ListItem() {
Column() {
//选尺寸制作标题
Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
//选尺寸制作内容
Grid() {
ForEach(this.resizeItems, (item: HomeItem) => {
GridItem() {
Stack(){
Image(item.icon).width('100%').layoutWeight(1)
Column() {
Text(item.name)
.width('100%')
.fontSize(12)
.textAlign(TextAlign.Start)
.fontColor('#000000')
.margin({ top: 8})
.borderRadius(12)
Text(item.resize)
.width('100%')
.fontSize(12)
.textAlign(TextAlign.Start)
.fontColor('#000000')
.margin({ top: 8})
.borderRadius(12)
}
.padding({ left: '40%' })
.align(Alignment.Start)
}
.onClick(() => {
const params: CuteParams = {
id: item.id,
name: "抠图尺寸",
width: item.width,
height: item.height,
};
this.pageStack.pushPathByName("CuteLayout", params);
})
}
}, (item: HomeItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateResizeGridHeight())
.padding({ top: 12})
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.offset({ y: -this.itemPadding })
}else{
// 选尺寸制作（Resize）
ListItem() {
Column() {
//选尺寸制作标题
Image($r('app.media.ic_home_cute_title_icon')).width('101vp').height('26vp')
//选尺寸制作内容
Grid() {
ForEach(this.resizeItems, (item: HomeItem) => {
GridItem() {
Stack(){
Image(item.icon).width('100%').layoutWeight(1)
Column() {
Text(item.name)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Start)
.margin({ top: 8})
.borderRadius(12)
Text(item.resize)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Start)
.margin({ top: 8})
.borderRadius(12)
}
.padding({ left: '40%' })
.align(Alignment.Start)
}
.onClick(() => {
const params: CuteParams = {
id: item.id,
name: "抠图尺寸",
width: item.width,
height: item.height,
};
this.pageStack.pushPathByName("CuteLayout", params);
})
}
}, (item: HomeItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateResizeGridHeight())
.padding({ top: 12})
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.borderRadius(18)
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.offset({ y: -(this.itemPadding * 3) })
// 如果希望整体列表都往上提，可以去掉 index 判断直接设为 -20
.zIndex(1) // 确保列表项层级高于图片，实现“覆盖”效果
}
// 选证件制作
ListItem() {
Column() {
//选尺寸制作标题
Image($r('app.media.ic_home_certificate_title_icon')).width('102vp').height('26vp')
//选尺寸制作内容
Grid() {
ForEach(this.certificateItems, (item: HomeItem) => {
GridItem() {
Column() {
Column(){
Text(item.name)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Center)
.borderRadius(12)
Text(item.resize)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Center)
.margin({ top: 4})
.borderRadius(12)
}
}
.height('50vp')
.align(Alignment.Center)
.layoutWeight(1)
.borderRadius(10)
.linearGradient({
angle: 180, // 渐变角度，180度表示从上到下
colors: [
['#FFEEFFCC', 0.0], // [颜色, 偏移量0.0-1.0]
['#FFFFFFFF', 1.0]
]
})
.shadow({
radius: 3, // 阴影模糊半径
color: '#1A000000', // 阴影颜色（建议带透明度）
offsetX: 0, // X轴偏移
offsetY: 3 // Y轴偏移
})
.alignItems(HorizontalAlign.Center) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Center) // 设置子组件垂直靠顶对齐（默认即是）
.onClick(() => {
const params: CuteParams = {
id: item.id,
name: item.name,
width: item.width,
height: item.height,
};
this.pageStack.pushPathByName("CuteLayout", params);
})
}
}, (item: HomeItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateCertificateGridHeight())
.padding({ top: 12})
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.offset({ y: this.uniMpEnable?-this.itemPadding : -this.itemPadding * 4 })
// 其他
ListItem() {
Column() {
//其他标题
Image($r('app.media.ic_home_other_title')).width('51vp').height('26vp')
//其他内容
Grid() {
ForEach(this.otherItems, (item: HomeItem) => {
GridItem() {
Column(){
Image(item.icon).width(34).height(34)
Text(item.name)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.margin({ top: 8})
.backgroundColor($r('app.color.normal_background'))
.textAlign(TextAlign.Center)
.borderRadius(12)
Text(item.resize)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.textAlign(TextAlign.Center)
.margin({ top: 4})
.borderRadius(12)
}
.onClick(()=>{
if("拼长图" === item.name){
this.pageStack.pushPathByName("LongImageLayout", null);
}else if("格式转换" === item.name){
this.pageStack.pushPathByName("FormatLayout", null);
}else if("改尺寸" === item.name){
this.pageStack.pushPathByName("ResizeLayout", null);
}else if("拍照指南" === item.name){
this.pageStack.pushPathByName("GuideLayout", null);
}
})
}
.height('50vp')
.align(Alignment.Center)
.layoutWeight(1)
.borderRadius(10)
.linearGradient({
angle: 180, // 渐变角度，180度表示从上到下
colors: [
['#FFEEFFCC', 0.0], // [颜色, 偏移量0.0-1.0]
['#FFFFFFFF', 1.0]
]
})
.shadow({
radius: 3, // 阴影模糊半径
color: '#1A000000', // 阴影颜色（建议带透明度）
offsetX: 0, // X轴偏移
offsetY: 3 // Y轴偏移
})
.alignItems(HorizontalAlign.Center) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Center) // 设置子组件垂直靠顶对齐（默认即是）
.onClick(() => {
const params: CuteParams = {
id: item.id,
name: item.name,
width: item.width,
height: item.height,
};
this.pageStack.pushPathByName("CuteLayout", params);
})
}
}, (item: HomeItem) => item.id.toString())
}, (item: HomeItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateOtherGridHeight())
.padding({ top: 12})
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateCertificateGridHeight())
.padding({ top: 12})
.padding({ left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.padding({ top: 12, left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
.offset({ y: this.uniMpEnable?-this.itemPadding * 6 : -this.itemPadding * 8 })
}
.offset({ y: this.uniMpEnable?-this.itemPadding : -this.itemPadding * 4 })
// 其他
ListItem() {
Column() {
//其他标题
Image($r('app.media.ic_home_other_title')).width('51vp').height('26vp')
//其他内容
Grid() {
ForEach(this.otherItems, (item: HomeItem) => {
GridItem() {
Column(){
Image(item.icon).width(34).height(34)
Text(item.name)
.width('100%')
.fontSize(12)
.fontColor('#000000')
.margin({ top: 8})
.backgroundColor($r('app.color.normal_background'))
.textAlign(TextAlign.Center)
.borderRadius(12)
}
.onClick(()=>{
if("拼长图" === item.name){
this.pageStack.pushPathByName("LongImageLayout", null);
}else if("格式转换" === item.name){
this.pageStack.pushPathByName("FormatLayout", null);
}else if("改尺寸" === item.name){
this.pageStack.pushPathByName("ResizeLayout", null);
}else if("拍照指南" === item.name){
this.pageStack.pushPathByName("GuideLayout", null);
}
})
}
}, (item: HomeItem) => item.id.toString())
}
.columnsTemplate('1fr 1fr 1fr 1fr')
.columnsGap(10)
.rowsGap(10)
.width('100%')
.scrollBar(BarState.Off)
.nestedScroll({
scrollForward: NestedScrollMode.SELF_FIRST,
scrollBackward: NestedScrollMode.SELF_FIRST
})
.height(this.calculateOtherGridHeight())
.padding({ top: 12})
}
.padding({ left: 16, right: 16})
.backgroundColor($r('app.color.normal_background'))
.width('100%') // 必须设置宽度，否则无法感知“左侧”在哪里
.alignItems(HorizontalAlign.Start) // 设置子组件水平靠左对齐
.justifyContent(FlexAlign.Start) // 设置子组件垂直靠顶对齐（默认即是）
}
.offset({ y: this.uniMpEnable?-this.itemPadding * 6 : -this.itemPadding * 8 })
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None) // 禁用回弹效果，使其更像普通布局
}
.backgroundColor($r('app.color.normal_background'))
.width('100%')
.layoutWeight(1)
.scrollBar(BarState.Off)
.edgeEffect(EdgeEffect.None) // 禁用回弹效果，使其更像普通布局
.height('100%')
.justifyContent(FlexAlign.Start) // 确保在父容器中靠顶
}
.backgroundColor($r('app.color.normal_background'))
.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start) // 确保在父容器中靠顶
}
// 计算 Grid 需要的高度：(行数 * 每行高度) + (行数-1 * 间距)