When I was working on a project, I needed to make some test pages for testers to use without any UI or framework requirements. As long as they could be used, I suddenly remembered that I saw some bloggers mentioned rax.js in their projects in Nuggets and planned to experience it, so THIS article came into being

Rax.js

Super lightweight, high performance, easy to use front-end solution. Multi-terminal operation of one development liberates repetitive work, focuses on product logic and improves development efficiency.Copy the code

The rival products of Ali’s rax.js should be jd.com’s taro.js. This article is an experience record and lists some points needing attention (including official reminders).

The official remind

To extend the capabilities of the Rax architecture, we provide developers with a set of Universal apis that they can use to quickly develop multipurpose applications. The current API is not platform-wide, and the detailed documentation for each API identifies the level of support for each platform with imagesCopy the code

Experience the results

  • Want to run multi-terminal, it is best to use the official existing API (tread pit experience), not compatible with other market UI framework
  • Different platforms can be passeduniversal-envDistinguish between
  • Poor interface request and WebView compatibility experience (detailed below)
  • The Kraken command line tool was not installed successfully

For now, all I can say is, keep up the good work RAX!

experience

layout

Div, P, span tags will be converted to View tags in the applet, and will have the corresponding style, such as:

will become

rpx

We have a screen width of 750rpx. Take iPhone6 for example, its screen width is 375px, then 750rpx = 375px = 100VW, so in iPhone6, 1rpx = 0.5px = 100/750vw. It is recommended that designers use 750 as the standard for designing Rax pagesCopy the code

The life cycle

The class component uses:

import { withPageLifeCycle } from 'rax-app';

The function component uses:

import { usePageShow } from 'rax-app';

You can have listening page display, hide, and other methods

State management

Global state cannot be used in multi-page mode, where each page is independent and cannot share stateCopy the code

Different platform processing

import { isWeex, isWeb, isMiniApp, isNode, isWeChatMiniProgram, isByteDanceMicroApp, isQuickApp } from ‘universal-env’; Judgment of different platforms

import { registerNativeEventListeners, addNativeEventListener, removeNativeEventListener } from ‘rax-app’; Register, listen on, and unlisten on native events

Can be used with native applets, note:

All native custom components used by native pages (such as the List component in the project above) must be placed in the SRC /miniapp-native folder, otherwise they cannot be used. If your project is not migrated from native applets, Native applet pages are recommended to be placed in the SRC /miniapp-native folder instead of SRC /pages/About. If there are native applet pages under SRC/Pages, The targets field must be added under the route corresponding to SRC /app.json to ensure that the page is not compiled by other endsCopy the code

Note: Applets compile time scheme syntax constraints

Kraken

A rendering engine for IoT based on Flutter and Web standardsCopy the code

It didn’t work, presumably because it wasn’t compatible with Windows

The development process encountered problems

The data request interface reported an error

My Web project works fine, but when I get to the applet, the console will report an error: Adapter is not a function

After unzipped the code (configure “minify”: false in build.json) see the code below

var adapter = config.adapter || defaults.adapter; return adapter(config).then(function (response) {... }Copy the code

So I’m using Axios, so I’m using universal request provided by Rax, and sure enough, I’m running into a problem because I need to POST forms on the back end, so I’m using FormData

let fromData = new FormData()
fromData.append('question_id', questionid)
fromData.append('option_id', optionid)
request({
    url: xxxx,
    headers: { 'Content-Type': 'multipart/form-data' },
    method: 'POST',
    data: fromData
})
Copy the code

If content-type is not set, the default is application/json, but if form-data is set, it is not automatically added. Boundary = – XXX, no boundary, the server will not be able to split the form data, can’t do this, to find the source code, see the library on the web: Node_modules \universal-request\ SRC \web\index.ts, new XMLHttpRequest(); So again, the familiar flavor is that in XMLHttpRequest, if the data you’re sending is FormData, then multipart/form-data is automatically used; Boundary = XXX, so as long as data instanceof FormData is true, we can not set the content-type, so we need to change the source code

if (headers) {
    + if (!(data instanceof FormData)) {//hjyong
        Object.keys(headers || []).forEach((key) => {
            xhr.setRequestHeader(key, String(headers[key]));
        });
    +}
}
Copy the code

Recompile, sure enough! In fact, the above method is just a contingency plan, I think the content-Type should not have a default value!

Look back at the compiled small program, normal operation, perfect!

Can you spell boundary by yourself? Yes! Boundary can also be very common:

FormData.prototype._generateBoundary = function() {
  // This generates a 50 character boundary similar to those used by Firefox.
  // They are optimized for boyer-moore parsing.
  var boundary = '--------------------------';
  for (var i = 0; i < 24; i++) {
    boundary += Math.floor(Math.random() * 10).toString(16);
  }

  this._boundary = boundary;
};
Copy the code

It can be seen that boundary only serves as a dividing line and is not calculated by the value of formData

By the way, wechat and Alipay applet do not support new FormData() and can only concatenate strings by themselves:

WeChat example code: wx. Request ({url: 'http://localhost:8080/test/multipart-form', method: "POST", the header: { 'content-type':'multipart/form-data; boundary=XXX' }, data: '\r\n--XXX' + '\r\nContent-Disposition: form-data; name="field1"' + '\r\n' + '\r\nvalue1' + '\r\n--XXX' + '\r\nContent-Disposition: form-data; name="field2"' + '\r\n' + '\r\nvalue2' + '\r\n--XXX--' })Copy the code

webview

import Embed from 'rax-embed';

export default function Home() {
    return (
        <Embed
            src={'https://baidu.com'}
        />
    );
}
Copy the code

Alipay applet can (and is full screen)

The resources

Rax website