Develop cross-platform HTML5 applications based on LeanCloud and Wex5

With the standardization of HTML5 technology, a global boom in HTML5 application development has been set off. This is because with the help of HTML5 technology, programmers can relatively easily and quickly develop cross-platform application software for desktop and mobile devices. This article will introduce the complete process and key steps of developing HTML5 applications based on the Wex5 advanced HTML5 development environment and integrating the BaaS technology provided by LeanCloud.

one, Introduction to LeanCloud

LeanCloud is a one-stop cloud service for mobile applications in China. LeanCloud provides data storage, real-time messaging, statistical analysis, and a variety of extension components, fully covering the needs of mobile application development, and supports multiple platforms such as iOS, Android, and Web. LeanCloud products are designed to help developers get rid of the burden of back-end development so that they can focus on product innovation, while shortening the development cycle, saving development investment, and quickly entering the market.

The case study in this article uses LeanCloud's most well-known cloud storage technology. Registered users can use the online control panel to manage cloud data storage from the cloud, just like traditional DBAs manage backend databases, and it is easier and safer.

two, Introduction to Wex5

The Wex5 system developed by Beijing Qibuli Technology is an HTML5 application development environment that is launched in time to meet the requirements of the times. Based on Wex5, you can quickly develop an application that spans desktop and mobile devices. The figure below shows the schematic diagram of the Wex5 framework.

In summary, choosing Wex5 to develop HTML5 applications has the following advantages:

• Open source and free: WeX5 adopts the Apache license open source model, which is business-friendly and completely free.
• Based on mainstream technologies and standards: WeX5 front-end adopts HTML5+CSS+JS standards, using AMD-standard requirejs, bootstrap, jquery and other technologies; WeX5 mobile APP adopts hybrid application (hybridapp) development mode based on phonegap (cordova); WeX5 supports multiple types of back-ends, including Java, PHP and .NET, and also supports cloud API.

WeX5 has excellent support for cross-platform and multi-frontends. You can develop once and run on multiple platforms. Currently, the frontends supported by WeX5 are:

• Mobile APP (Apple APP and Android APP);
• WeChat applications (including official accounts, service accounts, and enterprise application accounts);
• PC browser;
• Other lightweight applications (such as Baidu Direct Number);
• WeX5 is determined to follow the path of open source and openness. WeX5 demonstrates extreme openness in supporting backend technology and backend deployment:
• Open backend technology support: WeX5's backend is completely open and can connect to various backend middleware or cloud services (Java, PHP, .NET, etc.) through protocols such as http and websocket;
• WeX5 is completely open and free to deploy without any restrictions and can be deployed on any public cloud or private cloud server.

WeX5's IDE is based on Eclipse and provides a fully visual, component-based, drag-and-drop development environment that is completely WYSIWYG. Tools such as wizards and templates can quickly generate interfaces for common application scenarios.

WeX5's UI component system is completely based on HTML5+CSS+JS, using requirejs, jquery and bootstrap technology, and has built-in support for a large number of rich UI components; for some common scenarios, WeX5 provides a wealth of wizards to facilitate the rapid construction of applications.

WeX5 adopts the hybrid app development model based on phonegap (cordova), which can easily call on mobile device and hardware capabilities, such as camera, map, LBS positioning, compass, call record, file, voice, battery, etc. WeX5 provides rich cordova plug-ins for the local capabilities of the device.

In WeX5, you can not only use built-in components, wizards and cordova plug-ins, but also expand and define your own components, wizards and cordova plug-ins according to your needs; if you think the bootstrap style is not what you want, you can also make a set of components and wizards based on other style libraries (such as Semantic UI) in WeX5.

When developing mobile apps, simulation debugging is a key capability and is extremely important for developers. This is also the weak point of existing hybrid app development tools. WeX5 provides the most powerful debugging support for hybrid app development.

three, Develop Wex5 applications

Start Wex5 Studio, right-click on the UI2 folder in the Resource Model Manager and create a new application "Wex5ToLeanCloud".

Right-click on the folder Wex5ToLeanCloud to create a new .w file Index.w, using the "Standard Page" template, as shown in the figure.

After that, add a button component "Start Test" on the Index.w page (change the label to "Start Test" and the xid to btnStart), as shown in the figure:

Then, add an onClick event to the button btnStart (double-click the space after the onClick event line to automatically switch the system to the background js code view). So far, we have not entered any code in this event handler, as shown below:

 Model.prototype.btnStartClick = function (event){ 
 
 };

After the LeanCloud cloud setup is completed, come back and add the relevant code.

Four, LeanCloud cloud work

First, log in to the Leancloud.cn website and click the command "Create Application" in the management panel, enter the new application name "Wex5ToLeanCloud", and finally click "Create", as shown in the figure.

After successfully creating the application above, switch to the "Settings" page of the control panel and record the AppID and AppKey corresponding to the program under the "Application Key" item. These two important data will be used in the js code programmed in Wex5 later.

[Tip] In fact, we can also do a lot of other work using the LeanCloud control panel, such as creating data structures for clients to call, performing security management, exporting cloud data, and so on.

five, Wex5 is connected to LeanCloud

Now, we continue to modify the relevant code based on the previous Index.x background js code, as shown below:

 define(function(require){
 var$=require("jquery");
 varjustep = require ("$UI/system/lib/justep");
 //①Load LeanCloud related js scripts  
 require("https://cdn1.lncld.net/static/js/av-mini-0.6.4.js");
 varModel = function (){
 this.callParent();
 //②Initialization of LeanCloudSDK
 AV.initialize('hQWAUTOld23aYK1jjdoBWans-gzGzoHsz','eJLPGOEw7dsFxQhAwMjCKERb');
 //When enabling the US node, you also need to add the following statement, which is not required in this example—because we are using a domestic node!
 //AV.useAVCloudUS();
 };  
 Model.prototype.btnStartClick = function (event){  
 //③
 var ZXZTestObject = AV .Object.extend('TestObject');
 var zxzTestObject = new ZXZTestObject();
 zxzTestObject.save({  
 testField:'HelloWorld!'
 }).then(function(){
 alert('Congratulation,Wex5toLeanCloud works!');
 }).catch(function(err){
 alert('error:'+err);
 });
 };
 returnModel;  
 });

Now, let's analyze the above code in detail. First, ① is responsible for loading the LeanCloud related js script. Secondly, the LeanCloudSDK is initialized in the model constructor at ②. Finally, ③ is responsible for creating a simple LeanCloud cloud object (inherited from AV.Object) and naming the object TestObject. In the following save method call, a string attribute testField is created and assigned the value "HelloWorld". As you guessed, the save method is responsible for saving the locally created data to the cloud server. When the above call is successful, the callback function is triggered and the successful call information is displayed; when the call fails, an error prompt is displayed.

six, run

Now, start the Tomcat application server, then right-click on the Index.w file and select the "Run with Browser" command. After that, the system will start the Google Chrome browser that comes with the Wex5 system. After the page starts normally, click the button "Start Testing" and wait for a while, you can see the results as shown in the figure.

Open the "Storage" management page of the Wex5ToLeanCloud backend management panel of the LeanCloud.cn application. You will notice that the TestObject object appears in the "Data" column. After clicking it, the corresponding data created by the Wex5 client will appear behind it, as shown in the figure.

At this point, Wex5 has successfully connected to LeanCloud and modified the cloud operation test!

Of course, since applications developed using Wex5 are cross-platform, you can easily run the above examples on iOS and Android platforms.

seven, summary

The Wex5 development framework is not only open source and free, but also based on mainstream HTML5 technology and development standards. Based on this platform, programmers can quickly develop desktop Web applications, mobile Web applications (including WeChat applications) and mobile APP hybrid applications. What's more gratifying is that WeX5 supports multiple types of backends, including Java, PHP and .NET, and also supports cloud API. Therefore, WeX5 has become the first framework for developing HTML5 applications in China. At the same time, BaaS is also the most popular storage technology solution in the cloud computing era. The high degree of development of Wex5 makes it easy to integrate various BaaS solutions (LeanCloud in this article is one of them). This article only gives a basic framework example of Wex5 application integration with LeanCloud BaaS technology. More practical and challenging applications are waiting for you to explore in depth.

Attached, the sample program test environment of this article:

• Mac OSX 10.11
• Wex5 Version 3.4