增加mvvm架构

app/src/main/ets/pages/mvvm/HomePage.ets

@@ -0,0 +1,202 @@
+import { Emitter, EmitterItem } from '@devwiki/base';
+import { Toast } from '../../utils/Toast';
+
+@Entry
+@Component
+export struct HomePage {
+
+  @Provide tv1ViewModel: TabView1ViewModel = new TabView1ViewModel();
+  @Provide tv2ViewModel: TabView2ViewModel = new TabView2ViewModel();
+
+  aboutToAppear(): void {
+    this.tv1ViewModel.onCountChanged = (count: number) => {
+      Toast.showToast(`view1 count changed to:${count}`)
+    }
+    this.tv2ViewModel.onCountChanged = (count: number) => {
+      Toast.showToast(`view2 count changed to:${count}`)
+    }
+  }
+
+  onPageShow(): void {
+    this.tv1ViewModel.onPageShow();
+    this.tv2ViewModel.onPageShow();
+  }
+
+  onPageHide(): void {
+    this.tv1ViewModel.onPageHide();
+    this.tv2ViewModel.onPageHide();
+  }
+
+  build() {
+    Tabs() {
+      TabContent(){
+        TabView1();
+      }.tabBar("View1");
+      TabContent() {
+        TabView2();
+      }.tabBar("View2")
+    }.onChange((index) => {
+      if (index == 0) {
+        this.tv1ViewModel.onViewShow();
+        this.tv2ViewModel.onViewHide();
+      } else {
+        this.tv1ViewModel.onViewHide();
+        this.tv2ViewModel.onViewShow();
+      }
+    })
+  }
+}
+
+
+@Component
+struct TabView1 {
+  @Consume tv1ViewModel: TabView1ViewModel;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceAround,
+      alignItems: ItemAlign.Center,
+      direction: FlexDirection.Column
+    }){
+      Scroll(){
+        Text(this.tv1ViewModel.status);
+      }
+
+      Text(this.tv1ViewModel.count.toString())
+
+      Row() {
+        Button("Count").onClick(() =>{
+          this.tv1ViewModel.onCountClicked();
+        })
+
+        Button("Send").onClick(() =>{
+          this.tv1ViewModel.onSendClicked();
+        })
+      }
+    }
+  }
+}
+
+class TabView1ViewModel {
+  count: number = 0
+  status: string = 'view1';
+  onCountChanged?: (count: number) => void;
+  eventItem?: EmitterItem;
+
+  subscribeEvent() {
+    this.eventItem = Emitter.getInstance().on(TabViewKey.TabView2Message, (message: string) => {
+      Toast.showToast(`view 1 reveive view 2 message:${message}}`)
+    });
+  }
+
+  unsubscribeEvent() {
+    if (this.eventItem) {
+      Emitter.getInstance().off(this.eventItem)
+    }
+  }
+
+  onCountClicked() {
+    this.count++;
+    this.onCountChanged?.(this.count);
+  }
+
+  onSendClicked() {
+    Emitter.getInstance().emmit(TabViewKey.TabView1Message, 'tab view 1 message')
+  }
+
+  onPageShow() {
+    this.status = this.status + "\nPageShow"
+    this.subscribeEvent();
+  }
+
+  onPageHide() {
+    this.unsubscribeEvent();
+  }
+
+  onViewShow() {
+    this.status =  this.status + "\nView1Show"
+  }
+
+  onViewHide() {
+    this.status =  this.status + "\nView1Hide"
+  }
+}
+
+@Component
+struct TabView2 {
+  @Consume tv2ViewModel: TabView2ViewModel;
+
+  build() {
+    Flex({
+      justifyContent: FlexAlign.SpaceAround,
+      alignItems: ItemAlign.Center,
+      direction: FlexDirection.Column
+    }){
+      Scroll(){
+        Text(this.tv2ViewModel.status);
+      }
+
+      Text(this.tv2ViewModel.count.toString())
+
+      Row() {
+        Button("Count").onClick(() =>{
+          this.tv2ViewModel.onCountClicked();
+        })
+
+        Button("Send").onClick(() =>{
+          this.tv2ViewModel.onSendClicked();
+        })
+      }
+    }
+  }
+}
+
+class TabView2ViewModel {
+  count: number = 0
+  status: string = 'view2';
+  onCountChanged?: (count: number) => void;
+  eventItem?: EmitterItem;
+
+  subscribeEvent() {
+    this.eventItem = Emitter.getInstance().on(TabViewKey.TabView1Message, (message: string) => {
+      Toast.showToast(`view2 reveive view 1 message:${message}}`)
+    });
+  }
+
+  unsubscribeEvent() {
+    if (this.eventItem) {
+      Emitter.getInstance().off(this.eventItem)
+    }
+  }
+
+  onCountClicked() {
+    this.count++;
+    this.onCountChanged?.(this.count);
+  }
+
+  onSendClicked() {
+    Emitter.getInstance().emmit(TabViewKey.TabView2Message, 'tab view 2 message')
+  }
+
+  onPageShow() {
+    this.status =  this.status + "\nPage2Show"
+    this.subscribeEvent();
+  }
+
+  onPageHide() {
+    this.unsubscribeEvent();
+  }
+
+  onViewShow() {
+    this.status =  this.status + "\nView2Show"
+  }
+  onViewHide() {
+    this.status =  this.status + "\nView2Hide"
+  }
+}
+
+
+export class TabViewKey {
+  public static readonly TabView1Message: string = "tab_view1_message";
+  public static readonly TabView2Message: string = "tab_view2_message";
+}

app/src/main/ets/pages/net/RestAPIPage.ets

@@ -8,13 +8,17 @@ export struct RestAPIPage {
   @State viewModel: RestAPIViewModel = new RestAPIViewModel();
 
   build() {
-    Column() {
-      Button("Get").onClick(() =>{
-        this.viewModel.getServerVersion();
-      })
+    Row() {
+      Flex({
+        justifyContent: FlexAlign.SpaceBetween
+      }) {
+        Button("Get").onClick(() =>{
+          this.viewModel.getServerVersion();
+        })
 
-      Text(this.viewModel.serverVersion);
-    }.justifyContent(FlexAlign.Start).alignItems(HorizontalAlign.Center)
+        Text(this.viewModel.serverVersion).backgroundColor(Color.Blue).flexGrow(1);
+      }
+    }.justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Center).width('80%').backgroundColor(Color.Green)
   }
 }
 
@@ -23,8 +27,8 @@ class RestAPIViewModel {
 
   serverVersion: string = '123'
 
-  getServerVersion() {
-    axios({
+  async getServerVersion() {
+    await axios({
       method: "post",
       url: 'https://music.devwiki.net/rest/ping.view?v=1.16.1&c=myapp&f=json'
     }).then((response: AxiosResponse) => {

app/src/main/ets/utils/Toast.ets

@@ -0,0 +1,11 @@
+import promptAction from '@ohos.promptAction';
+
+export class Toast {
+  static showToast(message: ResourceStr) {
+    promptAction.showToast({
+      message: message,
+      duration: 2000,
+      bottom: "50%"
+    });
+  }
+}

app/src/main/resources/base/profile/main_pages.json

@@ -1,15 +1,29 @@
 {
   "src": [
     "pages/Index",
-    "pages/web/WebPage",
-    "pages/web/WebDialogPage",
+
+    "pages/animation/CompTransitionPage",
+
+    "pages/component/InputPage",
+    "pages/component/SVGPage",
+    "pages/component/TextPage",
+
     "pages/layout/LinearLayoutPage",
     "pages/layout/RelativeContainerPage",
-    "pages/component/InputPage",
-    "pages/animation/CompTransitionPage",
+
     "pages/media/AVPlayerPage",
-    "pages/system/SchemePage",
+    "pages/media/AudioPlayerPage",
+    "pages/media/PhotoPage",
+
+    "pages/mvvm/HomePage",
+
     "pages/net/TcpSocketPage",
-    "pages/net/RestAPIPage"
+    "pages/net/RestAPIPage",
+
+    "pages/system/SchemePage",
+    "pages/system/TimerPage",
+
+    "pages/web/WebPage",
+    "pages/web/WebDialogPage"
   ]
 }

readme.md

@@ -24,6 +24,8 @@
 
 ## app模块
 
+- [MVVM架构](/app/src/main/ets/pages/mvvm/HomePage.ets)
+
 - [web功能](app/src/main/ets/pages/web)
 - [布局学习](app/src/main/ets/pages/layout)
   - [线性布局](app/src/main/ets/pages/layout/LinearLayoutPage.ets)