npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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