【宝藏贴】HarmonyOS 官方模板优秀案例 （第 1 期：便捷生活 · 购物中心）

ShoppingMall

├─commons                           

│  └─lib_common/src/main/ets

│       ├─components  

│       │   ├── AlertDialog.ets                          //警告对话框

│       │   ├── AsWebRichText.ets                        //富文本编辑器

│       │   ├── CallTelSheet.ets                         //电话呼叫

│       │   ├── EmptyComp.ets                            //空白组件

│       │   ├── LoadingDialog.ets                        //加载组件

│       │   ├── LoginComp.ets                            //登录组件

│       │   ├── NavHeaderBar.ets                         //页面导航栏头部组件               

│       │   ├── PageHeaderComp.ets                       //页面标题组件

│       │   └── SheetHeaderComp.ets                      //半模态标题组件

│       │         

│       ├─constants         

│       │   ├── Common.ets                               //通用常量

│       │   └── RouterMap.ets                            //路由表常量             

│       │                    

│       ├─httprequest    

│       │   ├── AxiosHttp.ets                            // axios二次封装                   

│       │   ├── AxiomRequest.ets                         //创建请求实例          

│       │   ├── HttpRequest.ets                          //业务接口封装                   

│       │   └── HttpRequestApi.ets                       //业务接口定义

│       │

│       ├─mock/MockData.ets                              // mock数据

│       │   

│       ├─models

│       │   ├── ParamsModel.ets                          //接口参数模型          

│       │   ├── RequestModel.ets                         //接口请求模型

│       │   ├── ResponseModel.ets                        //接口响应模型          

│       │   ├── RouterModel.ets                          //路由跳转模型                   

│       │   ├── StorageModel.ets                         //状态变量模型          

│       │   └── TabBarModel.ets                          // Tab模型                    

│       │         

│       ├─utils

│       │   ├── EmitUtils.ets                            //全局事件方法类

│       │   ├── FileUtils.ets                            //文件处理方法类          

│       │   ├── FormatUtils.ets                          //格式化方法类

│       │   ├── GlobalUtils.ets                          //全局变量类          

│       │   ├── Logger.ets                               //日志类

│       │   ├── LoginUtils.ets                           //登录方法          

│       │   ├── RouterUtil.ets                           //路由管理类      

│       │   └── Utils.ets                                //通用方法     

│       │

│       └─viewmodels/BaseViewModel.ets                   //基础viewmodel抽象类

│

├─components

│  ├── module_coupon                                     //优惠券组件                     

│  ├── module_keyboard                                   //车牌键盘组件

│  └── module_points                                     //自助积分组件            

│      

├─features

│  ├─business_home/src/main/ets                          //首页模块             

│  │    ├─components

│  │    │   ├── AddPlateComp.ets                         //添加车牌组件

│  │    │   └── GuideListComp.ets                        //指南列表组件                  

│  │    ├─constants

│  │    │   └── Constants.ets                            //常量定义             

│  │    ├─pages

│  │    │   ├── ConsiderateServicePage.ets               //尊享服务页面

│  │    │   ├── FindCarPage.ets                          //寻车页面

│  │    │   ├── FindCarResultPage.ets                    //寻车结果页面

│  │    │   ├── ParkingPaymentPage.ets                   //停车缴费入口页面

│  │    │   ├── PayDetailPage.ets                        //支付详情页

│  │    │   ├── PayRecordPage.ets                        //缴费记录页面

│  │    │   ├── PaySuccessPage.ets                       //支付成功页面

│  │    │   ├── PlateNumberMgtPage.ets                   //车牌管理页面

│  │    │   ├── PlateNumberPage.ets                      //停车缴费页面

│  │    │   ├── ServiceDetailPage.ets                    //贴心服务二级页面

│  │    │   ├── StoreGuideDetailPage.ets                 //店铺详情页面

│  │    │   ├── StoreGuidePage.ets                       //店铺导航页面

│  │    │   └── WebPage.ets                              //网页页面                  

│  │    └─viewmodel

│  │        ├── PayDetailViewModel.ets                   //支付详情视图模型

│  │        ├── PayRecordViewModel.ets                   //缴费记录视图模型

│  │        ├── PaySuccessViewModel.ets                  //支付成功视图模型

│  │        ├── ServiceDetailViewModel.ets               //服务详细视图模型

│  │        ├── StoreGuideDetailViewModel.ets            //店铺指南详细视图模型

│  │        └── StoreGuideViewModel.ets                  //店铺指南视图模型      

│  │

│  └─business_mine/src/main/ets                         //我的模块             

│       ├──components

│       │   ├── MenuComp.ets                            //菜单组件

│       │   └── UserInfoComp.ets                        //用户信息组件

│       ├──constants

│       │   └── WalletConstants.ets                     //钱包常量

│       ├──pages

│       │   ├── MembershipManualPage.ets                //成员手册页面

│       │   ├── MembershipPage.ets                      //成员页面

│       │   ├── MinePage.ets                            //我的页面

│       │   ├── MyCouponsPage.ets                       //我的优惠券页面

│       │   ├── MyWalletPage.ets                        //我的钱包页面

│       │   ├── PrivacyPage.ets                         //隐私政策页面

│       │   ├── RechargeWalletPage.ets                  //充值钱包页面

│       │   ├── SettingPage.ets                         //设置页面

│       │   └── UserInfoPage.ets                        //用户信息页面

│       └──viewmodel               

│           ├── MinePageViewModel.ets                   //我的页面视图模型

│           ├── MyWalletViewModel.ets                   //我的钱包页面视图模型

│           ├── RechargeWalletViewModel.ets             //充值钱包页面视图模型

│           ├── SettingPageViewModel.ets                //设置页面视图模型

│           └── UserInfoViewModel.ets                   //用户信息页面视图模型

│

└─products

   └─entry/src/main/ets                

        ├── common/Constants.ets                        //常量定义

        ├── components/CustomTabBar.ets                 //自定义标签栏组件      

        ├── entryability/EntryAbility.ets               //主入口能力

        ├── entryformability/EntryFormAbility.ets       //表单主入口能力

        ├── pages

        │   ├── HomePage.ets                            //首页

        │   ├── Index.ets                               //入口页面

        │   ├── IndexPage.ets                           // Tab页面        

        │   └── IntroducePage.ets                       //商场介绍页面

        ├── utils/WidgetUtil.ets                        //卡片工具类

        ├── viewModels/IndexViewModel.ets               // Tab页面ViewModel      

        └── widget/pages/WidgetCard.ets                 //服务卡片        

​// products/phone/src/main/ets/viewmodel/IndexViewModel.ets

private loginWithHuaweiID(): Promise<HuaweiIDResp> {

    return new Promise((resolve, reject) => {

      //创建静默登录请求

      let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();

      loginRequest.forceLogin = false;

      let controller = new authentication.AuthenticationController();

      controller.executeRequest(loginRequest).then((data) => {

        let loginWithHuaweiIDResponse = data as authentication.LoginWithHuaweiIDResponse;

        let authCode = loginWithHuaweiIDResponse.data?.authorizationCode;

        let openId = loginWithHuaweiIDResponse.data?.openID;

        let unionId = loginWithHuaweiIDResponse.data?.unionID;

        //静默登录成功，返回账号相关的ID数据

        resolve({ openId, unionId, authCode } as HuaweiIDResp);

      }).catch((error: BusinessError) => {

        Logger.error(TAG, 'loginWithHuaweiID error: ' + JSON.stringify(error));

      }).finally(() => {

        //静默登录失败，返回空值

        resolve({

          openId: '',

          unionId: '',

          authCode: '',

        } as HuaweiIDResp);

      });

    });

  }

// commons/lib_common/src/main/ets/components/LoginComp.ets

FunctionalButton({

  params: {

    openType: functionalButtonComponentManager.OpenType.GET_PHONE_NUMBER,

    label: '',

    styleOption: {

      styleConfig: new functionalButtonComponentManager

        .ButtonConfig()

        .size({ width: 48, height: 48 })

        .borderRadius(24)

        .backgroundImage($r('app.media.ic_tab_code_pass'))

        .backgroundImageSize(ImageSize.Cover)

    },

  },

  controller: new functionalButtonComponentManager.FunctionalButtonController()

    .onGetPhoneNumber((err, data) => {

      if (err) {

        //使用该方法的元服务未获取scope权限时，使用mock账户返回结果。获取权限参考上一节【代码使用效果】的第三步【开发前提工作】

        LoginUtils.onBindFail(this.callback);

        return;

      }

      LoginUtils.onBindSuccess(data.code || '', this.callback);

    }),

})

// commons/lib_common/src/main/ets/utils/LoginUtils.ets

export class LoginUtils {

  /**

   *关联成功

   * @param code

   * @param callback

   */

  static onBindSuccess(code: string, callback?: () => void) {

    HttpRequestApi.getOpenLoginHm(encodeURIComponent(code)).then((res) => {

      if (res.code === HttpCode.SUCCESS) {

        let tel = res.data.userTel ?? ''

        let userInfo: UserInfoModel = AppStorageV2.connect(UserInfoModel, () => new UserInfoModel())!;

        userInfo.userInfo.userTel = `${tel.substring(0, tel.length - 8)}****${tel.substring(tel.length - 4)}`

        userInfo.isRelative = true

        if (callback) {

          callback();

        }

      } else {

        promptAction.showToast({ message: '账号关联失败，请重试~' })

      }

    }).catch(() => {

      promptAction.showToast({ message: '账号关联失败' })

    }).finally(() => {

      LoadingDialogUtil.close()

    })

  };

}

​import { preferences } from '@kit.ArkData';

import { BusinessError, commonEventManager } from '@kit.BasicServicesKit';

import { formBindingData, formProvider } from '@kit.FormKit';

import { Logger } from 'lib_common';

import { CardManager } from 'module_points';

const TAG = '[WidgetUtil]';

export class WidgetUtil {

  // ...

  private static readonly _formClickEventName: string = 'form_click_event_name';

  //发布卡片按钮点击事件

  public static publishFormClick(formId: string) {

    commonEventManager.publish(

      WidgetUtil._formClickEventName,

      { data: formId },

      (err: BusinessError) => {

        if (err) {

          Logger.error(

            TAG,

            `Failed to publish form_click_event_name. Code is ${err.code}, message is ${err.message}`,

          );

        } else {

          Logger.info(TAG, 'Succeeded in publishing form_click_event_name.');

        }

      },

    );

  }

  //订阅卡片按钮点击事件

  public static async subscribeFormClick(ctx: Context) {

    let subscriber: commonEventManager.CommonEventSubscriber | undefined =

      undefined;

    let subscribeInfo: commonEventManager.CommonEventSubscribeInfo = {

      events: [WidgetUtil._formClickEventName],

      publisherPermission: '',

    };

    commonEventManager.createSubscriber(subscribeInfo, (err1, data1) => {

      if (data1) {

        subscriber = data1;

        //订阅公共事件回调

        commonEventManager.subscribe(subscriber, async (err2, data2) => {

          if (data2) {

            Logger.info(TAG, 'Succeeded in creating subscribeFormClick.');

            const formData = CardManager.get().getCardData(true);

            //在回调中获取当前的卡片数据，并通过formProvider.updateForm方法刷新卡片数据

            formProvider.updateForm(

              data2.data,

              formBindingData.createFormBindingData(formData),

            );

          }

        });

      }

    });

  }

  // ...

}