quickapp-h5

在网页中调用快应用的相关功能.

quickapp-h5

English | 简体中文

The best third party JS|TS library scaffold. By forking or cloning the repository, you can complete the basic framework for building a new library.

The library that based quickapp-h5 can be shared to the jsmini platform

Characteristics

• Coded in ES6+ or TypeScript, easily compile and generate production code
• Integrated babel-runtime (Default set to closed)
• Third parties rely on automatic injection(Tree shaking)
• Supports multi environment, including default browsers, Node, AMD, CMD, Webpack, Rollup, Fis and so on.
• Integrated code style lint(eslint|tslint).
• Integrated unit test environment(mocha).
• Integrated test coverage(istanbul).
• Integrated continuous integration tool travis-ci
• Supports banner
• Supports one-key renaming.
• Supports sideEffects
• Integrated Issue template
• Integrated jsmini

Note: When export and export default are not used at the same time, there is the option to turn on legacy mode. Under legacy mode, the module system can be compatible with IE6-8. For more information on legacy mode, please see rollup supplemental file.

Compatibility

Unit tests guarantee support on the following environment:

| IE | CH | FF | SF | OP | IOS | Android | Node | | ---- | ---- | ---- | ---- | ---- | ---- | ---- | ----- | | 6+ | 29+ | 55+ | 9+ | 50+ | 9+ | 4+ | 4+ |

Note: Compiling code depend on ES5, so you need import es5-shim to compatible with IE6-8, here is a demo

Directory

├── demo - Using demo
├── dist - Compiler output code
├── doc - Project documents
├── src - Source code directory
├── test - Unit tests
├── CHANGELOG.md - Change log
└── TODO.md - Planned features

Usage Instructions

Using npm, download and install the code.

$ npm install --save quickapp-h5

Pls check demo folder for detail, parameter 'option' see doc: quickapp 快应用

const quickApp1 = new QuickApp();
const option = {
    path: '/Home',
    params: {
        path: 'Detail',
        title: '测试文章',
        url: 'http://test.wkanx.com/tmp/build/index.html',
        id: '3163241194045440',
        cid: 9999999,
        type: 0,
        template: 9999999,
        utm_source: 'push',
        pop: 0,
    },
    packageName: 'xxx',
    confirm: ''
}
quickApp1.open(option)

也可以在初始化 new QuickApp 时传入 packageName, 使用时 open 可以不传则默认使用初始化的packageName, 也可以传packageName 打开不同的快应用

const quickApp1 = new QuickApp({
    packageName: 'xxx',
});
const option = {
    path: '/Home',
    params: {
        path: 'Detail',
        title: '测试文章',
        url: 'http://test.wkanx.com/tmp/build/index.html',
        id: '3163241194045440',
        cid: 9999999,
        type: 0,
        template: 9999999,
        utm_source: 'push',
        pop: 0,
    },
    packageName: 'xxx',
    confirm: ''
}
quickApp1.open(option)

For node environment：

const QuickApp = require('quickapp-h5');
const quickApp1 = new QuickApp();
quickApp1.open({
                    path: '/Home',
                    params: {
                        path: 'Detail',
                        title: '测试文章',
                        url: 'http://test.wkanx.com/tmp/build/index.html',
                        id: '3163241194045440',
                        cid: 9999999,
                        type: 0,
                        template: 9999999,
                        utm_source: 'push',
                        pop: 0,
                    },
                    packageName: 'xxx',
                    confirm: ''
                });

For webpack or similar environment：

import QuickApp from 'quickapp-h5';
const quickApp1 = new QuickApp();
quickApp1.open({
                    path: '/Home',
                    params: {
                        path: 'Detail',
                        title: '测试文章',
                        url: 'http://test.wkanx.com/tmp/build/index.html',
                        id: '3163241194045440',
                        cid: 9999999,
                        type: 0,
                        template: 9999999,
                        utm_source: 'push',
                        pop: 0,
                    },
                    packageName: 'xxx',
                    confirm: ''
                });

For requirejs environment:

requirejs(['node_modules/quickapp-h5/dist/index.aio.js'], function (QuickApp) {
    const quickApp1 = new QuickApp();
    quickApp1.open({
                        path: '/Home',
                        params: {
                            path: 'Detail',
                            title: '测试文章',
                            url: 'http://test.wkanx.com/tmp/build/index.html',
                            id: '3163241194045440',
                            cid: 9999999,
                            type: 0,
                            template: 9999999,
                            utm_source: 'push',
                            pop: 0,
                        },
                        packageName: 'xxx',
                        confirm: ''
                    });
})

For browser environment:

<script src="node_modules/quickapp-h5/dist/index.aio.js"></script>

Documents

API

Contribution Guide

How to switch JS and TS

• srctype and scripts in package.json
• require file of test/test.js
• require file of test/browser/index.html

For the first time to run, you need to install dependencies firstly.

$ npm install

To build the project:

$ npm run build

To run unit tests:

$ npm test

Note: The browser environment needs to be tested manually under test/browser

Modify the version number in package.json, modify the version number in README.md, modify the CHANGELOG.md, and then release the new version.

$ npm run release

Publish the new version to NPM.

$ npm publish

For renaming project, you need change fromName and toName in rename.js, then run npm run rename, this command will auto renaming names for below files:

• The messages in README.md
• The messages in package.json
• The messages in config/rollup.js
• The repository name in test/browser/index.html
• Library name in demo/demo-global.html

Contributors

contributors

Change Log

CHANGELOG.md

TODO

TODO.md

Current Users

• jsmini
• ...

Relative links

• typescript-library-template