Custom page double-end adaptation

1. Usage scenarios

In the process of using custom, the PC terminal and the mobile terminal may not be adapted, so how to solve it ~

2. Video tutorial

此处为语雀视频卡片，点击链接查看：新-自定义双端适配.mov

3. Procedure

3.1 Step 1: Create a custom page

Add three button components on the custom page, named as PC, mobile, and Button. The effect is as shown in the following figure:

Custom page

3.2 Step 2: Add actions when the page is loaded

Custom page> Click page> Page Setup> lifecycle> when loading is complete> didMount

Note: Because the custom page does not automatically load didMount, you need to configure it for loading.

Actions when the binding page is loaded (1)

Actions when the binding page is loaded (2)

3.3 Step 3: assign the value code and call it in didMount

Put the following function code in Page JS, and then call this function in didMount;

JS panel call function

The reference code is as follows (you can copy it directly):

export function browserRedirect() {
  //判断当前浏览器环境
  var sUserAgent = navigator.userAgent.toLowerCase();
  var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
  var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
  var bIsMidp = sUserAgent.match(/midp/i) == "midp";
  var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
  var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
  var bIsAndroid = sUserAgent.match(/android/i) == "android";
  var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
  var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
  if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
    //这是移动端
    this.setState({
      //移动端状态
      mobile: true
    })
    this.setState({
      //PC端状态
      pc: false
    })
  } else {
    this.setState({
      mobile: false
    })
    this.setState({
      pc: true
    })
  }
}

3.4 Step 4: create two variables PC and mobile

Add two variables, directly named PC and mobile;

Data Source create variables (1)

Data Source creation variables (2)

3.5 Step 5: Advanced Settings

Components that need to be displayed, advanced, whether to render, PC display bindingstate.pc, mobile display bindingstate.mobile.

Bind variables to button components

Note: you can bind the same operation as the three buttons, and the same binding as the third button component.state.mobile

4. Effect demonstration

Effect demonstration

5. Try it online

• https://www.aliwork.com/bench/coe? tplUuid=TPL_LQXDGV4M1VXTOPTK9MG1

-------------------- Get the latest information YIDA, welcome to follow US--------------------