native-app-ui
v1.0.15
Published
品杰科技H5本地应用浏览器端支持库
Downloads
2
Readme
1. 起步
在main.js中添加如下代码, 以下代码为此库依赖的第三方库:
import nui from "native-app-ui"
import "native-app-ui/lib/native-app-ui.css";
import "native-app-ui/lib/styles/default.css";
Vue.use(nui);
2. 代码中的C#和Javascript交互
2.1 在Vue代码中按如下方式给C#提供功能
this.$jsFeature.register(xxx,this,"xxx");// 注册js功能供c#端调用
this.$jsFeature.cancel(xxx,"xxx");// 取消js功能方法
//等效写法1,可以应用于任何js中
import {jsFeature} from "native-app-ui";
jsFeature.register(xxx,this,"xxx");// 注册js功能供c#端调用
jsFeature.cancel(xxx,"xxx");// 取消js功能方法
//等效写法2,在浏览器中可以不用引入任何东西直接使用
window.$jsFeature.register(xxx,this,"xxx");// 注册js功能供c#端调用
window.$jsFeature.cancel(xxx,"xxx");// 取消js功能方法
2.2 在Vue代码中按如下方式调用c#提供的功能
this.$csFeatureProxy.proxy().xxClass.xxMethod(xxx);// 调用xxClass下的xxMethod方法
//等效写法1,可以应用于任何js中
import { csFeatureProxy } from "native-app-ui";
csFeatureProxy.proxy().xxClass.xxMethod(xxx);// 调用xxClass下的xxMethod方法
//等效写法2,在浏览器中可以不用引入任何东西直接使用
window.$csFeatureProxy.proxy().xxClass.xxMethod(xxx);// 调用xxClass下的xxMethod方法
3. 组件使用
3.1 nau-window
<nau-window
:status-bar="true"
:title-bar="true"
:min-btn="true"
:max-restore-btn="true"
:close-btn="true"
icon=""
title="" >
<hello-world></hello-world>
</nau-window>
/* 属性说明
status-bar:是否显示状态栏,默认为true,状态栏支持窗口大小调整
title-bar:是否显示标题栏,默认为true,标题栏包含图标、标题、最小化、最大化/还原、关闭按钮
min-btn:是否显示最小化按钮,默认为true
max-restore-btn:是否显示最大化和还原按钮,默认为true
close-btn:是否显示关闭按钮,默认为true
以上三个按钮的控制必须在title-bar=true时才能生效
icon:窗体左上角的图标
title:窗体的标题
以上两个参数的必须在title-bar=true时才能生效
*/
3.2. nau-title-bar
<title-bar :close-btn="true"
:max-restore-btn="true"
:min-btn="true"
icon="icon-img-url"
title="title">
<slot></slot>
</title-bar>
/* 属性说明
min-btn:是否显示最小化按钮,默认为true
max-restore-btn:是否显示最大化和还原按钮,默认为true
close-btn:是否显示关闭按钮,默认为true
icon:窗体左上角的图标
title:窗体的标题
其中默认插槽【位于标题栏前方】和属性icon只能二选一,属性icon指定的值优先
*/
3.3. status-bar
<status-bar>
<slot></slot>
</status-bar>
/* 属性说明
默认插槽位于左侧
*/
4. 本地文件请求
local-file://文件详细路径
支持参数 contentType 用于设定返回内容的 content-type
不设置该参数则为默认的 application/octet-stream
content-type 映射参考:https://tool.oschina.net/commons