Cross-platform mobile development is actually based on HTML5 development software interface and main business logic. Therefore, a complete HTML5 development environment based on mobile platforms is very necessary. Here, I mainly focus on the following four points:
- Editor for Javascript and Jquery mobile
- Inspector of HTML5 Elements
- Javascript remote breakpoint debug
- Mobile platform Javascript development mode
1) editor for Javascript and Jquery mobileWhen talking about Javascript editors, there are many on the market, and everyone has their preferred choice. Here I only recommend three of my favorite ones:
- Aptana studio. Eclipse plug-in update address: http://download.aptana.com/studio3/plugin/install
- Dreamweaver CS6. official address: http://success.adobe.com/en/na/sem/products/dreamweaver.html
- AppMobi. Official Address: http://www.appmobi.com/
Aptana studio has the advantages of being lightweight and integrated with Eclipse, and the code is automatically completed and JS syntax error correction is well done. The overall style is similar to VI, which is a little more helpful:
Dreamweaver CS6 is the most powerful HTML5 development environment, and is the only development tool I know that supports Jquery mobile what you see is what you get (except the official online editor), and Javascript, CSS and HTML are very easy to develop, and the biggest defect is the charge:
AppMobi is very suitable for debugging at different resolutions, and the cool interface is also used for Demonstration: code editing:
Simulator Demo:
I will not talk about the specific installation and use of these tools. let's go straight and try it on your own.
2) Inspector of HTML5 ElementsThere are a lot of such tools, such as firebug on firefox, developer tools on chrome, http watch on IE, and debugging tools on IE, if they are placed on a desktop browser, however, if it is deployed on a mobile platform, especially based on built-in webview such as phonegap, such tools are not very common. Here, we recommend a tool officially mentioned by phonegap: weinreweinre connects the debugger to the device by setting up a server. The principle is described as follows. Java version is not seen after 2.0, therefore, NPM can only be used for installation. By the way, NPM is a Nodejs package management tool, similar to Maven for Java. After Nodejs is installed, NPM is installed. It is very easy to install weinre later: npm install weinre-g if no configuration is added on windows platform, weinre will be installed in C: \ Users \ *** \ AppData \ Roaming \ npm \ node_modules \ weinre \, and then start server: node path-to-weinre-node/weinre -- boundHost-all--- httpPort 8082 here-all-is used to open port 8082 on 0.0.0.0 to avoid remote requests from non-local hosts, add the weinre Proxy: <script src = "http: // computer-ip: 8082/target/target-script-min.js # anonymous "> </script> here, the computer-ip enables the device to connect to the host address, of course, the device and the host network connection problems I will I will discuss it in later articles. Then start the application on the device. Here we take android as an example. IOS is the same. After the device is started, open the chrome browser (webkit-Based Kernel) and access: http: // localhost: 8082/client/# anonymous. If problems occur before, you can see the device connection under the target. After you click it, you will find that the connection turns green. This indicates that you can debug the remote device, later, you can use it like using firebug or chrome Developer Tools. However, it lacks an important function: Remote JS breakpoint debugging, however, I will introduce another tool to implement it later. Let's take a look at the debugging:
3) Javascript remote breakpoint debugHere we recommend using mongodwolf (https://github.com/lexandera/Aardwolf/) to achieve this function, its principle is similar to weinre, is also through the server to remote debug device. After downloading mongodwolf, start server: node mongodwolf_install_folder/app. js-h-d web_app_pathweb_app_path, which contains the web application to be debugged. Then, similar to weinre, you need to add the javasdwolf proxy in html: <script src = "http: // computer-ip: 8500/javasdwolf. js "> </script> <script src =" http: // computer-ip: 8500/js/main. js "> </script> where revoke dwolf. js is system js, js/main. js is the js to be debugged. This main. javascript has been translated by mongodwolf and can be debugged. Then, start the application and debug it on localhost: 8000:
4) Javascript development mode for Mobile PlatformsAlthough the above methods can be used to debug HTML5 on the device, it is estimated that everyone will go crazy during full development, therefore, I recommend that you develop the main interface and logic on the desktop browser. Besides the combination of phonegap and device, the other interfaces are basically the same as those of the desktop browser. So I will first develop a Chrome APP version, first focus on this version, and then transplant it to other platforms, so that only debugging and device-related points will be used on other platforms. I will talk about chrome app content separately later.
