Recently, I may have to pick up a uni-app project. I haven’t touched it before, so I learned a bit. Fortunately, uni-app is basically a combination of Vue and WeChat applets, so there are not too many problems in writing code. I don’t understand Baidu. It can basically be handled at once. After writing the demo, the content of the demo should be able to tell customers that I can do it, but I first recorded a video with a mobile phone, and then showed the recorded video to the customer. But this is not good enough, because I don’t know what problems will be encountered after packaging into apk, so I still fumbled to package it into an installable apk, and let customers try it directly.
The following steps, don't skip steps, look step by step, you can definitely succeed.
1. Tools used this time:
1. Code development tool: HBuilder X
2. Apk packaging tool: Android Studio
3. APK packaging SDK: Android Offline SDK (download address: Android Offline SDK )
3. A tool to generate a signature certificate: jdk1.8 (It is said on the Internet that you only need to install jre, but jdk contains jre, so install jdk directly. After jdk is installed, you need to configure environment variables. For the configuration of jdk environment variables, you can see this: jdk environment variable configuration )
4. The website that generates the appkey: DCLOUD's Developer Center (URL: Developer Center )
2. Configuration before export
Open the manifest.json file in the uni-app project in HBuilder X , and some configurable content will pop up. This time we will keep it simple and only configure the basic configuration. Among them, if the uni-app application identification (AppID) is not available by default, just click Re-acquire later , it will warn you, but it is fine after clicking, and an AppID will be generated for you. Then choose the vue version for development and use, just choose according to the actual situation, and the others seem to be filled in at will (if you are just doing a packaging test).
3. Export the uni-app project for packaging
After the project code is successfully tested and run on our mobile phone, we need to export the uni-app project. Click Publish above HBuilder X --> Native App-Local Packaging --> Generate local packaged App resources . If it is the first time you click, you may be prompted to install something, follow the prompts and agree to the installation.
After the export is successful, the console below HBuilder X will tell you the export path. So far, the task of HBuilder X is completed.
4. Download Android Offline SDK
Android offline SDK download address: Android offline SDK
This sdk may not only be used to package apk, but currently I only use it to package apk.
5. Move the folder exported by HBuilder X to the offline SDK
Move the folder named after AppID exported by HBuilder X just now (the upper level of the www folder) to the HBuilder-Integrate-AS\simpleDemo\src\main\assets\apps path of the offline SDK. By default, the There is a folder called __UNI__A , this is deleted directly, we will not use it.
6. Android Studio imports the sample projects in the SDK
If you install Android Studio for the first time , you will be prompted during the installation process to see what is missing. I can’t remember clearly. Just cancel the prompt, and then follow the guide to install step by step. After the installation, there seems to be no problem.
Then import the HBuilder-Integrate-AS folder in the offline SDK to Android Studio . Note: Do not appear Chinese in the file path! Otherwise, an error will be reported!
7. Modify the appid in dcloud_control.xml
Next, don’t worry about why the file structure of my Android Studio in the screenshot is different from yours. Some folders or paths seem to be hidden in the screenshot. It’s not important, I’m just here to pack it.
Find the dcloud_control.xml file under assets/data , click on it, and change the appid value in the file to the appid generated in HBuilder X. It doesn't matter if you can't remember the appid. Do you still remember the folder you moved in step 5? Its file name is appid
8. Generate Android certificate signature
I refer to other people's articles for this step, so I won't talk about it, just follow his steps (although the configuration of the jdk environment variable is written in his article, it is best for Xiaobai to read this: jdk environment variable configuration), and write down the generated The file path of the certificate, the SHA1 security code of the certificate, the alias (alias) of the certificate, and the two passwords set (for fear of forgetting, the two passwords are set the same), which will be used in the subsequent steps. Reference URL ( to generate Android certificate signature ).
9. Generate appkey
Go to the developer center of DCLOUD (URL: Developer Center ), if you follow my steps, after the appid is generated in the second step HBuilder X , you can see this application in the developer center My application, click The application name will jump to the management page of the application.
Click the Offline Packaging Key Management button above to enter the menu for generating appkeys. My appkey has already been generated for this menu, so it will be different from the first time you click in, don't worry.
Select platform: We choose Android because we are packaging apk this time.
Android package name: The package name cannot be written casually, otherwise an error will be reported after the apk is installed and opened! Its value is in the \HBuilder-Integrate-AS\simpleDemo\src\main\ AndroidManifest.xml of the offline SDK . If it has not been changed, it should be the same as mine. It is com.android.simple
Android certificate signature SHA1 : The SHA1 security code you wrote down in step 8.
After filling these, click confirm or something, and the appkey should be generated.
10. Configure appKey in AndroidManifest.xml
Back to Android Studio , configure appKey in AndroidManifest.xml 
11. Package apk
Now everything is ready, only packaging is left, click Build above Android Studio --> Generate Signed Bundle / APK...
The packaging window pops up, select APK , and click Next
Click Choose existing... , select the certificate storage path that you wrote down in step 8, and the Key store path will be automatically filled, Key store password, Key alias, key password , these three items are also set in step 8. If you can't remember the two passwords, follow the tutorial in step 8 to regenerate a certificate. Remember passwords according to your own needs (Xiaobai still check it, remember the password). After filling in all, click Next below
The last is to select the export path, then select release , and then click Finish below .
After the export is successful, the Build console below Android Studio will prompt BUILD SUCCESSFUL .
Then you can find the packaged apk file in the release folder of the export path. The screenshot shows the default export path. You can choose your export path during release.
Then install the apk just now on the phone and open it. If it opens normally, it is basically successful.
When I was exploring, after the package was successfully installed on the mobile phone, when I opened the app, it was prompted that the appkey did not exist or was misconfigured . Later, I found out that when the appkey was generated in step 9, the package name was wrong, and it must be the same as the AndroidManifest.xml file . The same as the package name in .
For more advanced content, I will post the article after I have explored it, give me a lot of likes, and thank you for your support!