Based on React, Webpack and Apicloud, the application framework of ios, Android and WAP was built at the same time. According to different packaging commands, different library files were referenced, and finally applications suitable for different platforms were output

demo

After downloading the project, visit./dev/html/example.html

use

Installing dependent libraries

Run environment: Windows, Linux, and Mac You need to modify the commands for setting environment variables in package.json scripts, such as set NODE_ENV=release=>env NODE_ENV=release and script path \\=>/

Installation: nodejs

Run in sequence in the project root directory:

npm i cnpm -g

cnpm i

The project structure

Bin: Related scripts used in the project

BuildHtml: After webpack is complete, the HTML files are processed (such as gzip js files) and generated to the output directory

BuildLib: Common library for scripts

CopyFiles: Run this script to copy the files in the output directory Release_app to the APICLOUD project directory (APICLOUD project address needs to be configured) when the ios or Android version needs to be exported.

CreatePage: Run this script when you create a new page

Output directory:

Dev: Output directory of the development environment

Release0: The output directory of the publishing environment, using config0.js

Release1: The output directory of the publishing environment, using config1.js

Release_app: output directory of the app

SRC: code file

Lib: Base library + base component

General: Common styles associated with the project, JS files, common components

Page: indicates the page directory

A new page

Rule: Convention is greater than configuration and consists of module name _ page name

Run the NPM run page user_login command to login to the CSS

Command parameters:

User_login: user: indicates the module name, login: indicates the page name

Login: page title

CSS: Whether the page requires a style file

After the command is successfully executed, the user_login directory, including user_login.entry.js, user_login. HTML, and user_login. SCSS, is generated in the page directory

Project commissioning

Run the command NPM run watch

After the command is executed successfully, the dev directory will be generated in the root directory. The files in the HTML/directory can run normally in the viewer. When the files in the SRC directory are modified, the dev directory will be updated in real time

Project released

Output waP: NPM run release num

The waP gzip version is displayed: NPM run release-gzip num

NPM run release-app num

Command parameters:

The call to num: when packaged SRC/general/common/js/config. Js version, such as: 1 = > config1. Js, will output release1 directory in the root directory

Gzip: the server must enable the corresponding configuration support

Description of APP:

Configure the newAppFilePath path in bin/ copyfiles. js

After the command is executed, submit the Apicloud project in the newAppFilePath path to the Apicloud cloud, which packages the Android and ios installation packages. Note that the config. XML entry file of the Apicloud project needs to be modified

The interface data

Test data: interfaces configuration. / SRC/general/js/common TEST_DATA_CONFIG to true, the test interface act, op are page name, in the. / SRC/general/js/testData to add the corresponding data

/ SRC /general/js/config API_URL request method in common

Based on the component

See usage examples in the component source code for detailed documentation

ActionSheet: A mock IOS selector that pops up from below

ApposeBtn: Two buttons side by side

ApposeFixedBtn: Float up side by side with two buttons

BlockBtn: block buttons

BlockInput: blockInput box with buttons on the right

BlockTitle: Block-level title, automatically indented if there are child elements

BottomTab: indicates the bottomTab

CallEl: Call component (compatible with WAP side and APP side)

CheckBox: a selection box

FoldItem: folds an Item

InputWithBtn: input box with title on the left and buttons on the right

LabelInput: text component, supporting title on the left, arrow on the right, whether it is input text

Loader: loading loading

MediaItem: Graphic component

NumBox: quantity selection box

Poppicker: a multi-level linkage selector that supports primary, secondary, and tertiary linkage, for example, a provincial selector

Radio: Optional

RadioList: indicates an optional group

Scroll: scroll component

Slider: a slider

TabBtnGroup: indicates the TAB button group

TopBar: topBar

Based on library

Base: base.app: basic library used when the APP end is packaged. Base: basic library used when the WAP end is packaged. For details, see the Base document

Font: pxToRem(14px) font: pxToRem(14px); =>font-size: 14px;

LoginSdk: third-party loginSdk. Wechat login has been implemented on the app side. Other login methods and wap login can be expanded

PaySdk: Third-party payment SDK, waP side has realized wechat payment, other payment methods and APP side can be expanded, just keep the same parameters, see the source code of paySdk for the usage method

ShareSdk: third-party sharing SDK. Wechat sharing has been implemented on the APP side. Other sharing methods and WAP side can be expanded

Storage: local data management base encapsulated in Base

Timing: a timer tool. For details about how to use this tool, see Timing source code example

About the author