AnyRTC uni-app cross-platform SDK released! There is always one for you!

Brief introduction

Recently, we have received a lot of comments and suggestions from developer partners, let us adapt the uni-app platform to meet their cross-platform development needs. AnyRTC adheres to providing a convenient development environment for developers and supporting them. After half a month of hard work, it finally completed the development and testing of uni-app cross-platform SDK.

As of today, anyRTC cross-platform SDK has included Electron, Flutter, and uni-app frameworks, providing more choices and a better development environment for many developers.

What is uni-app

uni-appIt is a front-end framework that uses Vue.js to develop cross-platform applications. Developers write a set of codes that can be compiled to iOS, Android, H5, applets and other platforms.

uni-app inherits from Vue.js and provides a complete Vue.js development experience.

The uni-app component specification and extended api are basically the same as the WeChat applet. Developers with a certain amount of Vue.js and WeChat applet development experience can quickly get started with uni-app and develop compatible applications.

Advantages of uni-app

uni-app has a strong competitive advantage in six key indicators such as cross-terminal quantity, scalability, performance experience, surrounding ecology, learning cost, and development cost.

Functional framework

uni-appAs can be seen from the functional framework diagram below, uni-appin the cross-platform process, the platform's proprietary capabilities can be elegantly invoked without sacrificing the platform's characteristics, and it is truly possible to learn from each other's strengths.

One set of code, running on multiple platforms

uni-appImplemented a set of code that runs to multiple platforms at the same time; as shown in the figure below, a set of code runs to iOS simulator, Android simulator, H5, WeChat developer tools, Alipay applet Studio, Baidu developer tools, ByteDance Developer Tools, QQ Developer Tools (8 terminal tabs at the bottom represent 8 terminal emulators):

The actual operating results are as follows:

to sum up

For technicians: instead of learning so many platform development technologies and researching so many front-end frameworks, it is enough to learn uni-app based on vue.
For the company: uni-app is an efficient tool for lower cost and coverage of more users.

uni-app real-time audio and video fast access

Take the Android platform as an example to introduce the uni-app native plugin

What is uni native plugin

The uni native plug-in refers to encapsulating your natively developed functions into a plug-in package according to the specification, and then you can call your developed native capabilities in the uni-appfront-end project js.

Development environment

• JAVA environment jdk1.7+ (optimal 1.8)
• Android Studio download link: Android Studio official website OR Android Studio Chinese community
• Download the uni applet 2.9.8+SDK details ;
• HBuilderX-2.9.8+

Code

An example to illustrate the extended module:

1. Create the Module module of Android Studio

• Create a library module in an existing Android project. E.gTestModule
• Configure the build.gradle information of the newly created Module.

 //导入aar需要的配置
 repositories {
     flatDir {
         dirs 'libs'
     }
 }
 dependencies {
     //必须添加的依赖
     compileOnly 'com.android.support:recyclerview-v7:27.1.0'
     compileOnly 'com.android.support:support-v4:27.1.0'
     compileOnly 'com.android.support:appcompat-v7:27.1.0'
     compileOnly 'com.alibaba:fastjson:1.1.46.android'

     compileOnly fileTree(include: ['uniapp-release.aar'], dir: '../app/libs')
 }

Tips:

uniapp-release.aar is the main dependent library of the extension module, and this dependent library must be imported!

2. Create the TestModule class

• Module extension must inherit the UniModule class

 public class TestModule extends UniModule

• Extension methods must be annotated with @UniJSMethod (uiThread = false or true). UniApp will determine whether the current method should run on the UI thread and whether the current method is an extension method based on the annotations.
• UniApp calls Module extension methods based on reflection, so the extension methods in Module must be of public type.

 //run ui thread
 @UniJSMethod(uiThread = true)
 public void testAsyncFunc(JSONObject options, UniJSCallback callback) {
    
    
     Log.e(TAG, "testAsyncFunc--"+options);
     if(callback != null) {
    
    
         JSONObject data = new JSONObject();
         data.put("code", "success");
         callback.invoke(data);
     }
 }

 //run JS thread
 @UniJSMethod (uiThread = false)
 public JSONObject testSyncFunc(){
    
    
     JSONObject data = new JSONObject();
     data.put("code", "success");
     return data;
 }

• Also because it is called by reflection, Module cannot be confused. Please add code in the obfuscated file:

-keep public class * extends io.dcloud.feature.uniapp.common.UniModule{*;}

3. Register TestModule

Because the uni applet runs in an independent child process. The memory is not shared with the host. So 宿主进程registered TestModule, it is not available in uni applet. When Android creates a child process, it will take the initiative to initialize Application again! Therefore, the registration of uni applets TestModulemust be initialized or registered in onCreate in Application.

Tips

• TestModuleRemember to configure the build.gradleimported Module module of the host before registration .
• The following sample code is written in the host's Application.

public class App extends Application {
    
    
    @Override
    public void onCreate() {
    
    
        super.onCreate();
        try {
    
    
            UniSDKEngine.registerModule("TestModule", TestModule.class);
        } catch (UniException e) {
    
    
            e.printStackTrace();
        }
    }
}

At this point, we have completed a simple module extension

4. Call the module method in the uni applet

module supports use in vue and nvue

<template>
    <div>
        <button type="primary" @click="testAsyncFunc">testAsyncFunc</button>
        <button type="primary" @click="testSyncFunc">testSyncFunc</button>
    </div>
</template>

<script>
    // 获取 module 
    var testModule = uni.requireNativePlugin("TestModule")
    export default {
        methods: {
            testAsyncFunc() {
                // 调用异步方法
                testModule.testAsyncFunc({
                        'name': 'unimp',
                        'age': 1
                    },
                    (ret) => {
                        console.log(ret)
                    })
            },
            testSyncFunc() {
                // 调用同步方法
                var ret = testModule.testSyncFunc({
                    'name': 'unimp',
                    'age': 1
                })
                console.log(ret)
            }
        }
    }
</script>

Tips:

uni.requireNativePlugin is only used to obtain UniModule objects. UniComponent does not support this method!

Application scenario

The uni-app cross-platform SDK has a wide range of application scenarios, whether in daily life or in other fields.

• in education aspect

One-to-one small class: intra-school LAN communication; video home visits; one-to-one teaching; easy cross-regional communication and interaction. The one-to-one online education model is also personalized and can control the teaching process in all aspects. One-to-one online education teaches students in accordance with their aptitude, and develops learning plans for students in an all-round way, so as to be more specific to students and prescribe medicine to the disease. Pay more attention to learning methods and create a new learning atmosphere for students. Through mutual infection, students can generate learning motivation and strong learning awareness in the learning process, and make students pay more attention to learning.

• Online finance

Financial loans: From submitting application materials to loan issuance, it can be easily implemented on the mobile terminal, online review and processing of loans, and synchronous recording to control loan risks.

Video customer service: One-to-one exclusive video customer service, which can be generally used in bank customer service, online audit services and other services. It can confirm customer status online, handle business, improve business processing speed, save resources, and provide customers with more convenient services . Video customer service provides customers with a richer sense of presence and personalized experience by coordinating communication, supporting emotional expression and sharing content in real time. It is equipped with recording/screen recording tools. Supervisors/Managers can check each video interaction to view the customer service center. Whether the agent is sympathetic and emotional to the customer.

• Intelligent Terminal

Smart terminals can be used in residential property management, smart watches, glasses, drones and other equipment, and can be efficiently unlocked through audio and video transmission, and dial phones for real-time audio and video calls. Point-to-point audio and video communication can realize functions such as self-control, remote control, friend management, and video for the smart terminal. It can arm or disarm by remote control, and record the whole process. Smart terminals will greatly change people's future life prospects, greatly improve our work efficiency and life convenience, and become an indispensable part of our lives.

• Mobile law enforcement and traffic logistics

Voice intercom function, channel intercom, one-to-one/one-to-many intercom, suitable for multi-level mobilization, emergency command, can be used for public security, traffic police, armed police, military, courts, prisons, urban management, market supervision, etc.

Multimedia intercom function, real-time video return, on-site graphic video report, graphic text, video message. It is suitable for cross-regional dispatch and location management, and can be used for railways, passenger transportation, rental, public transportation, logistics transportation, ports, etc.

Conclusion

anyRTC has always insisted on putting developers first, and continues to strive to provide developers with various valuable differentiated services, and provide developers with faster, better and more convenient products and services.

anyRTC will always uphold, earnestly and professionally, and provide high-quality services to developers and users.

anyRTC official website: https://www.anyrtc.io/