Mix react native and applet

background

In this paper, we will open a brain hole to integrate and run the small program scheme on the basis of react native project.

First look at the effect as follows:

Environment construction

npm install -g react-native-cli yarn

Official Environment construction documents It has been explained in detail and will not be repeated here. You can see my local environment configuration version. At present, the whole project runs stably and can be used for reference.

$ react-native info
info Fetching system and libraries information...
System:
    OS: macOS 10.15.3
    CPU: (8) x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Memory: 93.87 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.20.1 - ~/.nvm/versions/node/v10.20.1/bin/node
    Yarn: 1.22.4 - ~/.nvm/versions/node/v10.20.1/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v10.20.1/bin/npm
    Watchman: Not Found
  Managers:
    CocoaPods: 1.9.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.4, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK:
      API Levels: 26, 28, 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0
      System Images: android-26 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
  Languages:
    Java: 10.0.1 - /Library/Java/JavaVirtualMachines/jdk-10.0.1.jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
  npmGlobalPackages:
    *react-native*: Not Found

New ReactNative sample project

New ReactNative project

react-native init mopdemo

Wait a minute...

After the initialization project is completed, you can choose two different ways to run the App on the iOS/Android platform:

be careful! React native needs to install the corresponding IOS and Android development tools locally, that is, Xcode and Android studio. The specific installation and use methods are not described here.

Here we use VSCode+Xcode as the development combination environment.

Integrated applet parsing engine

Here we use the free community version of FanTai integrated applet parsing engine, which can complete the integration of applets in less than 10 lines of code.

Introduce the applet engine plug-in. Introducing the applet react native plug-in in the package.json file

"react-native-mopsdk": "^1.0.1"

Add the following applet engine initialization methods to the main.dart file. Mop.instance.initialize sdkkey and secret are required here. You can register directly at https://mp.finogeeks.com for free. For the registration method, please refer to Access Guide

import MopSDK from 'react-native-mopsdk';
// 1. mop initialization
MopSDK.initialize({
    appkey: '22LyZEib0gLTQdU3MUauASlb4KFRNRajt4RmY6UDSucA',
    secret: '4a915e447bcbd439',
    apiServer: 'https://mp.finogeeks.com',
    apiPrefix: '/api/v1/mop'
  }, (data) => {
    console.log('message;', data);
  });

Open applet

MopSDK.openApplet('appid','','',(data)=>{});

SDKKEY and Secret can be obtained from the management background of the previously deployed community version.
API server is the service address of the back end of applet ecosystem, which is the IP: Port entered previously.
Applet id is the unique id of the applet on the management background (generated automatically when the applet is on the shelf)
The above parameters can be obtained from the background interface of the previous server deployment, or in the case of no server deployment https://mp.finogeeks.com Sign up quickly and get it for free.
Say the important things three times. You can check the sample code in the official github warehouse https://github.com/finogeeks/mop-react-native-demo

Posted by morphboy23 on Thu, 14 May 2020 01:27:53 -0700

Programmer Group