First of all, I have to make a joke that the official documents of Uniapp are really bad, otherwise there is no point in writing this article. For someone who has never written a native plugin before, there are countless pits to climb in order to run the official Demo according to the official documentation.

This paper mainly records the building environment of plug-in development, running Demo, plug-in development, plug-in packaging several stages. Because multiple editors and tools are involved and versions change quickly, this article is only applicable to a specific version.

Set up the environment

The following tools are required

  1. Android Studio, download addressGoogle DeveloperThe version:2020.3.1 Patch 4
  2. HBuilder, download addressThe Android SDK offlineThe version:3.2.16.20211122
  3. The Android SDK offline, download addressThe Android SDK offlineThe version:3.3.0.20211130 - alpha

Related tools and their versions

1. Android StudioInstallation and configuration of

  1. Android StudioThe version I use is2020.3.1 Patch 4Because of the special national conditions, some special tools are needed, the main pit is the need to configure after installationProxy, with common toolsclashFor example,Android StudioThere are two things that need to be modifiedclashThe interface needs to remember this port number

Set Appearance & Behavior->System Settings->HTTP Proxy to 127.0.0.1. The Port number is set to the one in Clash. What you need here is whether your special tool supports HTTP or SOCKS. Because Clash supports both and the Port number is the same, you can choose HTTP or SOCKS here. Note For other tools, the Port number must match the Proxy mode

Once configured, Check connection to see if you can access www.google.com. If the Proxy is successfully accessed, the Proxy is configured successfully, and Android Studio can download the SDK normally, which has been updated.

  1. Modify theExperimentalThe configuration,GradleTo display the task list, you need to deselect that option in the picture

  1. That’s not all, but then we’re going to create a new project at random, and then we’re going to plug in the Android phone, and the Android phone needs to be turned onUSB Debug ModeWithout mobile phones, we can also build a mobile phone simulator, and then we click Run to make the project run on our mobile phones

After running for a while, Android Studio will prompt us with an error. This is because the project is compiled and packaged using Gradle, and Gradle also needs to configure Proxy. Go to the user folder (usually C:\Users\{Windows login user name}) and find the. Gradle folder. Open the gradle.properties file in the folder

SystemProp, HTTP proxyHost = 127.0.0.1 systemProp. HTTP. ProxyPort = 7890Copy the code

The Settings here are the same as in Andiord Studio, with care for mode and port.

Finally, we went back to Android Studio and hit Run again

If the project runs successfully on our phone, the Android Studio configuration is complete.

2. HBuilderandThe Android SDK offlineThe installation of

  1. Download HBuilder, download and install it directly, and register your account, which will be used later. The version I used is 3.2.16.20211122

  2. Download Android offline SDK, Android offline SDK, decompress backup, I use the version is 3.3.0.20211130-alpha

Run the Demo

1. Android StudioImporting official Demo

  1. Will decompress betweenThe Android SDK offlineIn theUniPlugin-Hello-ASCopy the folder, this is aAndroid StudioThe project directory can be copied to a dedicated location
  2. Open theAndroid Studio, click on theFile->New->Import project..., select the one we copiedUniPlugin-Hello-ASFolder. After successful import, we go toHBuilderContinue to

2. HBuilderImporting official Demo

  1. Open theHBuilder, click on thefile->The import->Import from a local directorySelect the one we copied beforeUniPlugin-Hello-ASIn folderUniapp sample project source /unipluginDemodirectory
  2. The editorunipluginDemoThe projectmanifest.jsonConfigure, obtain againAppID, need to remember thisAppIDWe’ll use it later

3. Generate a key and an offline packaging key

  1. Open the DCloud developer Center in your browser and log in

  2. Go to the unipluginDemo project where we just reacquired the AppID, click the app name, and then click Offline Package Key Management. Here we need to create the certificate using Android Studio and use the SHA1 of the certificate to generate the offline package Key

  1. Go back toAndroid Studio, click on theBuild->Generate Signed Bundle/APK...As shown in the figure for subsequent operations, selectAPK, click on theNext

Click on the Create new…

Enter relevant information. Note that the Key Store path must be set to the app directory in the uniplugin-hello-as folder that you copied earlier. Remember parameters such AS Password and Alias, which will be used later

Click Finish and our certificate is created

  1. Modify theUniPlugin-Hello-ASprojectappthebuild.gradleSet the information inside to the information we created when we created the certificate.storeFile fileAdd the name of the certificate we just created, because it was saved inappDirectory, you can not fill in the path, just fill in the name on the line

  1. To obtain certificate information, clickAndroid StudioIn the top right corner of theGradleDouble-click to execute the following figureTask

After the execution is complete, you can see the REQUIRED SHA1 information in the run information bar, and copy the SHA1 data

  1. Go back toDCloud Developer CenterIn offline packaging Key management, fill in the relevant information, save, you can get offline packagingApp Key. Here,App KeyAnd we imported beforeHBuilderRe-acquired during the projectAppIDIt’s different things, so don’t confuse them

4. Run official Demo

  1. inHBuilder, click onissue->Native APP- Local Packaging (L)->Generate local packaged APP resources (R), wait a moment, the console will prompt us to finish packing, we go to the corresponding path, putresourcesIn under theAppIDNamed folder, copied to the one we copied beforeUniPlugin-Hello-ASIn the/app/src/main/assets/appsThe following

  1. Go back toAndroid Studio, we modifyappthebuild.gradle

You need to change the applicationId to the Android package name you entered when you packaged offline that we obtained earlier

  1. Also need toAndroid StudioChanges in theUniPlugin-Hello-ASthemanifests/AndroidManifest.xml

I need to change the value in the red box to the offline packaged App Key

  1. Finally, you can clickrunButton, and if nothing else, the Demo will now run on our phone/emulator

Plug-in development

  1. Create a New Module in Android Studio and go to File->New->New Module… . Template: Select Android Library, and fill in other information as required. Remember Module name and Package name, which will be used later. Click Finish to add the Package

  2. Add gradle dependencies to the Module you create. Add build.gradle dependencies to the Module you create

    CompileOnly 'com. Android. Support: recyclerview - v7:28.0.0' compileOnly 'com. Android. Support: support - v4:28.0.0' compileOnly 'com. Android. Support: appcompat - v7:28.0.0' compileOnly 'com. Alibaba: fastjson: 1.1.46. Android' compileOnly fileTree(include: ['uniapp-v8-release.aar'], dir: '.. /app/libs')Copy the code

    There should be some dependencies that can not be added, but actually there is no detailed test, if you do not want to torment, or according to the official recommendation to add, if you have time to torment, you can study the logic of dependency here.

  3. Add the source file and create the corresponding Java Class file

For specific code content, you can refer to the official documentation, of course, the official documentation is not clear, the best is to directly refer to the source code of the other plug-ins in the Uniplugin-Hello-as project

  1. After compiling the source code, we also need to modify the app build.gradle to add our new plugin dependencies

  1. Also need to add the introduction of plug-ins, modificationsapp/assets/dcloud_uniplugins.json“, add the information of our new plug-in, follow the information of other plug-ins, fill in the relevant information

  1. In this way, our plug-in can be loaded into APP after packaging, but we still need to call the corresponding plug-in, go back to HBuilder, modify the relevant page code, load the new module, and call the relevant function interface

  1. After completing the modification of the page, click Issue -> Native APP- Local Package (L)-> Generate local package APP resources (R). When the console will prompt us to complete the package, we will go to the corresponding path and put the folder named AppID under Resources. Copy to us before copying out UniPlugin – Hello – AS in/app/SRC/main/assets/apps here, after every time we update the page content, will need to repeat this step

  2. Finally, you can click the Run button and, if nothing else, the new plugin will run on our phone/emulator

  3. This is the way to develop a page on HBuilder and run it on Android Studio. This is the offline packaging solution mentioned by UniApp. If we want to develop a page on HBuilder and run it on HBuilder, we need to package our plugin and put it on HBuilder. Next, let’s try the packaging of plug-ins

The plug-in package

  1. Click Gradle in the upper right corner of Android Studio, select the Task for the plug-in you want to package, go to assembleRelease in Build or Other, double-click it, and wait for the compilation to complete

  2. Go to the uniplugin-hello-as folder, find the folder of the plugin we packaged, and find the packaged.aar file, usually under the plugin package name \build\outputs\aar

  3. Create a new folder somewhere else with the same name as the Java Class file we created earlier, because it will affect the following operations, of course, it can be different, please refer to the official documentation for details

  4. Create an Android folder in the new folder and copy the.aar file generated from the package into it

  5. Create a package.json file in the newly created folder and add the following

    {"name": "name of the previously created Java Class file ", "id": "name of the previously created Java Class file ", "version": "0.0.1", "description": The introduction of "plug-in", "_dp_type" : "nativeplugin", "_dp_nativeplugin" : {" android ": {" plugins" : [{" type ":" the module ", "name" : "IntegrateType ": "aar", "minSdkVersion" : 21}Copy the code

    There are several problems here. First, the contents of the file must be in strict JSON format, and there is often a comma too much, which causes the file parsing to fail. Then, there are several names involved. The name of the Package name.Java class file is the name of the Package name.Java class file that we filled in when we created the plug-in module. General look like IO. Dcloud. Uniplugin. RichAlert

  6. Put the entire new folder in our HBuilder project directory under the NativePlugins directory, if there is no nativePlugins directory, can create a new one

  7. Open HBuilder and add a plug-in to your project’s manifest.json

If our plug-in is not in the list of plug-ins, you can go back and check our previous package.json configuration and the file name of the plug-in, etc. If you make a mistake, the plug-in will not know anything else

  1. Add the plug-in, the following development is simple, according to the normal development, and the introduction of the plug-in

  2. Due to the introduction of native plug-ins, when the real machine is running, it is necessary to change the custom debugging base, follow the operation -> Run to mobile phone or simulator -> make the custom debugging base, and wait for the completion of the base

  3. Then at run time you need to select the custom base. Go to Run -> Run to Phone or Emulator -> Run Base to select the custom base

  4. Finally, run the app as normal -> run to the phone or emulator -> run the device, and the entire app and plug-in will run

  5. It is possible to get an error that [JS Framework] is currently running on a pedestal that does not contain native plug-ins. It is also likely to be caused by package.json and the name of the plugin folder