Why wait for VS2015? Take a look at the cross-platform development of mobile end under VS2013

The day before ready to download VS2015 preview, to VisualStudio official website to see, found that Microsoft released VisualStudio2013 plug-in--visual Studio Tools for Apache Cordova, to achieve cross-platform development. Official website: http://www.microsoft.com/en-us/download/details.aspx?id=42675, Below is:

Click the download extension, double click to start the installation, the first time the following error occurred:

This is missing the Windows Management Framework 3.0,:http://www.microsoft.com/en-us/download/details.aspx?id=42675, downloaded after installation, Restart the installer.

Installation interface, everyone according to their own computer environment installation, but also to install the Android SDK, Java environment, ITunes, these recommendations are installed separately, the speed does not give force, do not know when the installation to the other, select all, click Next, complete the installation. However, it seems that Microsoft's official Android SDK contains the new Android simulator, everyone who fast speed, have time, wayward, can see. I'm using the Android SDK from the previous one, so the emulator is still old.

first, the preparation of Hello,world

Open VS2013, New project, select Typescrip Project,

If you have successfully installed the previous installation, you should see the following interface:

Some of the following interfaces will appear:

But this error does not affect the compilation, can still be compiled successfully, directly shut down.

You can first look at the current project structure,

Looks a lot like a Web project where you can see apps such as Android, iOS, Windows, WP8, and more.

Since my Computer configuration is AMD CPU + WIN7 64-bit system, I cannot install the emulator of Apple virtual machine and WP8 (must WIN8 system and above), here can only demonstrate the operation effect of Android Simulator. You can try it if you have the conditions.

Since we are going to write Hello,world, then open index.html, we see the following code:

Modify Hello,your ... is ready! to Hello,world. Here's a look at how to run:

We can see a lot of debugging options, we'll use the default first, which says Android Emulator. Click Run, you will see open Google Chrome,

When we get here, our Hello,world is finished. below to see what the effect on the Android emulator above, we choose Android Emulator, and then click Run, note here 5037 Port is occupied will appear error, so wrong please first see whether the port is occupied, the simulator can not start. You can refer to the Android Studio 1.0.2 Project-from the development process of an app to understand how the Android studio blog Emulator could not start a process.

After a long wait, the Android simulator finally started. Let's see how it works,

To see what the app's icon is,

is a hard to see picture, because the project is oriented to the three mobile platforms, so the default icon will not be Android, let's see how to modify the default icon.

, replace the corresponding directory of the picture, note the picture size to be the same. I have no good icons here, just use the default Android. Like iOS and WP8, you can replace icons. Similarly, replace the corresponding picture, you can modify the program's Start screen,

second, introduce Bootstrap, build the app

Since the use of HTML + CSS + JS for the development of mobile applications, then some third-party CSS and JS Library is available, below to write a comprehensive example to see.

Haha, see the bar, Bootstrap style button. Let's take a look at what code is added:

See, just like HTML page, add JS method, bind can. Of course, we can also look at the scripts below the Index.ts, you can also add JS code inside, to achieve the binding of click events,

Look at this JS code, is not a kind of modular feeling. And in VS2013, the AddEventListener method, with very detailed hints,

See, type: "Click", is a single event, a total of 122 events, we can choose the need to bind.

I've added an HTML page that allows you to jump through hyperlinks to achieve a similar activity switch in Android.

After the project is deployed to the Android emulator, the APK is generated under the Debug directory, and we can install it on our own phone for testing, I have tested it on my phone, and the effect is the same on the emulator.

About more features how to achieve, I think probably with the following TS related, to learn about the typescript~~

third, build iOS and WP8

We just looked at the Android development process, below we see how our project is published as an app for other platforms, right-click on the project, open the Project Properties window:

Click the Configuration Manager button, open Configuration Manager, we select iOS, click OK,

Next, we see that the debug option becomes the following list:

In order to see the obvious effect, we choose Ripple-ipad3, run,

is a picture of the ipad, suddenly found here to find the button can also be clicked, but the pop-up message box is inside the page. We have an iphone that can be tested on the real machine.

Summary:

Using HTML + Js + CSS to develop mobile apps, the existing front-end framework can be used in mobile apps such as Angularjs, Backbonejs and jquery, and of course bootstrap, making UI development and design very simple and flexible. In VS2015, Microsoft, in addition to Apache Cordova, also offers a cross-platform approach to Xamarin, you can try.

With regard to project testing, if you use Intel's CPU and WIN8 system, you can install an Apple virtual machine and test it on an Apple virtual machine with an iOS emulator installed. The WIN8 system can be installed with the WP8 emulator, which of course supports Android, enabling the development and testing of multi-platform environments.

Some people may say that the development of the app performance is not good, but the app is running on the client, slow so what is the relationship, not on the server, there is a large number of traffic, to deal with big data. Of course, do game development, there is a professional game engine, but also not to use this.

If you feel this article is well written, please praise, give me the power of collaboration. welcome you can join to the following QQ group for discussion and study.

Here in advance to wish you a Happy Christmas Eve!

Cloud drizzling

QQ Exchange Group: 243633526

Blog Address: http://www.cnblogs.com/yunfeifei/

Disclaimer: The original text of this blog only represents my work in a certain time to summarize the views or conclusions, and my unit does not have a direct interest in the relationship. Non-commercial, unauthorized, post please keep the status quo, reprint must retain this paragraph statement, and in the article page obvious location to the original connection.

If you feel that my blog is helpful to everyone, please recommend supporting one, give me the motivation to write.

Why wait for VS2015? Take a look at the cross-platform development of mobile end under VS2013