Sencha Study Notes 2: package your first Sencha Android app apk installation package, senchaapk

Sencha Study Notes 2: package your first Sencha Android app apk installation package, senchaapk

We have a preliminary impression on sencha through the introduction in the previous translation official Article. At the same time, we also generated the first sample application code framework through this wizard, many people may think that the next step should be based on the detailed information prompted by the Wizard to see how the next application is created, but I think we can change the learning path.

Tiandi Zhuhai is a leader with quick success, so with the first automatically generated code example, he is eager to know how to package this example into an android apk installation package and install it on the target Android machine. If Liu Bei is doing well, he should look at Shu as soon as he needs to be a good man.

Next we will try to use a HelloWorld example to show how to use the sencha command to package the sencha application into an apk installation package and install it on the target Android device.

Step 1: Create sample code

According to the method described in the previous translated official Article Sencha study Note 1: Getting Started with Sencha Touch-Getting Started Guide to Sencha Touch, first go to the directory where the sencha sdk is located, then run the corresponding sencha generate app command to generate the corresponding application framework file in the sdk's parent directory:

Command output result for creating sample code:

Step 2: Modify the View File app/view/Main. js in MVC mode to change the display content

This step and step 3 can actually be skipped. If you are sure that the newly created sample application is running without any problems, after all, Tiandi Zhuhai is just a beginner, I believe that the reader should be interested in this article, for example, I am generally a beginner, so I suggest taking a few more steps to get a preliminary impression on the code automatically generated by sencha.

App/view/Main in the sample code framework generated by the sencha command. js is the View in MVC mode. It is responsible for displaying the ui to users. Therefore, we can modify some of the options to modify the display of the ui. The Default Application Generated by sencha has two tab labels. Next we will change the title of one of the labels of the application to "My First Sench App ", change the subject content to "What an app! "; And change the title of another label to" Woohoo ":

Save the modification, and then check whether the modification is successful in the browser in the next step.

Step 3: run the sencha command to start the web Server

After modifying the view display in MVC, We need to debug and check whether the modification is successful in the browser. We can use most popular web servers to access the example application, but for the sake of simplicity, and our main purpose is to learn sencha touch, we use the web server provided by the sencha command here to do this. It shows the process of opening the sencha web server through commands. Note that before executing this command, I first cd it to the application directory, in this way, we do not need to create additional paths in the browser to access the application:

Note that the information printed in the last line contains the port information for accessing the application in this example: 1841. We need to use it next.

Step 4: Access the application through a browser

Finally, our application is located through the browser. I believe that this method of web server and browser access is mainly designed to debug the sencha touch application for convenience, after all, sencha touch is built on a browser or a hybrid application shell, so browser debugging is the most convenient.

The browser displays the sample content displayed in the modified view through the local ip address and the port mentioned in the previous step. We can see that the modified content has taken effect:

Step 5: Determine the sdk version

In this step, determine the sdk version we have downloaded on the system, when you call the sencha command to generate an apk package, you must specify the corresponding api level that the sencha sample application should compile in addition to the location where the android sdk is located.

According to my own experience, Tiandi Zhuhai sub-rudder believes that there should be two ways to determine the api level supported by the current sdk, the first is to check the api level folders under the platforms directory under the sdk directory:

Second, we can use "Android SDK Manager" to determine which levels of Android APIs are installed:

Through the above two methods, we can know how many levels of Android systems are currently supported by our system, if you do not meet your needs, you can use the Android SDK Manager to download more content that meets the requirements. Here we will select one of them, for example, we select api level 19.

Step 6: Modify the packager. json file in the app's top-level directory

This file is a file that instructs sencha how to package the application. There are several changes to this file.

First, we need to modify the namespace of the example application. In fact, in the view of Tiandi Zhuhai sub-rudder, The namespace on Android is equivalent to the package name of the application. We will verify it next. First, modify the displayed namespace applicationId:

The value of this option is "HelloWorld" before modification. To follow the package naming rules of Android, we need to modify it to the following format "com. sample. HelloWorld ". Do not change other formats of the image. Retain the original value.

Next, we need to modify the signature and other related information, as shown in:

First, modify platform to Android, because our current example shows how to package the Android apk installation package. The second step is to set the certificate signature information, which can be obtained from the previous steps. Finally, specify the path of the android sdk and the api level obtained in the previous step. Do not forget to save the modification.

Step 7: Call the sencha command to generate the apk installation package

Now everything is ready, and the configuration file to be packaged has been completed in the previous step. We only need to execute the "sencha app build native" command, the corresponding apk installation package can be generated if no exception occurs. If there is a problem in this process, we recommend that you carefully check the error output prompt, which is often caused by the failure to configure the configuration file in the previous step. Of course, sencha not only provides the "sencha app build native" command to package the apk installation package, but also provides other packaging methods, in the future, I think I will try it and share it with you if necessary.

See the output information of executing the sencha package apk command:

The packaged apk installation package is saved in the subdirectory of the build folder under the top-level directory of the sample application. For details, see:

Step 8: Install the installation package on the target machine and run it.

With this apk installation package, we can use the "adb install" command to install the installation package to the target Android device, just like other common installation packages. After the application is installed, the icon is as follows:

Click the application icon to open the sample application. You can see that the content of the application is consistent with that of the sencha sample application accessed through a browser:

Step 9: verify the application namespace and the sample application package name.

In step 6 above, we are in packager. in the json package configuration file, set the namespace of the sample application to "com. sample. helloWorld ", I told you that the namespace should be the package name of the Android app, here, we can use the "pm list packages" command of Android to list all installation packages for verification:

We can verify that all the preceding package names and namespaces are the same thing.

Author	Independent blog		CSDN
Tiandihui Zhuhai sub-Rudder	Http://techgogogo.com	Service No.: TechGoGoGo Scan code:	Http://blog.csdn.net/zhubaitian