Hbuilder in Wap2app (convert a mobile site to a mobile app)

What is Wap2app?

An enhanced solution that quickly releases existing M-stations (also called WAP stations) into apps, using Dcloud's Wap2app framework for simple configuration and necessary programming.

You can complete the experience hardening of the M station to achieve the functional experience of native applications, and then publish it as a native installation package or streaming application.

Product Features:

1) Provide native rendering ability, let the interface render speed and animation effect, achieve the original effect.

2) Provide rich system native capabilities (location, sharing, payment, push, etc.) to achieve native functionality

3) Configure page rules and hardening rules via JSON

4) m station only need a little modification, the cost of transformation is low

5) Reinforcement part and the previous m-station decoupling, M-station subsequent upgrade business logic, the generated app automatically contains updated business logic

Local hardening and M-Station relationships

With Wap2app, developers can reuse all of the business logic before M-stations, requiring only the necessary hardening, while all the business logic of previous registrations, purchases, queries, etc. is reused.

The reinforcement work done by the developer is divided into:

A) Wap2app Client configuration programming work

b) Transformation of the original M station

Note: These two pieces are kaixie coupled.

Since Hbuilder 8.8.3, the new Wap2app project will automatically generate the necessary template files for the project, which is where the hardening work is done.

Tips: These JSON or JS are deployed on the mobile client, not the M station server.

The developer does not need to, nor can the M station project source code into the Hbuilder Wap2app project, M station still in the previous mode deployed on the remote server.

These hardening configuration and programming files under the Wap2app project are selected in Hbuilder as a new Wap2app project for packaging as a native app or as a streaming application.

is existing in the native app package, installed directly in the mobile phone in the local storage area, can be understood as the client part of the C/S mode. and M station is still B/s mode,

Instead of packing the resources of the M station into the app package, the online m-station page is loaded from the server.

When the mobile phone is actually running, the Dcloud framework automatically fuses the local hardening configuration with the online m station, which is an app sensation in the eyes of the user.

A) Enhanced Work

1) Wap2app local work: Through the framework provides the Sitemap.json file, describes the page relationship and animation enhancement effect, has achieved the native form transition effect. When Sitemap.json is not satisfied

Complex requirements, you can use App.js programming for enhanced processing.

2) m station renovation work: for the app operating environment (according to the UA distinction), the appropriate transformation, remove the app should not appear in the page elements, such as: The bottom of the computer version of the link or some native app download boot.

3) Expand native capabilities: If you need to invoke the native capabilities of the Dcloud html5+ engine extension, such as sharing, push, native payment, etc. that could not be achieved before M station, the necessary programming work is required. This part of the work can be

Wap2app Local implementation, can also be implemented in M station (pay attention to determine the current operating environment);

How to convert?

First step: Download Hbuilder

Step Two: Configure the Sitemap.json file

What is the Sitemap.json principle?

M station each page in Wap2app is running in the WebView, the developer first need to comb down all the URL, is configured to Sitemap.json.

Of course, some pages of the URL although different, but the actual content is the same, such as a news station different news details, you can use wildcards or regular expressions to batch match the URL

Sitemap.json's main work:

1) The URL of the regular m station, create the pages rule, and match each URL page to a separate page

2) What enhancement properties are required for the WebView

The file consists of:

Global:app Global configuration (with two nodes)

1) Webviewparameter:webview general configuration, such as Universal native title bar, etc.

2) EasyConfig: Simplified settings for improved user experience. such as back-processing, etc.

Note: Each page in Wap2app uses the global configuration by default, and if the same attributes are configured on a particular page, the matching properties of the corresponding pages prevail.

Pages:array Type, configure the specific page of the M station to override global configuration in the specific page configuration (with four properties)

1) Webviewid: The ID of the webview to which the current page belongs, and the type is string. Facilitates subsequent enhancements to the programming, such as the use of Plus.webview.getWebviewById () in App.js

method to get the current WebView object;

2) Matchurls: page URL matching rules, to meet the Matchurls matching rules of the page, will be opened using the current configuration rules, such as WebView ID fixed for this page configuration Webviewid attributes;

3) Webviewparamater:webview Related configuration

4) EasyConfig: Simplified configuration for improved user experience

About Wap2app opening a new page flow:

1) Traverse each Page object under the Pages node

2) match with the URL address of the new page and the Matchurls rule in the Page object

3) If the match succeeds, the current object is used to create a new WebView (ID is the Webviewid property of the Page object, the WebView property is the Webviewparamater configured for the current Page object)

4) If the match fails, use the global property to create a new WebView (WebView ID random)

Note: The first page of the Webviewid must be w2a+ home domain name, for example: _w2a_m.example.com,hbuilder new Wap2app Project when the default generation, can not be modified;

Hbuilder in Wap2app (convert a mobile site to a mobile app)