@shijiu/jsview-vue-samples 2.2.426-test.0 → 2.3.151-test.0

package/DemoForOperator/routeList.js

@@ -0,0 +1,259 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-03-09 14:02:58
+ * @Description: file content
+ */
+export default [
+  {
+    meta: { nameText: '文字跑马灯', },
+    name: 'operator-文字跑马灯',
+    path: '/operator/Marquee',
+    component: () => import('@shijiu/jsview-vue-samples/Marquee/App.vue'),
+  },
+  {
+    meta: { nameText: '二维码', },
+    name: 'operator-二维码',
+    path: '/operator/QrcodeDemo',
+    component: () => import('@shijiu/jsview-vue-samples/QrcodeDemo/App.vue'),
+  },
+  {
+    meta: { nameText: '雷达图组件', },
+    name: 'operator-雷达图组件',
+    path: '/operator/RadarChart',
+    component: () => import('@shijiu/jsview-vue-samples/JsvRadarChart/App.vue')
+  },
+  {
+    meta: { nameText: '进度条组件', },
+    name: 'operator-进度条组件',
+    path: '/operator/ProgressBar',
+    component: () => import('@shijiu/jsview-vue-samples/ProgressBar/App.vue'),
+  },
+  {
+    meta: { nameText: '透视滚动组件', },
+    name: 'operator-透视滚动组件',
+    path: '/operator/Swiper3D',
+    component: () => import('@shijiu/jsview-vue-samples/SwiperTest/App.vue'),
+  },
+  {
+    meta: { nameText: '春联、对联组件', },
+    name: 'operator-春联、对联组件',
+    path: '/operator/ChunLian',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/ChunLian/App.vue'),
+  },
+  {
+    meta: { nameText: '公祭日黑白屏', },
+    name: 'operator-公祭日黑白屏',
+    path: '/operator/GrayFilter',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/GrayFilter/App.vue'),
+  },
+  {
+    meta: { nameText: '动图', },
+    name: 'operator-动图',
+    path: '/operator/AnimPic',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/AnimPic/App.vue'),
+  },
+  {
+    meta: { nameText: '焦点', },
+    name: 'operator-焦点',
+    path: '/operator/Focus',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Focus/App.vue'),
+  },
+  {
+    meta: { nameText: '焦点框阴影', },
+    name: 'operator-焦点框阴影',
+    path: '/operator/FrameShadow',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/FrameShadow/App.vue'),
+  },
+  {
+    meta: { nameText: '霸屏海报淡入效果落地效果', },
+    name: 'operator-霸屏海报淡入效果落地效果',
+    path: '/operator/FullscreenIn',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/FullscreenIn/App.vue'),
+  },
+  {
+    meta: { nameText: '海报强调动画', },
+    name: 'operator-海报强调动画',
+    path: '/operator/PosterAnim',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/PosterAnim/App.vue'),
+  },
+  {
+    meta: { nameText: '轮播图', },
+    name: 'operator-轮播图',
+    path: '/operator/Swiper',
+    component: () => import('@shijiu/jsview-vue-samples/Swiper/App.vue'),
+  },
+  {
+    meta: { nameText: '弹跳动画', },
+    name: 'operator-弹跳动画',
+    path: '/operator/Bounce',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Bounce/App.vue'),
+  },
+  {
+    meta: { nameText: '拼图组件', },
+    name: 'operator-拼图组件',
+    path: '/operator/Jigsaw',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Jigsaw/App.vue'),
+  },
+  {
+    meta: { nameText: '焦点海报多层叠加突出效果', },
+    name: 'operator-焦点海报多层叠加突出效果',
+    path: '/operator/PosterOverflow',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/PosterOverflow/App.vue'),
+  },
+  {
+    meta: { nameText: '推箱效果组件', },
+    name: 'operator-推箱效果组件',
+    path: '/operator/Stretch',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Stretch/App.vue'),
+  },
+  {
+    meta: { nameText: '鞭炮组件', },
+    name: 'operator-鞭炮组件',
+    path: '/operator/Banger',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Banger/App.vue'),
+  },
+  {
+    meta: { nameText: '礼花组件', },
+    name: 'operator-礼花组件',
+    path: '/operator/Firework1',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Firework1/App.vue'),
+  },
+  {
+    meta: { nameText: '精灵图组件(动图)', },
+    name: 'operator-精灵图组件(动图)',
+    path: '/operator/Sprite',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sprite/App.vue'),
+  },
+  {
+    meta: { nameText: '虹吸组件\n单海报/整页', },
+    name: 'operator-虹吸组件\n单海报/整页',
+    path: '/operator/Genie',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Genie/App.vue'),
+  },
+  {
+    meta: { nameText: '漩涡组件\n单海报/整页', },
+    name: 'operator-漩涡组件\n单海报/整页',
+    path: '/operator/Vortex',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Vortex/App.vue'),
+  },
+  {
+    meta: { nameText: '翻页效果(整体页面)', },
+    name: 'operator-翻页效果(整体页面)',
+    path: '/operator/FlipPage',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/FlipPage/App.vue'),
+  },
+  {
+    meta: { nameText: '水波组件', },
+    name: 'operator-水波组件',
+    path: '/operator/Ripple',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Ripple/App.vue'),
+  },
+  {
+    meta: { nameText: '粒子喷洒组件', },
+    name: 'operator-粒子喷洒组件',
+    path: '/operator/Particle',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Particle/App.vue'),
+  },
+  {
+    meta: { nameText: '剧集列表', },
+    name: 'operator-剧集列表',
+    path: '/operator/EpisodeList',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/EpisodeList/App.vue'),
+  },
+  {
+    meta: { nameText: 'tab-content', },
+    name: 'operator-tab-content',
+    path: '/operator/TabContent',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/TabContent/App.vue'),
+  },
+  {
+    meta: { nameText: '虚线框', },
+    name: 'operator-虚线框',
+    path: '/operator/DashPath',
+    component: () => import('@shijiu/jsview-vue-samples/DashPath/AppForOperator.vue'),
+  },
+  {
+    meta: { nameText: '翻书', },
+    name: 'operator-翻书',
+    path: '/operator/BookFlip',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/BookFlip/App.vue'),
+  },
+  {
+    meta: { nameText: '模糊弹出框', },
+    name: 'operator-模糊弹出框',
+    path: '/operator/BlurPopup',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Blur/BlurPopup/BlurPopup.vue'),
+  },
+  {
+    meta: { nameText: '模糊进出', },
+    name: 'operator-模糊进出',
+    path: '/operator/BlurInOut',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Blur/BlurInOut/BlurInOut.vue'),
+  },
+  {
+    meta: { nameText: '主色调', },
+    name: 'operator-主色调',
+    path: '/operator/DominantColor',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/DominantColor/App.vue'),
+  },
+  {
+    meta: { nameText: '轮播图', },
+    name: 'operator-轮播图',
+    path: '/operator/Swiper',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Swiper/App.vue'),
+  },
+  {
+    meta: { nameText: '点击动画', },
+    name: 'operator-点击动画',
+    path: '/operator/ClickSpriteAnim',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/ClickSpriteAnim/App.vue'),
+  },
+  {
+    meta: { nameText: '平滑轮播图', },
+    name: 'operator-平滑轮播图',
+    path: '/operator/SmoothSwiper',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/SmoothSwiper/App.vue'),
+  },
+  {
+    meta: { nameText: '纵向爬虫', },
+    name: 'operator-纵向爬虫',
+    path: '/operator/TabContentVertical',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/TabContentVertical/App.vue'),
+  },
+  {
+    meta: { nameText: '声音-跳动', },
+    name: 'operator-声音-跳动',
+    path: '/operator/Sound_Bounce',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sound/Bounce/App.vue'),
+  },
+  {
+    meta: { nameText: '声音-下雨', },
+    name: 'operator-声音-下雨',
+    path: '/operator/Sound_Rain',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sound/Rain/App.vue'),
+  },
+  {
+    meta: { nameText: '声音-焦点移动', },
+    name: 'operator-声音-焦点移动',
+    path: '/operator/Sound_FocusMove',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Sound/FocusMove/App.vue'),
+  },
+  {
+    meta: { nameText: 'resize', },
+    name: 'operator-resize',
+    path: '/operator/Resize',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/Resize/App.vue'),
+  },
+  {
+    meta: { nameText: '截图缩放', },
+    name: 'operator-截图缩放',
+    path: '/operator/ScreenShootScale',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/ScreenShootScale/App.vue'),
+  },
+  {
+    meta: { nameText: '长聊天框', },
+    name: 'operator-长聊天框',
+    path: '/operator/LongChatBox',
+    component: () => import('@shijiu/jsview-vue-samples/DemoForOperator/LongChatBox/App.vue'),
+  }
+]

package/DemoHomepage/App.vue

@@ -14,6 +14,7 @@ import {
   JsvFocusBlock,
   useFocusHub,
   JsvTouchModeSwitcher,
+  JsvFullScrAdjust,
 } from "jsview";
 import { useRouter } from "vue-router";
 import { setDataUrl, getDataUrl } from "../CommonUtils/ResourceData.js";
@@ -29,6 +30,23 @@ window.DebugFocusHub = useFocusHub();
 
 const router = useRouter();
 
+// Android测试指令:
+// am start -n com.qcode.miniappsdktester/.JSVActivity --es MINIAPPNAME "JsViewDemo" --ei MINIAPPLAUNCHMODE 1 --es URL "http://192.168.2.179/js/main.jsv.mjs#/feature/HashParams?a=333&b=444" --es DEBUG "1"
+window.JsView?.addEventListener("onNewIntent", (msg) => {
+  if (msg?.url) {
+    console.log("onNewIntent new url=" + msg.url);
+    let new_url = new URL(msg.url);
+    if (!!new_url.hash) {
+      console.log("onNewIntent new hash=" + new_url.hash.substring(1));
+      router.push(new_url.hash.substring(1));
+    } else {
+      // 回主目录
+      console.log("onNewIntent back to home");
+      router.push("/");
+    }
+  }
+});
+
 let _onPreloadDone = () => {
   console.log("background load done");
   jJsvRuntimeBridge.notifyPageLoaded();
@@ -64,7 +82,7 @@ onMounted(() => {
     console.log("simulate background url got");
     backgroundImageUrl.value = DemoResourceBase.value
       ? `${DemoResourceBase.value}/BackgroundLongmao.jpg`
-      : "https://qcast-image.oss-cn-qingdao.aliyuncs.com/JsViewVideo/ImageTestSample/BackgroundLongmao.jpg";
+      : "https://cdn.release.qcast.cn/JsViewFrameworkTester/JsViewVueSampleResources/DemoHomepage/App/BackgroundLongmao.jpg";
     // preloadInfo.value = [buildPreloadInfo(backgroundImageUrl.value)];
   }, 0);
 
@@ -84,36 +102,38 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <jsv-touch-mode-switcher
-    ref="touchModeSwitcherRef"
-    :width="1280"
-    :height="720"
-  >
-    <!-- <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" /> -->
-    <img
-      :src="backgroundImageUrl"
-      :style="{
-        width: 1280,
-        height: 720,
-      }"
-      @load="_onPreloadDone"
-    />
-    <div class="TestKeepAliveDiv">
-      {{ "更新页面计数:" + testKeepAliveModeText }}
-    </div>
-    <jsv-focus-block
-      :onAction="{
-        onKeyDown: _OnKeyDown,
-      }"
+  <JsvFullScrAdjust :childWidth="1280" :childHeight="720">
+    <jsv-touch-mode-switcher
+      ref="touchModeSwitcherRef"
+      :width="1280"
+      :height="720"
     >
-      <router-view v-slot="{ Component, route }">
-        <keep-alive>
-          <component v-if="route.meta.keepAlive" :is="Component" />
-        </keep-alive>
-        <component v-if="!route.meta.keepAlive" :is="Component" />
-      </router-view>
-    </jsv-focus-block>
-  </jsv-touch-mode-switcher>
+      <!-- <jsv-preload :key="backgroundImageUrl" :preloadList="preloadInfo" :onPreloadDone="_onPreloadDone" /> -->
+      <img
+        :src="backgroundImageUrl"
+        :style="{
+          width: 1280,
+          height: 720,
+        }"
+        @load="_onPreloadDone"
+      />
+      <div class="TestKeepAliveDiv">
+        {{ "更新页面计数:" + testKeepAliveModeText }}
+      </div>
+      <jsv-focus-block
+        :onAction="{
+          onKeyDown: _OnKeyDown,
+        }"
+      >
+        <router-view v-slot="{ Component, route }">
+          <keep-alive>
+            <component v-if="route.meta.keepAlive" :is="Component" />
+          </keep-alive>
+          <component v-if="!route.meta.keepAlive" :is="Component" />
+        </router-view>
+      </jsv-focus-block>
+    </jsv-touch-mode-switcher>
+  </JsvFullScrAdjust>
 </template>
 
 <style scoped>

package/DemoHomepage/components/Dialog.vue

@@ -30,6 +30,7 @@ const onKeyDown = (ev) => {
       break;
     case 10000:
     case 27:
+    case 8:
       props.onAction("back");
       break;
     case 13:

package/DemoHomepage/components/Item.vue

@@ -61,6 +61,17 @@ const onClick = () => {
 props.onAction.register("onFocus", onFocus);
 props.onAction.register("onBlur", onBlur);
 props.onAction.register("onClick", onClick);
+props.onAction.register("onLongPress", () => {
+  console.log("onLongPress");
+});
+props.onAction.register("onGaze", () => {
+  console.log("onGaze", props.data);
+});
+props.onAction.register("onIgnore", () => {
+  touchModeSwitcherRef.value.unregisterCallback(modeChangeCallback);
+  focused.value = false;
+});
+
 </script>
 
 <template>

package/DemoHomepage/components/TabFrame.vue

@@ -57,6 +57,13 @@ const data = [
     focusable: true,
     id: 4,
   },
+  {
+    width: 200,
+    height: 50,
+    name: "运营组件",
+    focusable: true,
+    id: 5,
+  },
 ];
 const direction = VERTICAL;
 </script>