feat: 补充 web 平台 mixin 示例

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",

pages/composition/mixins/mixins-web.test.js

+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

pages/composition/mixins/mixins-web.uvue

+<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

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',