preface

In the process of development, I learned the configuration of Uni-App Android side and the simple production of Uni-App plug-in. There are some knowledge to search by yourself. If there is any wrong, please point out!

This article quotes uniApp android native plug-in development process – author AndroidLMY, if there is infringement, please private message delete.

Preparing the development Environment

  • Open the following link: Android Studio, enter JDK1.8 to download the official website, or directly baidu JDK1.8, also can enter the download official website.
  • Android Studio
  • App Offline SDK download: App Offline Package SDK (dcloud.net.cn)

Android configuration

After downloading the offline SDK of the App, use Android Studio to open the official SDK package file, hBuilder-Hellouniapp. Use import to import, not open.

Go to app->build.gradle

Configuring Mirror Acceleration

Modified the configuration. The accelerated mirroring was configured due to network problems.

As follows:

    maven {
        url 'https://maven.aliyun.com/repository/google'
        name 'Google'
    }
    maven{url 'https://maven.aliyun.com/repository/public'}
    maven{url 'http://maven.aliyun.com/nexus/content/groups/public/'}
    maven{url 'https://maven.aliyun.com/repository/central'}
    maven { url 'https://maven.aliyun.com/repository/jcenter' }
Copy the code

Then click on the top right corner

To synchronize

Change the package name and program name

If you need to configure a custom package name (not to change the installed software name)

Please modify the location in app->build.gradle file

DefaultConfig {applicationId "com.ceshidab.app" minSdkVersion 21 targetSdkVersion 26 versionCode 1 versionName "1.0" multiDexEnabled true ndk { abiFilters 'x86' , 'armeabi-v7a' } manifestPlaceholders = [ "apk.applicationId" : "Com.ceshidab. app", "GETUI_APPID" : "unipush APPID", "plus.unipush.appid" :" Unipush APPID", "plus.unipush.appkey" : "unipush appID ", "plus.unipush.appkey" : "Unipuish appkey", "plus.unipush.appsecret" : "unipush secrety"]}Copy the code

After changing the package name, remember to change the app-> SRC ->main-> Java folder

The com ceshidab app folder level corresponds to the package nameCopy the code

Then change the package name in the app-> SRC ->main-> Androidmanifest.xml file.

To change the name of the installed software, choose app > SRC ->main->res->values->strings.xml

<resources> <string name="app_name">APP name </string> </resources>Copy the code

Perform the following steps to configure a certificate

Use Java to generate a signature key. At this point, you should have Java and Android installed.

keytool -genkey -alias test -keyalg RSA -keysize 2048 -validity 36500 -keystore test.keystore
Copy the code

Android platform signing certificate (.keystore) generation guide – DCloud q&A, which has a detailed explanation. Note that the alias, password and other information generated when the key is generated will be used later in the Android packaging process.

Next, configure the Android package certificate information

The location is in app->build.gradle file

SigningConfigs {config {keyAlias 'test' // Certificate alias keyPassword 'test' // Certificate password storeFile file('test.keystore') V1SigningEnabled true v2SigningEnabled True}} v1SigningEnabled v1SigningEnabled true}}Copy the code

UNI program packaging and Android third party configuration

Generate local packaging resources

First use the HBX editor to generate android packaging resources

Then go to dev.dcloud.net.cn/ and apply for a developer account.

A new APP will be generated synchronously on the website. Click the APP name to enter the configuration, and then click the left offline packaging KEY Management to configure the following information.

Use HBuilder X editor to generate Android package resources. Go to Publish -> Native APP Native Package -> Generate Native Package APP resources. When the program finishes executing, it generates the packaged resources in the unpackage-> Resources folder.

Copy this folder into your Android project as app-> SRC ->main-> Assets ->apps.

Note that the __UNI__888888 folder is copied.

Then modify two Android profiles.

app->src->main->assets->data->dcloud_control.xml

< hBuilder > <apps> </hbuilder> <hbuilder> <apps> </hbuilder>Copy the code

app->src->main->assets->apps->__UNI__8888888->www->manifest.json

{ "@platforms" :[ "android" , "iPhone" , "iPad" ], "id" : "__UNI__8888888" , "name" : "test" , "version" :{ "name" : "1.0.0", "code" : "100"}, "description" : ""," launch_path ":" __uniappview. HTML ", "developer" : {" name ": "" , "email" : "" , "url" : "" }, "permissions" :{ "UniNView" :{ "description" : "UniNView native render "}}, "plus" :{" userAgent ":{"value" : "uni-app", "concatenate" :true}," splashScreen ":{"target" : "id:1" , "autoclose" :true, "waiting" :true, "delay" :0}, "popGesture" : "close" , "launchwebview" :{ "render" : "always" , "id" : "1" , "kernel" : "WKWebview" }, "statusbar" :{ "immersed" : "supportedDevice" , "style" : "dark" , "background" : "#F8F8F8" }, "usingComponents" :true, "nvueStyleCompiler" : "uni-app" , "compilerVersion" :3, "allowsInlineMediaPlayback" :true, "uni-app" :{ "compilerVersion" : "3.1.22", "control" : "uni-v3", "nvueCompiler" : "uni-app", "renderer" : "auto", "nvue" :{"flex direction" : "column" }, "nvueLaunchMode" : "normal" }, "launch_path" : "__uniappview.html" }}Copy the code

This file is the package ID and generally does not need to be modified. Change the ID in app-> SRC ->main->assets->data->dcloud_control.xml.

Modify dcloud_appKey in location app-> SRC ->main-> Androidmanifest.xml, described below.

At this point, an APP with a signature but no extension configuration is configured.

Wechat payment and login configuration

First of all, go to the wechat platform to apply for the required KEY value, fill in the package name you modify the package name, and then input the wechat required certificate value (android certificate generated above), first hit an APP, installed on the phone. Then install wechat signature acquisition tool, input your package name, will calculate a value, copy to the wechat platform.

Then check the function in HBuilder X and fill in the required key. There’s also the step of filling out the configuration in the Android Project, and then at the end.

Note: The UNI sample project already has the required extensions integrated, no need to add them again.

Android Project configuration

Modify the app-> SRC ->main-> Androidmanifest.xml file, which contains various configuration information, official to give very detailed.

<? The XML version = "1.0" encoding = "utf-8"? > <manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" Package =" here is your package name ">... The official document content < application android: name = "IO. Dcloud. Application. DCloudApplication" android: allowClearUserData = "true" android:icon="@drawable/icon" android:label="@string/app_name" android:largeHeap="true" android:debuggable="true" > ... Contents of official documents <! <meta data android:name="com.amap.api.v2.apikey" android:value=" amap.api.v2.apikey" /> <service android:name="com.amap.api.location.APSService" /> ... Contents of official documents <! Begin --> <meta-data android:name="WX_SECRET" android:value=" wechat secret" /> <meta-data android:name="WX_APPID" <activity android:name=".wxapi.WXEntryActivity" android:exported="true". android:label="@string/app_name" android:launchMode="singleTop"> <intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <data Android: Scheme =" Intent-filter "/> </activity> <! -- wechat sharing configuration end --> <! - pay WeChat configuration start - > < activity android: name = ". Wxapi. WXPayEntryActivity "android: exported =" true" Android :launchMode="singleTop" /> <meta-data android:name="WX_APPID" android:value=" wechat appID "/> <! -- wechat Pay configuration end -->... Contents of official documents <! - here as key dcloud_appkey - > < meta - data android: name = "dcloud_appkey" android: value = "developers need to log on to https://dev.dcloud.net.cn/ to apply for the signature" /> </application> </manifest>Copy the code
Dcloud_appkey Must be configuredCopy the code

Inside the permission to a lot of, according to individual needs to add and delete.

Weird pits and tricks

Wechat share small program

Uni. Share ({provider: 'weixin', scene: "WXSceneSession", // fixed value type: 5, imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/962fc340-4f2c-11eb-bdc1-8bd33eb6adaa.png', title: MiniProgram: {id: 'gh_abcdefg', path: 'pages/index/index', type: 0, webUrl: }, success: ret => {console.log(json.stringify (ret)); }});Copy the code

Global popup window

Create a new nuve file and add the page in the page. Json file.

{ "path": "pages/popup/popup", "style": { "navigationStyle": "custom", "background": "AnimationType ": "fade ", "enablePullDownRefresh": false}},Copy the code

Every time you need a popover, just keep the current page and jump to it. Note: Only in the APP side.

uni.navigateTo({
    url: 'pages/popup/popup'
});
Copy the code

Popup window sample

<template> <view> <view class="mask" @click="goBack"></view> <view class="popup"> <view class="shop-box" @touchmove.stop.prevent> </view> </view> </view> </view> </view> </view> </template> <script> import {mapGetters} from 'vuex';  export default { data() { return {}; }, computed: { ... mapGetters(['copyInfo']), }, created() {}, methods: { goBack() { uni.navigateBack({ delta: 1 }); }, goDetails(){ uni.redirectTo({ url: '/pages/a/a/? ' + this.ObjectToParams({p:1}) }); }, ObjectToParams(params) { let ParamsSrt = '? '; Object.entries(params).forEach(([key, value]) => { ParamsSrt += `${key}=${value}&`; }); ParamsSrt = ParamsSrt.substring(0, ParamsSrt.length - 1); return ParamsSrt; }}}; </script> <style scoped> .popup { position: fixed; bottom: 0; right: 0; left: 0; top: 0; justify-content: center; align-items: center; } .mask { position: fixed; bottom: 0; right: 0; left: 0; top: 0; background: #000; Opacity: 0.5; } </style>Copy the code

NUVE attention

Nuve does not have a z-index. The further down the code, the higher the hierarchy.

Simple making and understanding of uni-App plug-in

First of all, I would like to thank the big guy’s article for inspiring me

Address uniApp Android native plugin development process – author AndroidLMY

You can go straight to this article!

Personal understanding

Android file creation

Copy the uniapp-v8-release.aar package (name may be different) from app libs directory to toastplus libs in a new Android Library module in Android Project Then modify the build. Gradle file in the newly created modle to introduce the AAR package

/ / repositories {repositories {dirs 'libs'}} dependencies {implementation fileTree(include: [ '*.jar' ], dir: 'libs' ) implementation fileTree(include: [ '*.aar' ], dir: 'libs') implementation' com. Android. Support: appcompat - v7:28.0.0 '/ * uniapp required library -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / implementation 'com. Android. Support: recyclerview - v7:28.0.0' implementation 'com. Facebook. Fresco ": fresco" : 1.13.0' implementation "Com. Facebook. Fresco" : animated - GIF: 1.13.0 "/ * uniapp required library -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- end * /}Copy the code

Click on the top right corner to synchronize. Create a ToastPlus class in the Modle directory that inherits from UniMoudle. Note: If you have imported the ARR file correctly, just follow the editor and let it import automatically.

Below paste the code of big guy

package com.example.toastplus; // Import android.widget.toast will be created automatically; import com.taobao.weex.annotation.JSMethod; import com.taobao.weex.bridge.JSCallback; import io.dcloud.feature.uniapp.common.UniModule; public class ToastPlus extends UniModule { JSCallback jsCallback; String path = "" ; / / @jsMethod (uiThread = true) public void processData(String data, uiThread = true) JSCallback jsCallback) { this.jsCallback = jsCallback; if (mWXSDKInstance ! = null && mWXSDKInstance.getContext() ! = null) {path = data + "+(processing completed)"; Jscallback.invoke (path); jscallback.invoke (path); @jsMethod (uiThread = true) public void showToast(String message) {if (mWXSDKInstance! = null && mWXSDKInstance.getContext() ! = null) { Toast.makeText(mWXSDKInstance.getContext(), message, Toast.LENGTH_SHORT).show(); }}}Copy the code

Then go to the app->dcloud_uniplugins.json file and add the plugin information

{"nativePlugins" : [{"plugins" : [{"type" : "module", // Do not change "name" : "toastplus", // the name of your new module" class" : "Com.example.test.toastplus" // Complete class name package name + class name}]}]}Copy the code

Creating a UNI project

Again, copy the big guy’s code and add a little understanding

<template> <view class="content"> <view class="button1"> < button@click ="showToast(message)"> </view> <view class="button2"> < button@click ="processData(WaitProcessData)"> </button> </view> </view> </template> < script > / / uni. RequireNativePlugin (" are you the name of the new module "); App ->dcloud_uniplugins.json const ToastPlusModule = uni.requirenativePlugin ("toastplus"); Export default {data() {return {message: "I'm a long Toast", waitProcessData:" I'm a data to be processed ",}; }, onLoad() {}, methods: { showToast(message) { ToastPlusModule.showToast(message); }, processData(data) { ToastPlusModule.processData(data, (processokdata) => { ToastPlusModule.showToast(processokdata); }); ,}}}; </script> <style> ... </style>Copy the code

Debug your plug-in

Introduce the new module in app->build.gradle.

repositories { flatDir { dirs 'libs' } } dependencies { implementation fileTree(include: [ '*.jar' ], dir: 'libs' ) implementation fileTree(include: [ '*.aar' ], dir: 'libs') implementation' com. Android. Support: appcompat - v7:28.0.0 '/ * uniapp required library -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / implementation 'com. Android. Support: recyclerview - v7:28.0.0' implementation 'com. Facebook. Fresco ": fresco" : 1.13.0' implementation "Com. Facebook. Fresco" : animated - GIF: 1.13.0 "/ * uniapp required library -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / base needs to be over, Must add implementation 'com. Making. Bumptech. Glide: glide: 4.9.0' implementation 'com. Alibaba: fastjson: 1.1.46. Android' / / Here is your new module implementation Project (": toastplus ")}Copy the code

Then package the project you created. Refer to generate local packaging resources above.