From ec5db4532ff40f51dad21424b416e4048d6a6e9e Mon Sep 17 00:00:00 2001
From: zhenyuWang <13641039885@163.com>
Date: Sun, 30 Jun 2024 11:42:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E8=B0=83=E6=95=B4=E9=83=A8?=
 =?UTF-8?q?=E5=88=86=E7=A4=BA=E4=BE=8B=E9=A1=B5=E9=9D=A2=E8=B7=AF=E5=BE=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |  24 +-
 .../cloud-storage.uvue}                       |   0
 .../create-inner-audio-context.uvue           | 238 +++++++++++++
 .../inner-audio-format.uvue                   | 134 ++++++++
 .../inner-audio-path.uvue                     |  99 ++++++
 .../inner-audio.test.js                       |  73 ++++
 .../create-selector-query.uvue}               |   0
 .../nodes-info-child.uvue                     |   0
 .../nodes-info.test.js                        |   0
 .../{ => unicloud}/call-function.test.js      |   0
 .../cloud-function.uvue}                      |   0
 .../cloud-object.uvue}                        |   0
 .../API/unicloud/unicloud/cloud-storage.uvue  |  92 +++++
 pages/API/unicloud/unicloud/database.uvue     | 322 ++++++++++++++++++
 pages/component/canvas/{ => canvas}/ball.uvue |   0
 .../unicloud-db/unicloud-db/datacom.uvue      |  70 ++++
 .../unicloud-db/mixin-datacom.test.js         |  20 ++
 .../unicloud-db/mixin-datacom.uvue            |  27 ++
 readme.md                                     |  16 +-
 19 files changed, 1100 insertions(+), 15 deletions(-)
 rename pages/API/{unicloud-file-api/unicloud-file-api.uvue => cloud-storage/cloud-storage.uvue} (100%)
 create mode 100644 pages/API/create-inner-audio-context/create-inner-audio-context.uvue
 create mode 100644 pages/API/create-inner-audio-context/inner-audio-format.uvue
 create mode 100644 pages/API/create-inner-audio-context/inner-audio-path.uvue
 create mode 100644 pages/API/create-inner-audio-context/inner-audio.test.js
 rename pages/API/{nodes-info/nodes-info.uvue => create-selector-query/create-selector-query.uvue} (100%)
 rename pages/API/{nodes-info => create-selector-query}/nodes-info-child.uvue (100%)
 rename pages/API/{nodes-info => create-selector-query}/nodes-info.test.js (100%)
 rename pages/API/unicloud/{ => unicloud}/call-function.test.js (100%)
 rename pages/API/unicloud/{call-function.uvue => unicloud/cloud-function.uvue} (100%)
 rename pages/API/unicloud/{import-object.uvue => unicloud/cloud-object.uvue} (100%)
 create mode 100644 pages/API/unicloud/unicloud/cloud-storage.uvue
 create mode 100644 pages/API/unicloud/unicloud/database.uvue
 rename pages/component/canvas/{ => canvas}/ball.uvue (100%)
 create mode 100644 pages/component/unicloud-db/unicloud-db/datacom.uvue
 create mode 100644 pages/component/unicloud-db/unicloud-db/mixin-datacom.test.js
 create mode 100644 pages/component/unicloud-db/unicloud-db/mixin-datacom.uvue

diff --git a/pages.json b/pages.json
index 14a96dd9..80ad54f8 100644
--- a/pages.json
+++ b/pages.json
@@ -308,7 +308,7 @@
       }
     },
     {
-      "path": "pages/component/datacom/datacom",
+      "path": "pages/component/unicloud-db/unicloud-db/mixin-datacom",
       "style": {
         "navigationBarTitleText": "mixinDatacom"
       }
@@ -431,7 +431,7 @@
       }
     },
     {
-      "path" : "pages/component/canvas/ball",
+      "path" : "pages/component/canvas/canvas/ball",
       "style" :
       {
         "navigationBarTitleText" : "ball"
@@ -554,7 +554,7 @@
       }
     },
     {
-      "path": "pages/API/nodes-info/nodes-info",
+      "path": "pages/API/create-selector-query/create-selector-query",
       "style": {
         "navigationBarTitleText": "查询节点信息的对象"
       }
@@ -671,15 +671,15 @@
       }
     },
     {
-      "path": "pages/API/unicloud/call-function",
+      "path": "pages/API/unicloud/unicloud/cloud-function",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "云函数"
       }
     },
     {
-      "path": "pages/API/unicloud/import-object",
+      "path": "pages/API/unicloud/unicloud/cloud-object",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "云对象"
       }
     },
     {
@@ -806,15 +806,15 @@
       }
     },
     {
-      "path": "pages/API/unicloud-file-api/unicloud-file-api",
+      "path": "pages/API/unicloud/unicloud/cloud-storage",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "cloud storage"
       }
     },
     {
-      "path": "pages/API/unicloud-database/unicloud-database",
+      "path": "pages/API/unicloud/unicloud/database",
       "style": {
-        "navigationBarTitleText": ""
+        "navigationBarTitleText": "database"
       }
     },
     {
@@ -916,7 +916,7 @@
       }
     },
     {
-      "path" : "pages/API/inner-audio/inner-audio",
+      "path" : "pages/API/create-inner-audio-context/create-inner-audio-context",
       "style" :
       {
         "navigationBarTitleText" : "inner-audio"
diff --git a/pages/API/unicloud-file-api/unicloud-file-api.uvue b/pages/API/cloud-storage/cloud-storage.uvue
similarity index 100%
rename from pages/API/unicloud-file-api/unicloud-file-api.uvue
rename to pages/API/cloud-storage/cloud-storage.uvue
diff --git a/pages/API/create-inner-audio-context/create-inner-audio-context.uvue b/pages/API/create-inner-audio-context/create-inner-audio-context.uvue
new file mode 100644
index 00000000..1f3b7e00
--- /dev/null
+++ b/pages/API/create-inner-audio-context/create-inner-audio-context.uvue
@@ -0,0 +1,238 @@
+<template>
+  <view class="uni-padding-wrap">
+    <page-head title="audio"></page-head>
+    <view class="uni-common-mt">
+      <slider :value="position" :min="0" :max="duration" @changing="onchanging" @change="onchange"></slider>
+    </view>
+    <view class="uni-title">
+      <text class="uni-title-text">属性示例</text>
+    </View>
+    <text class="uni-text-box uni-common-mt">当前音频播放位置（保留小数点后 6 位）：{{currentTime}} s</text>
+    <text class="uni-text-box">音频的长度（单位:s）：{{duration}} s</text>
+    <text class="uni-text-box">当前是否停止状态：{{isPaused}}</text>
+    <text class="uni-text-box">音频缓冲的时间点：{{buffered}}</text>
+    <text class="uni-text-box">当前音量：{{volume}}</text>
+    <!-- 设置音量无效 -->
+    <!-- <button plain :disabled="volume == 1" @click="increaseVolume">增加音量</button>
+    <button plain :disabled="volume == 0" @click="decreaseVolume">减少音量</button> -->
+
+    <text class="uni-subtitle-text uni-title">开始播放的位置（单位：s）</text>
+    <input :value="startTime" type="number" placeholder="开始播放的位置（单位：s）" class="uni-input"
+      @input="startTimeInput"></input>
+    <boolean-data :defaultValue="false" title="是否自动开始播放" @change="setAutoplay"></boolean-data>
+    <boolean-data :defaultValue="false" title="是否循环播放" @change="setLoop"></boolean-data>
+    <view class="uni-title">
+      <text class="uni-title-text">方法示例</text>
+    </View>
+    <button :disabled="isPlaying" type="primary" @click="play" class="uni-btn">播放</button>
+    <button :disabled="!isPlaying" type="primary" @click="pause" class="uni-btn">暂停</button>
+    <button :disabled="!isPlaying && !isPaused" type="primary" @click="stop" class="uni-btn">停止</button>
+    <button type="primary" @click="onchange(20)" class="uni-btn">跳转到指定位置20</button>
+
+    <view class="uni-title">
+      <text class="uni-title-text">格式/路径示例</text>
+    </View>
+    <navigator url="/pages/API/inner-audio/inner-audio-format" class="uni-btn">
+      <button type="primary" @click="pause">音频格式示例</button>
+    </navigator>
+    <navigator url="/pages/API/inner-audio/inner-audio-path" class="uni-btn uni-common-mb">
+      <button type="primary" @click="pause">音频路径示例</button>
+    </navigator>
+  </view>
+</template>
+<script lang="uts">
+  const audioUrl = 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3'
+  export default {
+    data() {
+      return {
+        title: "innerAudioContext",
+        currentTime: 0,
+        duration: 100,
+        startTime: 0,
+        buffered: 0,
+        volume: 0.5,
+        isCanplay: false,
+        isPlaying: false,
+        isPaused: true,
+        isPlayEnd: false,
+        _isChanging: false,
+        _audioContext: null as InnerAudioContext | null,
+        // 自动化测试
+        onSeekingTest:false,
+        onSeekedTest:false,
+        onWaitingTest:false
+      }
+    },
+    computed: {
+      position() {
+        return this.isPlayEnd ? 0 : this.currentTime;
+      },
+    },
+    onReady() {
+      this._audioContext = uni.createInnerAudioContext();
+      this._audioContext!.src = audioUrl;
+      this.volume = this._audioContext!.volume;
+      this.onCanplay()
+    },
+    onUnload() {
+      if (this._audioContext != null && this.isPlaying) {
+        this.stop();
+        this._audioContext!.destroy()
+      }
+    },
+    methods: {
+      onCanplay() {
+        this._audioContext!.onCanplay(() => {
+          console.log('音频进入可以播放状态事件');
+          this.isCanplay = true;
+          // 当音频可以播放时，获取缓冲信息
+          this.buffered = this._audioContext!.buffered;
+          this.duration = this._audioContext!.duration || 0;
+        });
+      },
+      onchanging() {
+        this._isChanging = true;
+      },
+      onchange(e) {
+        console.log(e, 'e');
+        let pos = typeof e === "number" ? e : e.detail.value;
+        this._audioContext!.seek(pos);
+        this.onSeeking()
+        this.onSeeked()
+        this._isChanging = false;
+      },
+      startTimeInput(e : InputEvent) {
+        let startTimeValue = Number(e.detail.value)
+        this._audioContext!.startTime = startTimeValue;
+        this.onchange(startTimeValue)
+      },
+      setAutoplay() {
+        this._audioContext!.autoplay = !this._audioContext!.autoplay;
+        console.log(this._audioContext!.autoplay, 'autoplay');
+      },
+      setLoop() {
+        this._audioContext!.loop = !this._audioContext!.loop;
+        console.log(this._audioContext!.loop, 'loop');
+      },
+      play() {
+        if (!this.isCanplay) {
+          uni.showToast({
+            title: '音频未进入可以播放状态，请稍后再试'
+          });
+          return;
+        }
+        this.isPlaying = true;
+        this._audioContext!.play();
+        this.isPlayEnd = false;
+        if (this._audioContext!.startTime > 0) {
+          this.onchange(this._audioContext!.startTime)
+        }
+        this._audioContext!.onPlay(() => {
+          this.isPaused = false;
+          console.log('开始播放',this.isPaused);
+        });
+        this.onTimeUpdate()
+        this.onWaiting()
+        this.onError()
+        this.onEnded()
+      },
+      onSeeking() {
+        this._audioContext!.onSeeking(() => {
+          console.log('音频进行 seek 操作事件');
+          this.onSeekingTest = true
+        });
+      },
+      onSeeked() {
+        this._audioContext!.onSeeked(() => {
+          console.log('音频完成 seek 操作事件');
+          this.onSeekedTest = true
+        });
+      },
+      onWaiting() {
+        this._audioContext!.onWaiting(() => {
+          console.log('音频加载中事件');
+          this.onWaitingTest = true
+        });
+      },
+      onTimeUpdate() {
+        this._audioContext!.onTimeUpdate(() => {
+          // console.log('onTimeUpdate:音频播放进度更新事件,currentTime',this._audioContext!.currentTime);
+          if (this._isChanging === true) { return; }
+          this.currentTime = this._audioContext!.currentTime || 0;
+          if (this.currentTime > this.buffered) {
+            console.log('缓冲不足');
+          }
+        });
+      },
+      increaseVolume() {
+        this.volume = Math.min(this.volume + 0.1, 1);
+        this.volume = parseFloat(this.volume.toFixed(1));
+        console.log('增加音量', this.volume);
+      },
+      decreaseVolume() {
+        this.volume = Math.max(this.volume - 0.1, 0);
+        this.volume = parseFloat(this.volume.toFixed(1));
+        console.log('减少音量', this.volume);
+      },
+      onEnded() {
+        this._audioContext!.onEnded(() => {
+          console.log('播放结束');
+          this.currentTime = 0;
+          this.startTime = 0
+          this.isPlaying = false;
+          this.isPaused = true;
+          this.isPlayEnd = true;
+        });
+      },
+      onError() {
+        this._audioContext!.onError((err) => {
+          console.log('err', err);
+          this.isPlaying = false;
+          this.isPaused = true;
+        });
+      },
+      pause() {
+        this._audioContext!.pause();
+        this._audioContext!.onPause(() => {
+          console.log('音频暂停事件');
+          this.isPaused = true;
+        });
+        this.isPlaying = false;
+      },
+      stop() {
+        console.log('stop');
+        this._audioContext!.stop();
+        this._audioContext!.onStop(() => {
+          // 第一次点停止时，不触发
+          this.isPaused = true;
+          console.log('音频停止事件');
+        });
+        this.isPlaying = false;
+        console.log('stop',this.isPaused);
+      }
+    }
+  }
+</script>
+<style>
+  .play-time-area {
+    display: flex;
+    flex-direction: row;
+    margin-top: 20px;
+  }
+
+  .duration {
+    margin-left: auto;
+  }
+
+  .play-button-area {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin: 50px 0;
+  }
+
+  .icon-play {
+    width: 60px;
+    height: 60px;
+  }
+</style>
diff --git a/pages/API/create-inner-audio-context/inner-audio-format.uvue b/pages/API/create-inner-audio-context/inner-audio-format.uvue
new file mode 100644
index 00000000..9eec12ab
--- /dev/null
+++ b/pages/API/create-inner-audio-context/inner-audio-format.uvue
@@ -0,0 +1,134 @@
+<template>
+  <page-head :title="title"></page-head>
+  <view class="uni-padding-wrap uni-common-mt">
+    <view class="uni-title">
+      <text class="uni-title-text">支持的音频格式示例</text>
+    </view>
+    <view class="formats" v-for="(item,index) in supportFormats" :key="index">
+      <text class="uni-subtitle-text">{{item.format}}</text>
+      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
+    </view>
+
+    <view class="uni-title">
+      <text class="uni-title-text">不支持的音频格式</text>
+    </view>
+    <view class="formats" v-for="(item,index) in notSupportFormats" :key="index">
+      <text class="uni-subtitle-text">{{item.format}}</text>
+      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+  type AudioFormat = {
+    format : string
+    src : string
+  }
+  export default {
+    data() {
+      return {
+        title: 'audio-format',
+        playIndex:0,
+        isPlaying: false,
+        _audioContext: null as InnerAudioContext | null,
+        supportFormats: [
+          {
+            format: 'mp3',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
+          },
+          {
+            format: 'mp4',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp4'
+          },
+          {
+            format: 'm4a',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.m4a'
+          },
+          {
+            format: 'aac',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aac'
+          },
+          {
+            format: 'flac',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.flac'
+          },
+
+          {
+            format: 'ogg',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.ogg'
+          },
+          {
+            format: 'wav',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wav'
+          },
+        ] as Array<AudioFormat>,
+        notSupportFormats:[
+          {
+            format: 'wma',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wma'
+          },
+          {
+            format: 'aiff',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.aiff'
+          },
+          {
+            format: 'caf',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.caf'
+          },
+          {
+            format: '错误格式',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.wmaa'
+          },
+        ] as Array<AudioFormat>
+      }
+    },
+    onReady() {
+      this._audioContext = uni.createInnerAudioContext();
+    },
+    onUnload() {
+    	if (this._audioContext != null) {
+        this.pause();
+    		this._audioContext!.destroy()
+    	}
+    },
+    methods: {
+      pause() {
+      	this._audioContext!.pause();
+      	this.isPlaying = false;
+      },
+      play(audioUrl,index){
+        // console.log(index,audioUrl);
+        if (this.isPlaying && this.playIndex == index) {
+        	this.pause();
+        	return;
+        }
+        this.playIndex = index
+        this._audioContext!.src = audioUrl;
+        this._audioContext!.play();
+        this.isPlaying = true;
+        this._audioContext!.onPlay(() => {
+        	console.log('开始播放');
+        });
+        this._audioContext!.onEnded(() => {
+          console.log('播放结束');
+        	this.isPlaying = false;
+        });
+        this._audioContext!.onError((err) => {
+          this.isPlaying = false;
+        	console.log('err',err);
+        });
+      },
+    },
+  }
+</script>
+
+<style>
+  .formats{
+    align-items: center;
+  }
+  .icon-play {
+  	width: 60px;
+  	height: 60px;
+    margin: 10px;
+  }
+</style>
diff --git a/pages/API/create-inner-audio-context/inner-audio-path.uvue b/pages/API/create-inner-audio-context/inner-audio-path.uvue
new file mode 100644
index 00000000..3b9ad2ae
--- /dev/null
+++ b/pages/API/create-inner-audio-context/inner-audio-path.uvue
@@ -0,0 +1,99 @@
+<template>
+  <page-head :title="title"></page-head>
+  <view class="uni-padding-wrap uni-common-mt">
+    <view class="uni-title">
+      <text class="uni-title-text">音频路径示例</text>
+    </view>
+    <view class="formats" v-for="(item,index) in supportPaths" :key="index">
+      <text class="uni-subtitle-text">{{item.description}}</text>
+      <image class="icon-play" :src="(isPlaying && playIndex==index)?'/static/pause.png':'/static/play.png'" @click="play(item.src,index)"></image>
+    </view>
+  </view>
+</template>
+
+<script>
+  type AudioPath = {
+    description : string
+    src : string
+  }
+  export default {
+    data() {
+      return {
+        title: 'audio-path',
+        playIndex:0,
+        isPlaying: false,
+        _audioContext: null as InnerAudioContext | null,
+        supportPaths: [
+          {
+            description: '本地路径：/static方式',
+            src: '/static/test-audio/ForElise.mp3'
+          },
+          {
+            description: '本地路径：../static/',
+            src: '../../../static/test-audio/ForElise.mp3'
+          },
+          {
+            description: '网络路径',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/ForElise.mp3'
+          },
+          {
+            description: '不存在的音频',
+            src: 'https://web-ext-storage.dcloud.net.cn/uni-app-x/audio/invalid_url.mp3'
+          },
+          {
+            description: '错误路径',
+            src: '../static/test-audio/ForElise.mp3'
+          },
+        ] as Array<AudioPath>
+      }
+    },
+    onReady() {
+      this._audioContext = uni.createInnerAudioContext();
+    },
+    onUnload() {
+    	if (this._audioContext != null) {
+        this.pause();
+    		this._audioContext!.destroy()
+    	}
+    },
+    methods: {
+      pause() {
+      	this._audioContext!.pause();
+      	this.isPlaying = false;
+      },
+      play(audioUrl,index){
+        // console.log(index,audioUrl);
+        if (this.isPlaying && this.playIndex == index) {
+        	this.pause();
+        	return;
+        }
+        this.playIndex = index
+        this._audioContext!.src = audioUrl;
+        this._audioContext!.play();
+        this.isPlaying = true;
+        this._audioContext!.onPlay(() => {
+        	console.log('开始播放');
+        });
+        this._audioContext!.onEnded(() => {
+          console.log('播放结束');
+        	this.isPlaying = false;
+        });
+        this._audioContext!.onError((err) => {
+          this.isPlaying = false;
+        	console.log('err',err);
+        });
+      }
+    }
+  }
+</script>
+
+<style>
+  .formats{
+    align-items: center;
+  }
+  .icon-play {
+  	width: 60px;
+  	height: 60px;
+    margin: 10px;
+  }
+</style>
diff --git a/pages/API/create-inner-audio-context/inner-audio.test.js b/pages/API/create-inner-audio-context/inner-audio.test.js
new file mode 100644
index 00000000..92389d63
--- /dev/null
+++ b/pages/API/create-inner-audio-context/inner-audio.test.js
@@ -0,0 +1,73 @@
+describe('inner-audio', () => {
+  if (!process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('app', () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  beforeAll(async () => {
+    page = await program.reLaunch('/pages/API/inner-audio/inner-audio')
+    await page.waitFor('view');
+  });
+
+  function getData(key = '') {
+    return new Promise(async (resolve, reject) => {
+      const data = await page.data()
+      resolve(key ? data[key] : data)
+    })
+  }
+
+  it('onCanplay',async()=>{
+    await page.waitFor(1000)
+    await page.waitFor(async()=>{
+      return await getData('isCanplay')
+    })
+    expect(await getData('buffered')).toBeGreaterThan(0)
+  })
+
+  it('play-onPlay-onTimeUpdate', async () => {
+    await page.callMethod('play')
+    await page.waitFor(3000);
+    expect(await getData('isPlaying')).toBeTruthy()
+    console.log("duration：",await getData('duration'),"currentTime：",await getData('currentTime'))
+    expect(await getData('duration')).toBeCloseTo(175.109, 0);
+    // console.log("isPaused",await getData('isPaused'))
+    // expect(await getData('currentTime')).toBeGreaterThan(0);
+    // expect(await getData('isPaused')).toBeFalsy();
+  });
+
+  it('seek-onSeeking-onSeeked', async () => {
+    await page.callMethod('onchange',20)
+    await page.waitFor(500);
+    expect(await getData('onSeekingTest')).toBeTruthy();
+    // expect(await getData('onWaitingTest')).toBeTruthy();
+    expect(await getData('onSeekedTest')).toBeTruthy();
+  });
+
+  it('pause-onPause', async () => {
+    await page.callMethod('pause')
+    await page.waitFor(500);
+    expect(await getData('isPlaying')).toBeFalsy()
+    // expect(await getData('isPaused')).toBeTruthy();
+  });
+
+  it('stop-onStop', async () => {
+    await page.callMethod('play')
+    await page.waitFor(2000);
+    // 第一次点停止时，不触发onStop事件
+    await page.callMethod('stop')
+    await page.callMethod('stop')
+    await page.waitFor(1000);
+    expect(await getData('isPlaying')).toBeFalsy()
+    // expect(await getData('isPaused')).toBeTruthy();
+  });
+
+  it('onEnded', async () => {
+    await page.callMethod('onchange',173)
+    await page.waitFor(500);
+    await page.callMethod('play')
+    await page.waitFor(3000);
+    // expect(await getData('isPlayEnd')).toBeTruthy();
+  });
+
+});
diff --git a/pages/API/nodes-info/nodes-info.uvue b/pages/API/create-selector-query/create-selector-query.uvue
similarity index 100%
rename from pages/API/nodes-info/nodes-info.uvue
rename to pages/API/create-selector-query/create-selector-query.uvue
diff --git a/pages/API/nodes-info/nodes-info-child.uvue b/pages/API/create-selector-query/nodes-info-child.uvue
similarity index 100%
rename from pages/API/nodes-info/nodes-info-child.uvue
rename to pages/API/create-selector-query/nodes-info-child.uvue
diff --git a/pages/API/nodes-info/nodes-info.test.js b/pages/API/create-selector-query/nodes-info.test.js
similarity index 100%
rename from pages/API/nodes-info/nodes-info.test.js
rename to pages/API/create-selector-query/nodes-info.test.js
diff --git a/pages/API/unicloud/call-function.test.js b/pages/API/unicloud/unicloud/call-function.test.js
similarity index 100%
rename from pages/API/unicloud/call-function.test.js
rename to pages/API/unicloud/unicloud/call-function.test.js
diff --git a/pages/API/unicloud/call-function.uvue b/pages/API/unicloud/unicloud/cloud-function.uvue
similarity index 100%
rename from pages/API/unicloud/call-function.uvue
rename to pages/API/unicloud/unicloud/cloud-function.uvue
diff --git a/pages/API/unicloud/import-object.uvue b/pages/API/unicloud/unicloud/cloud-object.uvue
similarity index 100%
rename from pages/API/unicloud/import-object.uvue
rename to pages/API/unicloud/unicloud/cloud-object.uvue
diff --git a/pages/API/unicloud/unicloud/cloud-storage.uvue b/pages/API/unicloud/unicloud/cloud-storage.uvue
new file mode 100644
index 00000000..d6a32187
--- /dev/null
+++ b/pages/API/unicloud/unicloud/cloud-storage.uvue
@@ -0,0 +1,92 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page-scroll-view">
+  <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="uni-btn-v uni-common-mt">
+          <button type="primary" @click="uploadFile">选择文件上传</button>
+          <button type="primary" @click="chooseAndUploadFile">一个接口选择文件并上传</button>
+        </view>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        title: '云存储'
+      }
+    },
+    onLoad() {
+    },
+    onUnload() {
+    },
+    methods: {
+      uploadFile: function () {
+        uni.chooseImage({
+          count: 1,
+          success(res) : void {
+            uni.showLoading({
+              title: '上传中...'
+            })
+            const tempFilePath = res.tempFilePaths[0]
+            uniCloud.uploadFile({
+              filePath: tempFilePath,
+              cloudPath: 'test.jpg'
+            })
+              .then(function (res) {
+                uni.hideLoading()
+                console.log(res)
+                uni.showModal({
+                  content: '上传成功',
+                  showCancel: false
+                });
+              })
+              .catch(function (err : any | null) {
+                uni.hideLoading()
+                const error = err as UniCloudError
+                uni.showModal({
+                  content: '上传失败，' + error.errMsg,
+                  showCancel: false
+                });
+              })
+            // .finally((_: number) : void => {
+            //   uni.hideLoading()
+            // })
+          },
+          fail(err) : void {
+            console.error('chooseImage fail: ', err)
+          }
+        })
+      },
+      chooseAndUploadFile() {
+        uniCloud.chooseAndUploadFile({
+          type: 'image'
+        }).then(function (res) {
+            uni.hideLoading()
+            console.log(res)
+            uni.showModal({
+              content: '上传成功',
+              showCancel: false
+            });
+          })
+          .catch(function (err : any | null) {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            uni.showModal({
+              content: '上传失败，' + error.errMsg,
+              showCancel: false
+            });
+          })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/pages/API/unicloud/unicloud/database.uvue b/pages/API/unicloud/unicloud/database.uvue
new file mode 100644
index 00000000..f37730e2
--- /dev/null
+++ b/pages/API/unicloud/unicloud/database.uvue
@@ -0,0 +1,322 @@
+<template>
+  <!-- #ifdef APP -->
+  <scroll-view class="page-scroll-view">
+  <!-- #endif -->
+    <view>
+      <page-head :title="title"></page-head>
+      <view class="uni-padding-wrap uni-common-mt">
+        <view class="uni-btn-v uni-common-mt">
+          <button type="primary" @click="dbAdd">新增单条数据</button>
+          <button type="primary" @click="dbBatchAdd">新增多条数据</button>
+          <button type="primary" @click="dbUpdate">更新数据</button>
+          <button type="primary" @click="dbGet">where传字符串获取数据</button>
+          <button type="primary" @click="dbGetWithCommand">where传对象获取数据</button>
+          <button type="primary" @click="dbRemove">删除数据</button>
+          <button type="primary" @click="dbLookupInit">初始化联表查询数据</button>
+          <button type="primary" @click="dbLookup">联表查询</button>
+          <button type="primary" @click="dbMultiSend">合并查询查询</button>
+        </view>
+      </view>
+    </view>
+  <!-- #ifdef APP -->
+  </scroll-view>
+  <!-- #endif -->
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        title: 'ClientDB',
+        addId: '',
+        batchAddIds: [] as Array<string>,
+        batchAddinserted: 0,
+        updateUpdated: 0,
+        getData: [] as Array<UTSJSONObject>,
+        getWithCommandData: [] as Array<UTSJSONObject>,
+        removeDeleted: 0,
+        lookupData: [] as Array<UTSJSONObject>,
+        multiSendSuccessCount: 0,
+        isUniTest: false
+      }
+    },
+    computed: {
+      dataTag() : string {
+        return this.isUniTest ? 'default-tag' + Date.now() : 'default-tag'
+      }
+    },
+    methods: {
+      notify(content : string, title : string) {
+        if (!this.isUniTest) {
+          uni.showModal({
+            title,
+            content,
+            showCancel: false
+          })
+        } else {
+          console.log(title, content)
+        }
+      },
+      async dbAdd() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('type')
+          .add({
+            num: 1,
+            tag: this.dataTag,
+            date: new Date()
+          })
+          .then(res => {
+            uni.hideLoading()
+            console.log(res)
+            this.addId = res.id
+            this.notify(`新增成功，id: ${res.id}`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbBatchAdd() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('type')
+          .add([{
+            num: 2,
+            tag: this.dataTag,
+          }, {
+            num: 3,
+            tag: this.dataTag,
+          }])
+          .then((res) => {
+            uni.hideLoading()
+            console.log(res)
+            console.log('JSON.stringify(res.inserted)', JSON.stringify(res.inserted))
+            this.batchAddIds = res.ids
+            this.batchAddinserted = res.inserted
+            this.notify(`新增成功条数${res.inserted}, id列表: ${res.ids.join(',')}`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbGet() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('type')
+          .where(
+            `tag == "${this.dataTag}"`
+          )
+          .field('num, tag')
+          .orderBy('num desc')
+          .skip(1)
+          .limit(2)
+          .get()
+          .then(res => {
+            uni.hideLoading()
+            console.log(res)
+            this.getData = res.data
+            this.notify(`获取成功，取到了${res.data.length}条数据`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbGetWithCommand() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('type')
+          .where({
+            num: db.command.gt(1),
+            tag: this.dataTag
+          })
+          .field('num, tag')
+          .orderBy('num desc')
+          .skip(1)
+          .limit(2)
+          .get()
+          .then(res => {
+            uni.hideLoading()
+            console.log(res)
+            this.getWithCommandData = res.data
+            this.notify(`获取成功，取到了${res.data.length}条数据`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbUpdate() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('type')
+          .where(
+            `tag == "${this.dataTag}"`
+          )
+          .update({
+            num: 4
+          })
+          .then(res => {
+            uni.hideLoading()
+            console.log(res)
+            this.updateUpdated = res.updated
+            this.notify(`更新成功，更新了${res.updated}条数据`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbRemove() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('type')
+          .where(
+            `tag == "${this.dataTag}"`
+          )
+          .remove()
+          .then(res => {
+            uni.hideLoading()
+            console.log(res)
+            this.removeDeleted = res.deleted
+            this.notify(`删除成功，删掉了${res.deleted}条数据`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbLookupInit() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        await db.collection('local')
+          .where(`tag == "${this.dataTag}"`)
+          .remove()
+          .then(() : Promise<UniCloudDBRemoveResult> => {
+            return db.collection('foreign')
+              .where(`tag == "${this.dataTag}"`)
+              .remove()
+          })
+          .then(() : Promise<UniCloudDBBatchAddResult> => {
+            return db.collection('local')
+              .add([{
+                id: "local_1",
+                name: "local_1_name",
+                tag: this.dataTag,
+                foreign_id: "foreign_1"
+              }, {
+                id: "local_2",
+                name: "local_2_name",
+                tag: this.dataTag,
+                foreign_id: "foreign_2"
+              }])
+          })
+          .then(() : Promise<UniCloudDBBatchAddResult> => {
+            return db.collection('foreign')
+              .add([{
+                id: "foreign_1",
+                name: "foreign_1_name",
+                tag: this.dataTag
+              }, {
+                id: "foreign_2",
+                name: "foreign_2_name",
+                tag: this.dataTag
+              }])
+          })
+          .then((_) : void => {
+            uni.hideLoading()
+            this.notify('数据初始化成功', '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            console.error(err)
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbLookup() : Promise<void> {
+        uni.showLoading({
+          title: '加载中...'
+        })
+        const db = uniCloud.databaseForJQL()
+        const local = db.collection('local')
+          .where(`tag == "${this.dataTag}"`)
+          .getTemp()
+        const foreign = db.collection('foreign')
+          .where(`tag == "${this.dataTag}"`)
+          .getTemp()
+        await db.collection(local, foreign)
+          .get()
+          .then(res => {
+            uni.hideLoading()
+            console.log(res)
+            this.lookupData = res.data
+            this.notify(`联表查询成功，取到了${res.data.length}条数据`, '提示')
+          })
+          .catch((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            this.notify(error.errMsg, '错误')
+          })
+      },
+      async dbMultiSend() : Promise<void> {
+        const db = uniCloud.databaseForJQL()
+        const temp1 = db.collection('type')
+          .where(
+            'tag == "default-tag"'
+          ).getTemp()
+        const temp2 = db.collection('type')
+          .where(
+            'tag == "default-tag"'
+          ).getTemp()
+        await db.multiSend(temp1, temp2)
+          .then<void>(res => {
+            uni.hideLoading()
+            let successCount = 0
+            for (let i = 0; i < res.dataList.length; i++) {
+              const item = res.dataList[i]
+              if(item.errCode == 0) {
+                console.log(`第${i}个请求查询到${item.data!.length}条数据`)
+                successCount++
+              } else {
+                console.error(`第${i}个请求查询失败，错误信息：${item.data!.length}`)
+              }
+            }
+            this.multiSendSuccessCount = successCount
+            this.notify(`合并查询成功，成功查询的语句条数为：${successCount}`, '提示')
+          })
+          .catch<void>((err : any | null) => {
+            uni.hideLoading()
+            const error = err as UniCloudError
+            console.error(err)
+            this.notify(error.errMsg, '错误')
+          })
+      }
+    }
+  }
+</script>
+
+<style>
+</style>
diff --git a/pages/component/canvas/ball.uvue b/pages/component/canvas/canvas/ball.uvue
similarity index 100%
rename from pages/component/canvas/ball.uvue
rename to pages/component/canvas/canvas/ball.uvue
diff --git a/pages/component/unicloud-db/unicloud-db/datacom.uvue b/pages/component/unicloud-db/unicloud-db/datacom.uvue
new file mode 100644
index 00000000..d6392ff8
--- /dev/null
+++ b/pages/component/unicloud-db/unicloud-db/datacom.uvue
@@ -0,0 +1,70 @@
+<template>
+  <view>
+    <view v-if="mixinDatacomLoading">Loading...</view>
+    <view v-else-if="mixinDatacomError">
+      请求错误：{{mixinDatacomError}}
+    </view>
+    <view v-else="mixinDatacomResData.length>0">
+      <!-- 需要自行处理数据及相关UI展现 -->
+      <!-- {{mixinDatacomResData}} -->
+      <scroll-view class="list-view">
+        <view class="list-item" v-for="(item, _) in mixinDatacomResData">
+          <text>{{item}}</text>
+        </view>
+      </scroll-view>
+    </view>
+    <view v-if="!mixinDatacomLoading && mixinDatacomResData.length==0">
+      无数据
+    </view>
+  </view>
+</template>
+
+<script lang="uts">
+  export default {
+    mixins: [uniCloud.mixinDatacom],
+    data() {
+      return {
+      }
+    },
+    created() {
+      this.load()
+    },
+    methods: {
+      load() {
+        if (this.mixinDatacomLoading == true) {
+          return
+        }
+        this.mixinDatacomLoading = true
+
+        this.mixinDatacomGet(null).then((res: UniCloudDBGetResult) => {
+          const data = res.data
+          // const count = res.count
+          this.mixinDatacomResData = data
+        }).catch((err: any | null) => {
+          this.mixinDatacomError = err as UniCloudError
+        }).finally(() => {
+          this.mixinDatacomLoading = false
+        })
+      },
+      // 当组件属性发生变化时
+      onMixinDatacomPropsChange(needReset: boolean, changed: Array<string>) {
+        console.log(needReset, changed);
+        // needReset=true 需要重置已加载数据和分页信息，例如 collection，orderby
+        // changed，变化的属性名，类型为 Array，例如 ['collection', 'orderby']
+        // if (needReset) {
+        //   // 清空已加载的数据
+        //   this.mixinDatacomResData = []
+
+        //   // 重置分页数据，如果没有分页不需要处理
+        //   this.mixinDatacomPage.size = this.pageSize // 重置分页大小
+        //   this.mixinDatacomPage.current = 0 // 重置当前分页
+        //   this.mixinDatacomPage.count = 0 // 重置数据总数
+        // }
+      }
+    }
+  }
+</script>
+
+<style>
+
+</style>
diff --git a/pages/component/unicloud-db/unicloud-db/mixin-datacom.test.js b/pages/component/unicloud-db/unicloud-db/mixin-datacom.test.js
new file mode 100644
index 00000000..95a8804a
--- /dev/null
+++ b/pages/component/unicloud-db/unicloud-db/mixin-datacom.test.js
@@ -0,0 +1,20 @@
+const PAGE_PATH = '/pages/component/mixin-datacom/mixin-datacom'
+
+describe('mixin-datacom', () => {
+  if (process.env.uniTestPlatformInfo.startsWith('web')) {
+    it('dummyTest', async () => {
+      expect(1).toBe(1)
+    })
+    return
+  }
+  let page
+  beforeAll(async () => {
+    page = await program.reLaunch(PAGE_PATH)
+    await page.waitFor(500)
+  })
+  it('mixinDatacomGet', async () => {
+    const datacom = await page.$('.datacom')
+    const children = await datacom.$$('.list-item')
+    expect(children.length > 0).toBe(true)
+  })
+})
diff --git a/pages/component/unicloud-db/unicloud-db/mixin-datacom.uvue b/pages/component/unicloud-db/unicloud-db/mixin-datacom.uvue
new file mode 100644
index 00000000..9f3ce405
--- /dev/null
+++ b/pages/component/unicloud-db/unicloud-db/mixin-datacom.uvue
@@ -0,0 +1,27 @@
+<template>
+  <view class="content">
+    <datacom class="datacom" collection="unicloud-db-test"></datacom>
+  </view>
+</template>
+
+<script>
+  import datacom from './datacom.uvue';
+
+  export default {
+    components: {
+      datacom
+    },
+    data() {
+      return {
+      }
+    },
+    methods: {
+    }
+  }
+</script>
+
+<style>
+  .content {
+    flex: 1;
+  }
+</style>
diff --git a/readme.md b/readme.md
index fd86721c..d5fe12c7 100644
--- a/readme.md
+++ b/readme.md
@@ -24,13 +24,23 @@ npx husky@9.0.11
 
 #### pages.json
 
-创建 component、API、css 示例页面时，如果该示例页面需要在对应 tabBar 菜单中展示，命名需要遵循以下规则：
+创建 component、API、css 示例页面时，如果该示例页面需要在对应 tabBar 菜单中展示，`path` 命名需要遵循以下规则：
 - component pages/component/component-name/component-name
 - API pages/API/api-name/api-name
 - css pages/API/css-name/css-name
 
-增加上述示例页面时，不需要基于平台兼容性补充条件编译，代码提交后，会自动生成对应的条件编译代码，并更新 pages.json。
+所以，如果是扩展示例，比如针对 `button type 属性` 的示例，`path` 可以是：
+```
+pages/component/button/button-type
+```
+如果想要该示例页面在菜单中显示，则需要调整为：
+```
+pages/component/button/button/type
+```
+
+
+**注意：**增加上述示例页面时，不需要基于平台兼容性补充条件编译，代码提交后，会自动生成对应的条件编译代码，并更新 pages.json。
 
 pages.json 中增加后，需要在 [syntaxdoc](http://git.dcloud.io/uni-app-x/syntaxdoc) 仓库的 modules.json 中维护目录信息。
 
-**注意：** 调整现有页面的路径或平台兼容性，或移除页面时，如果该页面设计截图对比测试，需要同时调整 pages/pages.test.js 中的页面地址。
+**注意：**调整现有页面的路径或平台兼容性，或移除页面时，如果该页面设计截图对比测试，需要同时调整 pages/pages.test.js 中的页面地址。
-- 
GitLab