This is the 29th day of my participation in the August Wenwen Challenge.More challenges in August

preface

In the era of mobile Internet, it is obviously not enough for us to only develop websites at the front end. If we want to develop an App through HTML + JS + CSS, we can choose to use HTML5+ API to call some native App functions, and then package our mobile TERMINAL H5 into an App through App packaging tools.

H5 + profile

HTML5 Plus mobile App, referred to as 5+App, is an App written based on HTML, JS and CSS and running on the mobile terminal. This App can arbitrarily call the native capabilities of the mobile phone through the extended JS API to achieve the same powerful functions and performance as the native App.

Call it + API

For HTML5+ apps, there is an important “plusReady” event. This event is automatically triggered when the page is loaded, indicating that all HTML5+ apis are available. HTML5+ apis cannot be called until this event is triggered. So you should call the HTML5+ API you need to initialize the page in this event callback function. For details about the API you need to use, you can access the HTML5+ API documentation

document.addEventListener("plusready".function () {
    // Call HTML5+ API
}, false);
Copy the code

In order to facilitate our App development, we can choose some frameworks and development tools, such as MUI and HBuilder.

Mui framework

Mui is a framework that facilitates the development of high performance apps and is currently the closest to the effect of native apps. Some controls are the original effect of muI plays a bridge role, a set of code support Android, iOS packaging, save development time and development cost, a supporting development tool HBuilder, provide perfect code tips and packaging process simplification.

H5 +App MUI template project h5+App MUI template project

In addition to unpackage and manifest.json, other files are only for our traditional Web development. Unpackage is to store the icon image and launch image of app and other resources, while Mainfest.json is a packaged configuration file (such as wechat login sharing, map and other functions need to be configured in this configuration).

Package your App with HBuilder

After developing our project, we need to package it into App test and release. After configuring our Mainfee. json, click cloud Package and fill in our App certificate and other information, we can package our project into APK file (Android) and IPA file (Apple).