devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

华为鸿蒙应用--登录页：网络请求、自定义Loading、MD5密码加密、emitter订阅状态变化、持久化登录状态、隐藏软键盘-ArkTs_鸿蒙arkts 在网络请求是现实loading

作者：我家小花儿 | 2024-03-26 02:37:53

赞

踩

鸿蒙arkts 在网络请求是现实loading

HarmonyOS系列

华为鸿蒙应用--底部导航栏Tabs（自适应手机和平板）-ArkTs_华为鸿蒙应用 csdn 底部导航栏-CSDN博客

华为鸿蒙应用--欢迎页SplashPage+倒计时跳过（自适应手机和平板）-ArkTs_app.media.ic_splash_page_background-CSDN博客

华为鸿蒙应用--封装数据持久化工具：首选项Preferences（鸿蒙工具）-ArkTs-CSDN博客

效果

通过登录页实现HarmonyOS网络请求、自定义Loading、MD5密码加密、emitter订阅状态变化、持久化登录状态、隐藏软键盘

0、LoginPage.ets代码

  1. import { Constants } from '@ohos/common/src/main/ets/constants/Constants'
  2. import { Logger } from '@ohos/common/src/main/ets/utils/Logger'
  3. import { loginModel } from '../viewmodel/types'
  4. import { CustomDialogView, HttpUtils, PageConstants, PFUKey, PFUtils } from '@ohos/common'
  5. import { Md5 } from 'ts-md5';
  6. import router from '@ohos.router'
  7. import inputMethod from '@ohos.inputMethod'
  8.  
  9. @Extend(Text) function text16fp333() {
  10.   .fontColor($r('app.color.color_333333'))
  11.   .fontSize($r('app.float.middle_font_size'))
  12.   .fontWeight(FontWeight.Medium)
  13. }
  14.  
  15. @Extend(TextInput) function inputTrBg() {
  16.   .margin({
  17.     left: $r('app.float.vp_thirty_two'),
  18.     right: $r('app.float.vp_thirty_two') })
  19.   .height(50)
  20.   .backgroundColor($r('app.color.color_transparent'))
  21.   .fontSize($r('app.float.middle_font_size'))
  22.   .fontWeight(FontWeight.Medium)
  23. }
  24.  
  25. @Extend(Line) function line() {
  26.   .width(Constants.FULL_PARENT)
  27.   .height($r('app.float.vp_zero_point_five'))
  28.   .backgroundColor($r('app.color.color_E0E0E0'))
  29. }
  30.  
  31.  
  32. @Entry
  33. @Component
  34. struct LoginPage {
  35.   private loginModel: loginModel;
  36.   private account: string;
  37.   private password: string;
  38.  
  39.   build() {
  40.     RelativeContainer() {
  41.       Column() {
  42.         Image($r('app.media.img_logo'))
  43.           .height(44)
  44.  
  45.         Text($r('app.string.str_login_by_password'))
  46.           .fontColor($r('app.color.black'))
  47.           .fontSize($r('app.float.bigger_font_size'))
  48.           .margin({ top: $r('app.float.vp_ten') })
  49.           .key("123")
  50.  
  51.       }
  52.       .alignItems(HorizontalAlign.Start)
  53.       .alignRules({
  54.         top: { anchor: '__container__', align: VerticalAlign.Top },
  55.         left: { anchor: '__container__', align: HorizontalAlign.Start }
  56.       })
  57.       .margin({ top: 80, left: $r('app.float.vp_thirty_two') })
  58.       .id("c_top")
  59.  
  60.       Column() {
  61.         Row() {
  62.           Text($r('app.string.str_account'))
  63.             .text16fp333()
  64.           TextInput({ placeholder: $r('app.string.str_account_hint'), text: "13595432224" })
  65.             .inputTrBg()
  66.             .type(InputType.PhoneNumber)
  67.             .onChange((value: string) => {
  68.               this.account = value
  69.             })
  70.         };
  71.         Line()
  72.           .line()
  73.         Row() {
  74.           Text($r('app.string.str_password'))
  75.             .text16fp333()
  76.           TextInput({ placeholder: $r('app.string.str_password_hint'), text: "dho123456" })
  77.             .inputTrBg()
  78.             .type(InputType.Password)
  79.             .onChange((value: string) => {
  80.               this.password = value
  81.             })
  82.         };
  83.         Line()
  84.           .line()
  85.  
  86.         Button($r('app.string.str_login_now'), { type: ButtonType.Normal, stateEffect: true })
  87.           .borderRadius($r('app.float.vp_five'))
  88.           .backgroundColor($r('app.color.color_3662EC'))
  89.           .width(Constants.FULL_PARENT)
  90.           .margin({
  91.             top: $r('app.float.vp_twenty')
  92.           })
  93.           .height($r('app.float.vp_forty'))
  94.           .onClick(() => {
  95.             let params = {
  96.               user_id: this.account,
  97.               password: Md5.hashStr(this.password) // md5加密密码
  98.             }
  99.             HttpUtils.post(HttpUtils.LOGIN_BY_PASSWORD_URL, params, true)
  100.               .then((res) => {
  101.                 this.loginModel = JSON.parse(res)
  102.                 PFUtils.put(PFUKey.IS_LOGIN, true); // 首选项记录已经登录
  103.                 HttpUtils.defaultParams("token", this.loginModel.token) // 网络请求默认参数token（authorization）
  104.                 router.replaceUrl({ url: PageConstants.MAIN_PAGE_URL }) // 跳转首页
  105.               })
  106.           });
  107.         Button($r('app.string.str_register_now'), { type: ButtonType.Normal, stateEffect: true })
  108.           .borderRadius($r('app.float.vp_five'))
  109.           .backgroundColor($r('app.color.color_transparent'))
  110.           .borderStyle(BorderStyle.Solid)
  111.           .borderWidth($r('app.float.vp_one'))
  112.           .borderColor($r('app.color.color_3662EC'))
  113.           .borderRadius($r('app.float.vp_five'))
  114.           .width(Constants.FULL_PARENT)
  115.           .fontColor($r('app.color.color_3662EC'))
  116.           .margin({
  117.             top: $r('app.float.vp_twenty')
  118.           })
  119.           .height($r('app.float.vp_forty'))
  120.           .onClick(() => {
  121.             HttpUtils.post(HttpUtils.USER_INFO_URL)
  122.               .then((res) => {
  123.                 Logger.error(Constants.TAG, JSON.stringify(res))
  124.               })
  125.           })
  126.       }
  127.       .alignRules({
  128.         center: { anchor: '__container__', align: VerticalAlign.Center },
  129.         left: { anchor: '__container__', align: HorizontalAlign.Start }
  130.       })
  131.       .margin({
  132.         left: $r('app.float.vp_thirty_two'),
  133.         right: $r('app.float.vp_thirty_two')
  134.       })
  135.       .alignItems(HorizontalAlign.Start)
  136.       .id("c_center")
  137.  
  138.       CustomDialogView().id("load");
  139.     }
  140.     .height('100%')
  141.     .width("100%")
  142.     .backgroundColor($r('app.color.color_F3F4F6'))
  143.     .onClick(() => {
  144.       let im = inputMethod.getController()
  145.       im.stopInputSession() // 隐藏软键盘
  146.     });
  147.  
  148.   }
  149. }
  150.

1、网络请求HttpsUtils.ets

使用第三方Axios库：OpenHarmony-SIG/ohos_axios

使用该库时，在配置全局请求参数时失效（可能是我使用方法错误），所以自定义补充实现了：defaultParams方法

同时实现了网络请求的loading

  1. import emitter from '@ohos.events.emitter';
  2. import { EmitterId } from '../constants/EmitterId';
  3. import axios, {
  4.   AxiosError,
  5.   AxiosResponse,
  6.   AxiosProgressEvent,
  7.   InternalAxiosRequestConfig,
  8.   AxiosRequestConfig,
  9. } from '@ohos/axios'
  10. import { Constants } from '../constants/Constants';
  11. import { HttpData, loginModel } from '../viewmodel/types';
  12. import promptAction from '@ohos.promptAction';
  13. import { Logger } from './Logger';
  14. import { PFUtils } from './PFUtils';
  15. import { PFUKey } from '../constants/PFUKey';
  16.  
  17. export interface param {
  18.   paramKey: string,
  19.   paramValue: string,
  20. }
  21.  
  22. export class HttpUtils {
  23.   static readonly BASE_URL: string = "http://192.168.1.10:10110/"; // 基础Url
  24.   static readonly LOGIN_BY_PASSWORD_URL: string = "password/login"; // 密码登录
  25.   static readonly USER_INFO_URL: string = "user/data"; // 用户信息
  26.  
  27.   static async defaultParams(key: string, value: string) {
  28.     let param = { paramKey: key, paramValue: value }
  29.     let arrParams: Array<param>
  30.     PFUtils.get(PFUKey.DEFAULT_PARAMS).then((res: string) => {
  31.       if (res === undefined) {
  32.         arrParams = []
  33.       } else {
  34.         arrParams = JSON.parse(res);
  35.       }
  36.       let index = arrParams.findIndex(item => item.paramKey === key)
  37.       if (index === -1) {
  38.         arrParams.push(param)
  39.       } else {
  40.         arrParams[index].paramValue = value;
  41.       }
  42.       PFUtils.put(PFUKey.DEFAULT_PARAMS, JSON.stringify(arrParams))
  43.     })
  44.   }
  45.  
  46.   static async post(url: string, params?: any, noDefaultParam?: boolean) {
  47.     if (params === undefined) {
  48.       params = {}
  49.     }
  50.     let resp;
  51.     this.showLoad(true);
  52.     if (!noDefaultParam) {
  53.       await PFUtils.get(PFUKey.DEFAULT_PARAMS).then((value: string) => {
  54.         if (value !== undefined) {
  55.           let arrParams: Array<param>;
  56.           arrParams = JSON.parse(value);
  57.           for (let index = 0; index < arrParams.length; index++) {
  58.             const element = arrParams[index];
  59.             params[element.paramKey] = element.paramValue
  60.           }
  61.         }
  62.       })
  63.     }
  64.     Logger.debug(Constants.HTTP_TAG, "Url：" + this.BASE_URL + url)
  65.     Logger.debug(Constants.HTTP_TAG, "Param：" + JSON.stringify(params))
  66.     await axios.post(this.BASE_URL + url, params)
  67.       .then((res: AxiosResponse<HttpData>) => {
  68.         resp = JSON.stringify(res.data.data);
  69.         setTimeout(() => {
  70.           this.showLoad(false);
  71.           promptAction.showToast({
  72.             message: res.data.message
  73.           })
  74.         }, 500); // 延迟500毫秒隐藏Loading，
  75.         Logger.debug(Constants.HTTP_TAG, "Data：" + resp)
  76.       }).catch((err: AxiosError) => {
  77.         setTimeout(() => {
  78.           this.showLoad(false);
  79.           promptAction.showToast({
  80.             message: err.message
  81.           })
  82.         }, 500);
  83.         resp = JSON.stringify(err)
  84.         Logger.error(Constants.HTTP_TAG, "Err:" + JSON.stringify(err));
  85.       });
  86.  
  87.     return resp;
  88.   }
  89.  
  90.   static showLoad(show: boolean) {
  91.     emitter.emit({
  92.       eventId: EmitterId.LOAD_PROGRESS,
  93.       priority: emitter.EventPriority.IMMEDIATE
  94.     }, {
  95.       data: {
  96.         "showLoad": show
  97.       }
  98.     });
  99.   }
  100. }
  101.

0、HttpData、loginModel

  1.  
  2. export interface HttpData<T = any> {
  3.   code?: number,
  4.   message?: string,
  5.   data?: T
  6. }
  7.  
  8. export interface loginModel {
  9.   token?: string,
  10.   user_id?: string,
  11. }
  12.  
  13.

1.自定义loading

  1. import emitter from '@ohos.events.emitter';
  2. import { EmitterId } from '../../constants/EmitterId';
  3. import { LoadingProgressDialog } from './LoadingProgressDialog'
  4.  
  5. export class CustomDialogCallback {
  6.   confirmCallback: Function = () => {
  7.   };
  8.   cancelCallback: Function = () => {
  9.   };
  10. }
  11.  
  12. @Component
  13. export struct CustomDialogView {
  14.   @Provide dialogCallBack: CustomDialogCallback = new CustomDialogCallback();
  15.   loadingDialog: CustomDialogController = new CustomDialogController({
  16.     builder: LoadingProgressDialog(),
  17.     autoCancel: true,
  18.     customStyle: true
  19.   });
  20.  
  21.   aboutToAppear() {
  22.     let innerEvent = {
  23.       eventId: EmitterId.LOAD_PROGRESS
  24.     };
  25.     emitter.on(innerEvent, (eventData) => {
  26.       if (eventData.data.showLoad) {
  27.         if (this.loadingDialog) {
  28.           this.loadingDialog.open();
  29.         }
  30.       } else {
  31.         if (this.loadingDialog) {
  32.           this.loadingDialog.close();
  33.         }
  34.       }
  35.     });
  36.   }
  37.  
  38.   aboutToDisappear() {
  39.     emitter.off(EmitterId.LOAD_PROGRESS)
  40.   }
  41.  
  42.   build() {
  43.   }
  44. }
  45.  
  46.  
  47. @CustomDialog
  48. export struct LoadingProgressDialog {
  49.   controller: CustomDialogController = new CustomDialogController({ builder: '' });
  50.  
  51.   build() {
  52.     Column() {
  53.       LoadingProgress()
  54.         .width(80)
  55.         .height(80)
  56.         .color("#FF0000");
  57.       Text("加载中...")
  58.         .margin({ top: $r('app.float.vp_ten'), bottom: $r('app.float.vp_ten') });
  59.     }
  60.     .width(140)
  61.     .height(160)
  62.     .alignItems(HorizontalAlign.Center)
  63.     .justifyContent(FlexAlign.Center)
  64.     .borderRadius($r('app.float.vp_ten'))
  65.     .backgroundColor($r('app.color.white'))
  66.   }
  67. }
 

总结
 

后面继续补充网络请求其他方法：get、delete、上传、下载等

                

        
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/314107
推荐阅读
相关标签
Copyright ©  2003-2013 www.wpsshop.cn  版权所有，并保留所有权利。

  
闽ICP备14008679号