diff --git a/pages.json b/pages.json
index 9d3393309277445bf13627be41da806f51d80ae1..1ee6a3b95d4eca1df9db5af337bd47390f954b4f 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 0000000000000000000000000000000000000000..207fc4e103c357b39c25040f571e83a63e367131
--- /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 0000000000000000000000000000000000000000..425086c6b49206946ca17c2f47d8a4346b95e8bc
--- /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 56813a46ef11d9475d76ac4b932ed87b7a302527..f12e22c111bcac2db2d42741d4305225e88d5790 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',