Mix react native and applet

Keywords: Mobile React Android iOS npm



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...
    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
    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
    CocoaPods: 1.9.1 - /usr/local/bin/pod
    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
    Android Studio: 3.6 AI-192.7142.36.36.6241897
    Xcode: 11.4/11E146 - /usr/bin/xcodebuild
    Java: 10.0.1 - /Library/Java/JavaVirtualMachines/jdk-10.0.1.jdk/Contents/Home/bin/javac
    Python: 2.7.16 - /usr/bin/python
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0 
    react-native: 0.62.2 => 0.62.2 
    *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.

  1. Introduce the applet engine plug-in. Introducing the applet react native plug-in in the package.json file
"react-native-mopsdk": "^1.0.1"
  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
    appkey: '22LyZEib0gLTQdU3MUauASlb4KFRNRajt4RmY6UDSucA',
    secret: '4a915e447bcbd439',
    apiServer: 'https://mp.finogeeks.com',
    apiPrefix: '/api/v1/mop'
  }, (data) => {
    console.log('message;', data);
  1. Open applet
  • 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