@ray-js/robot-middleware v0.0.9

English | 简体中文

@ray-js/robot-middleware

@ray-js/robot-middleware is an HTML intermediate product developed by Tuya Robot Vacuum Cleaner based on @ray-js/hybrid-robot-map. This component exports HTML files and supports cross-platform reference using Webview containers. This solution is based on @ray-js/webview-invoke as a cross-platform intermediate medium, allowing communication with HTML through communication middleware in RN/Tuya Mini Programs.

Usage

Ray Project

Installation

Introduce dependency packages

yarn add @ray-js/robot-middleware

yarn add -D shelljs

You need to create a copy-scripts.js in the root directory of the ray project

const shell = require('shelljs');

shell.cp(
'-R',
'node_modules/@ray-js/robot-middleware/lib/robot-middleware/index.html',
'src/webview'
);

Execute node copy-scripts.js to copy the html file to the webview directory

Then configure the global.config.ts file in the ray project

import { GlobalConfig } from '@ray-js/types';

export const tuya = {
themeLocation: 'theme.json',
window: {
backgroundColor: '#f2f4f6',
navigationBarTitleText: '',
navigationBarBackgroundColor: '#f2f4f6',
navigationBarTextStyle: 'black',
},
// Need to specify the corresponding html directory to load normally during compilation
webviewRoot: 'webview',
skeletonRoot: 'skeleton',
};

const globalConfig: GlobalConfig = {
basename: '',
};

export default globalConfig;

Develop component

Mini program view layer

<web-view src="{{src}}" id="{{ webviewId }}" bind:message="onMessage" bind:load="onLoadEnd" bind:error="onError"></web-view>

Mini program logic layer

const componentOptions = {
   properties: {
    src: { type: String },
    webviewId: { type: String },
  },
  data: {},
  observers: {},
  lifetimes: {
    ready() {
      this.bindWebViewInvoke();
      this.defineCallbacks();
      this.bindFunctions();
    },
  },
  methods: {
    onLoadEnd() {
      // This simulates sending data to WebView
      setTimeout(() => {
        this.postBundleBinaryWEB({
          key: 'file',
          id: 'file',
          bundle: 'bundle',
          index: 1,
          total: 10,
        });
      }, 3000);
    },
    /**
     * Create a webviewContext object and bind it to invoke
     */
    bindWebViewInvoke() {
      if (ty.createWebviewContext) {
        this.webviewContext = ty.createWebviewContext(this.data.webviewId);
        /**
         * Inject platform attribute into webviewContext
         */
        Object.defineProperty(this.webviewContext, 'platform', {
          value: 'mini',
          writable: false,
        });
        this.invoke = createInvoke(() => this.webviewContext);
      }
    },
    /**
     * Create a defined callback function that can throw data out of WebView
     */
    defineCallbacks() {
      if (this.invoke) {
        this.invoke.define('onLoggerInfo', this.onLoggerInfo);
      }
    },
    /**
     * Define the logical layer to throw data into the specified method in WebView
     */
    bindFunctions() {
      if (this.invoke) {
        this.postBundleBinaryWEB = this.invoke.bind('postBundleBinary');
      }
    },
    // Here accept messages from WebView
    onMessage(evt) {
      if (this.invoke) {
        this.invoke.listener(evt);
      }
    },
    // WebView failed to load
    onError() {},
    /**
     * The following methods are all used to bind the communication between the native components of the mini program and the ray components.
     * @param {*} data
     */
    onLoggerInfo(data) {
      this.triggerEvent('onLoggerInfo'.toLowerCase(), data);
    },
  }
};
Component(componentOptions);

Mixed development using small program components in Ray components

import React, { useState, useEffect, useCallback, useRef } from 'react';
// This is your mini program component
import WebView from '../webview';

interface IProps {}
const MapView: React.FC<IProps> = props => {
  const webviewId: any = useRef(`webviewId_${new Date().getTime()}`).current;

  const onLoggerInfo = (data: any) => {
    console.log('Received data callback from WebView',data);
  };

  const onEvent = useCallback((evt: { type: string; detail: any}) => {
    const { detail } = evt;
    switch (evt.type) {
      case 'onLoggerInfo'.toLowerCase():
        onLoggerInfo(detail);
        break;
    }
  }, []);

  return (
    <View>
      <WebView
        // Here is your service address, you can also change it to a local file
        src="webview://webview/index.html"
        webviewId={webviewId}
        // Different ray versions here may have slightly different writing methods.
        bindonloggerinfo={onEvent}
        />
    </View>
  )
}