# Js端开发入门文档指引
按照如下的顺序了解jsview文档，可以帮助快速入门JsView的JS端开发
确认node和npm版本;helloWorld创建,获得基础项目脚手架
点击进入 node版本确认
点击进入 运行HelloWorld工程可用的css样式表(HTML元素，目前只支持 div 和 img，其他功能例如文字输入都有相应的组件完成)
点击进入 目前支持的CSS样式表了解关键组件:界面焦点控制JsvFocusBlock
点击进入 JsvFocusBlock指南了解关键组件:布局兼上下左右键接管的MetroWidget
点击进入 MetroWidget指南可以使用最常见的多TAB页面形态sample进行主界面工程搭建:
样例1:
仅有多tab主页样例:
借鉴时，请clone后，切换到 master-offline 分支，然后npm ci后即可进行 npm run start来调试
git clone http://gitlab.cluster.qcast.cn/mirror/jsview-vue3-tabUI-sample.git
样例2:
含有主页，详情页，全屏播放页:
git clone http://gitlab.cluster.qcast.cn/mirror/epg-demo.git如果不依赖java端功能接口的话，可以直接使用小程序之家apk来启动
点击进入 在android上运行脚手架中的小程序示例代码以及其源代码
按照如下步骤，进行npm samples包安装和,修改src/main.tsx, 启用示例代码
运行
npm install @shijiu/jsview-vue-samples && npm ci将main.tsx
import App from './App.vue'改为import App, { router } from '@shijiu/jsview-vue-samples'main.tsx 中添加
app.use(router)
// 修改 src/main.tsx
import { createApp } from 'vue'
import { jsvCreateFocusManager } from 'jsview'
// 修改点1: 将APP的引入改为从sample引入，并同时引入router
import App, { router } from '@shijiu/jsview-vue-samples'
const app = createApp(App)
// 修改点2: 追加router的初始化
app.use(router)
app.use(jsvCreateFocusManager(), '#app')
app.mount('#app')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 如果你想使用某个sample作为base，可以直接从@shijiu/jsview-vue-samples/xxx拷贝到src目录。
- 具体模块对应可以对照 node_modules/@shijiu/jsview-vue-samples/DemoHomepage/router.js
- Debug时如果需要临时去除启动图，可以用: ;(window as any).jJsvRuntimeBridge?.notifyPageLoaded()
示例代码运行效果URL:
http://cdn.release.qcast.cn/JsViewFrameworkTester/release_build_vue/1667/vue-vite/index.html
源代码位置:
MetroWidget样例Router检索:
node_modules/@shijiu/jsview-vue-samples/MetroWidgetDemos/routeList.js中记载的相对路径中
其余样例Router检索:
node_modules/@shijiu/jsview-vue-samples/DemoHomepage/router.js中记载的相对路径中
- 组件的使用说明
每个组件的说明在其vue文件头中，组件的vue文件可以去目录node_modules/@shijiu/jsview-vue/utils/中查找。
JsvFocusBlock:
node_modules/@shijiu/jsview-vue/utils/JsViewEngineWidget/JsvFocus/JsvFocusBlock.vueFocusHub:
node_modules/@shijiu/jsview-vue/utils/JsViewEngineWidget/JsvFocus/JsvFocusHub.tsMetroWidget:
node_modules/@shijiu/jsview-vue/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue其余组件:
node_modules/@shijiu/jsview-vue/utils/JsViewVueWidget对应组件名的文件中查看。
掌握android端的devtools调试方法
点击进入 android端devtools接入方法常见问题回答，例如"加载失败"弹出框的自查方法
点击进入 常见问题回答列表