From caaca36607d6a9ff6f2f731e0f13c8a675d23ba6 Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Wed, 24 Jan 2024 21:14:20 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85=20=20web=20=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0=20mixin=20=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                  | 10 ++++-
 pages/composition/mixins/mixins-web.test.js | 32 +++++++++++++
 pages/composition/mixins/mixins-web.uvue    | 50 +++++++++++++++++++++
 pages/tab-bar/options-api.uvue              | 14 +++---
 4 files changed, 100 insertions(+), 6 deletions(-)
 create mode 100644 pages/composition/mixins/mixins-web.test.js
 create mode 100644 pages/composition/mixins/mixins-web.uvue

diff --git a/pages.json b/pages.json
index 9d33933..1ee6a3b 100644
--- a/pages.json
+++ b/pages.json
@@ -335,7 +335,7 @@
         "navigationBarTitleText": "render function"
       }
     },
-    // #ifdef APP
+    // #ifdef APP
     {
       "path": "pages/composition/mixins/mixins",
       "style": {
@@ -348,6 +348,14 @@
         "navigationBarTitleText": "mixins-page-2"
       }
     },
+    // #endif
+    // #ifdef WEB
+    {
+      "path": "pages/composition/mixins/mixins-web",
+      "style": {
+        "navigationBarTitleText": "mixins"
+      }
+    },
     // #endif
     {
       "path": "pages/composition/provide/provide",
diff --git a/pages/composition/mixins/mixins-web.test.js b/pages/composition/mixins/mixins-web.test.js
new file mode 100644
index 0000000..207fc4e
--- /dev/null
+++ b/pages/composition/mixins/mixins-web.test.js
@@ -0,0 +1,32 @@
+const PAGE_PATH = '/pages/composition/mixins/mixins-web'
+let page
+
+describe('mixins', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('android')) {
+    // 该实例只针对 web 平台
+    it('android', async () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor('view')
+  })
+  // TODO: web 平台不支持 mixins 嵌套及对象字面量创建方式
+  // 暂时针对 web 平台只测试基本功能
+  it('basic', async () => {
+    const mixinProp = await page.$('#mixin-prop')
+    expect(await mixinProp.text()).toBe('mixinProp: 通过字面量定义非全局 mixin props')
+
+    const mixinDataMsg = await page.$('#mixin-data-msg')
+    expect(await mixinDataMsg.text()).toBe('mixinDataMsg: 通过字面量定义非全局 mixin data')
+
+    const mixinOnloadMsg = await page.$('#mixin-onload-msg')
+    expect(await mixinOnloadMsg.text()).toBe('mixinOnloadMsg: mixin onLoad msg in onLoad')
+
+    const mixinComputed = await page.$('#mixin-computed')
+    expect(await mixinComputed.text()).toBe(
+      'mixinComputed: 通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg: mixin onLoad msg in onLoad')
+  })
+})
\ No newline at end of file
diff --git a/pages/composition/mixins/mixins-web.uvue b/pages/composition/mixins/mixins-web.uvue
new file mode 100644
index 0000000..425086c
--- /dev/null
+++ b/pages/composition/mixins/mixins-web.uvue
@@ -0,0 +1,50 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view style="flex: 1">
+  <!-- #endif -->
+    <view class="page">
+      <text id="mixin-prop" class="uni-common-mb">mixinProp: {{mixinProp}}</text>
+      <text id="mixin-data-msg" class="uni-common-mb">mixinDataMsg: {{mixinDataMsg}}</text>
+      <text id="mixin-onload-msg" class="uni-common-mb">mixinOnloadMsg: {{mixinOnloadMsg}}</text>
+      <text id="mixin-computed" class="uni-common-mb">mixinComputed: {{mixinComputed}}</text>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script lang="uts">
+  export default {
+    mixins: [defineMixin({
+      props: {
+        mixinProp: {
+          type: String,
+          default: '通过字面量定义非全局 mixin props'
+        }
+      },
+      data() {
+        return {
+          mixinDataMsg: '通过字面量定义非全局 mixin data',
+          mixinOnloadMsg: ''
+        }
+      },
+      computed: {
+        mixinComputed() : string {
+          const res = `通过字面量定义非全局 mixin computed, 更新后的 mixinOnloadMsg: ${this.mixinOnloadMsg}`
+          console.log(res)
+          return res
+        }
+      },
+      onLoad() {
+        this.mixinOnloadMsg = 'mixin onLoad msg in onLoad'
+      },
+      methods: {
+        mixinMethod() : string {
+          const res = '通过字面量定义非全局 mixin method'
+          console.log(res)
+          return res
+        }
+      },
+    })]
+  }
+</script>
\ No newline at end of file
diff --git a/pages/tab-bar/options-api.uvue b/pages/tab-bar/options-api.uvue
index 56813a4..f12e22c 100644
--- a/pages/tab-bar/options-api.uvue
+++ b/pages/tab-bar/options-api.uvue
@@ -401,16 +401,20 @@
                 url: 'inject',
                 enable: true,
               },
+              // #ifdef APP
               {
                 name: 'mixins',
                 url: 'mixins',
-                // #ifdef APP
                 enable: true,
-                // #endif
-                // #ifdef WEB
-                enable: false,
-                // #endif
               },
+              // #endif
+              // #ifdef WEB
+              {
+                name: 'mixins',
+                url: 'mixins/mixins-web',
+                enable: true,
+              },
+              // #endif
               {
                 name: 'extends',
                 url: 'extends',
-- 
GitLab