create-jsview 2.0.1197-next-vue.0

package/template-vue-vite/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "jsview-vue-test",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "android": "node node_modules/@shijiu/jsview/tools/jsview-run-android.mjs --framework=vue",
+    "build": "vue-tsc && vite build && node node_modules/@shijiu/jsview/tools/jsview-post-build.mjs --framework=vue",
+    "dev": "vite",
+    "postinstall": "node node_modules/@shijiu/jsview/tools/jsview-post-install.mjs --framework=vue",
+    "preview": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@shijiu/jsview": "2.0.1197-next-vue.0",
+    "@shijiu/jsview-vue": "2.0.1197-next-vue.0",
+    "vue": "3.2.45",
+    "vue-router": "4.1.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "4.0.0",
+    "typescript": "4.9.3",
+    "vite": "4.0.0",
+    "vue-tsc": "1.0.11"
+  },
+  "browserslist": [
+    "chrome 102",
+    "not dead"
+  ],
+  "engines": {
+    "node": ">=16.0.0"
+  }
+}

package/template-vue-vite/src/App.vue

@@ -0,0 +1,25 @@
+<template>
+<div>
+  <img src="./assets/logo.png" class="logo-size">
+  <HelloWorld msg="Hello JsView-Vue + Vite App" :style="{top: 50, width:220}"/>
+</div>
+</template>
+
+<script setup>
+import { onMounted } from "vue"
+import { jJsvRuntimeBridge } from "jsview";
+import HelloWorld from './components/HelloWorld.vue';
+
+onMounted(()=>{
+  /* apk到收到此调用后才会结束启动过程，去掉启动图(否则会显示加载超时的界面) */
+  jJsvRuntimeBridge.notifyPageLoaded();
+});
+
+</script>
+
+<style scoped>
+.logo-size {
+  width: 200;
+  height: 200;
+}
+</style>

package/template-vue-vite/src/appConfig/HOW_TO_CONFIG.md

@@ -0,0 +1,15 @@
+app_data文件夹用来记录APP的设定信息，包括APP的全球唯一标识，签名信息
+
+1. 全球唯一标识AppName设定方法:
+   修改app.config.js文件中的AppName信息，一般命名方法为 domain/子应用名
+
+2. 签名信息，使用RSA签名，设定方法:
+   执行：node ./node_modules/@shijiu/jsview/tools/jsview-generate-keypair.mjs
+
+   将生成公钥文件app_sign_public_key.pem和私钥文件app_sign_private_key.crt。
+   
+   JsView签名原理说明:
+   在进行js build时，会将 main.jsv.xxxx.js (包含AppName具体值)文件的md5值用私钥进行编码，编码出的内容和公钥一起写入到该文件的文件头中，JsView加载后用公钥反编码出该md5值，和文件的md5进行比对，若md5一致则认为此公钥合法，然后此公钥会和AppName进行映射，作为设定快捷访问地址等权限控制的调用作为参考，以防止其他APP对本APP(以AppName为查询键)的私有内容进行非法访问和破坏。
+   
+   注意: 私钥(app_sign_private_key.crt)不要被泄漏，私钥若泄漏，则其他APP可以伪装AppName，查询本APP的私有内容，覆盖本APP设定的快捷访问地址。
+   

package/template-vue-vite/src/appConfig/app.config.mjs

@@ -0,0 +1,16 @@
+export default {
+	// uuid, 和其他小程序区分的标识, 格式要求为 公司domain/产品，例如 "xxxx.domain.cn/XXXX", domain中不要有字符/
+	AppName: "",
+
+	// 显示在桌面系统上的名称，可以有特殊字符和中文，要求UTF8格式
+	AppTitle: "",
+
+	// 应用版本信息，只是用于显示，引擎不会拿其作为版本判断依据
+	AppVersion: "1.00",
+
+	// 上线前请更换, 此为小程序之家APK上线后的图标规范
+	AppIcon: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsvMiniAppIcon300x160.png",
+
+	// 上线前请更换, 此为小程序之家APK上线后的图标规范
+	AppRectIcon: "https://oss.image.qcast.cn/JsViewVideo/ImageTestSample/JsvMiniAppIcon256x256.png",
+}

package/template-vue-vite/src/appConfig/jsview.config.mjs

@@ -0,0 +1,43 @@
+export default {
+  jsviewConfig: {
+    // (可选配置)remote loader
+    remoteLoader: null,
+
+    // (可选配置)localStorage支持
+    // presetKeys为预置key，可以直接使用localStorage.xxx的形式，避免undefined错误
+    localStorage: {
+      domain: null, // 默认自动使用app.config.mjs的AppName作为domain, 可以设置为其他值
+      presetKeys: [
+        'value1',
+        'value3'
+      ]
+    },
+
+    cookies: {
+      domain: '' // 当非null非空时，激活cookie功能，使ajax请求时自动带上cookies，并且document.cookie的get/set可用
+    },
+
+    // (可选配置)填写main.js或者bundle.js相对于index.html的相对位置，
+    // 用于image/import.then的相对寻址, vue3默认值是/js/
+    jsSubPath: '/js/'
+  },
+
+  vendorConfig: {
+    // (可选配置)设置屏幕坐标映射值，screenWidth为屏幕画布定义的宽度，displayScale为清晰度，
+    // 默认值是画布宽度1280px, 清晰度为1.0
+    designedMap: {
+      screenWidth: 1280,
+      displayScale: 1.5
+    },
+
+    // (可选配置)按键接受的扩展，例如将静音按键(JAVA键值为164)映射为JS键值20001，
+    // PS:注意'164'的引号
+    bindKeys: {
+      keys: {
+        164: 20001
+      },
+      syncKeys: {
+      }
+    }
+  }
+}

package/template-vue-vite/src/appConfig/permission.js

@@ -0,0 +1 @@
+export const PERMISSION = {}

package/template-vue-vite/src/components/HelloWorld.vue

@@ -0,0 +1,19 @@
+<template>
+<div class="msg">{{ msg }}</div>
+</template>
+
+<script lang="ts">
+export default {
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.msg {
+  font-size: 16px;
+  color: #00FFFF;
+}
+</style>

package/template-vue-vite/src/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/template-vue-vite/src/main.tsx

@@ -0,0 +1,21 @@
+import { createApp } from 'vue'
+import { jsvCreateFocusManager } from 'jsview'
+import App from './App.vue'
+
+const app = createApp(App)
+
+/* 注册 App Plugin。如果项目中未使用，可以忽略或删除 */
+
+// 注册vue-router插件, 请自行修改到正确的router
+// 注册vue-router插件, 如果没有挂在App中，请自行修改到正确的router
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+if ((App as any).Router) app.use((App as any).Router)
+// 注册JsView定制的焦点控制插件
+app.use(jsvCreateFocusManager(), '#app')
+
+app.mount('#app')
+
+/* 备注: */
+// 1. App.vue是一个最简的 Vue3 样例(参考`npm init vite`)，可在此基础上进行二次开发。
+// 2. 参考 http://jsview-dev.shijiutv.com/tour/1.js-develop/1.1.basic-js-tour.html 
+//    的'示例代码以及其源代码' 栏目进行samples代码安装和使用

package/template-vue-vite/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["esnext", "dom"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "allowJs": true,
+    "experimentalDecorators": true,
+    "paths": {
+      "jsview": [ "./node_modules/@shijiu/jsview-vue" ],
+      "jsview-vue-samples/*": [ "./node_modules/@shijiu/jsview-vue-samples/*" ]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue",
+    "node_modules/@shijiu/jsview-vue/**/*.vue",
+    "node_modules/@shijiu/jsview-vue-samples/**/*.vue",
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/template-vue-vite/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

package/template-vue-vite/vite.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue()
+  ]
+})