Skip to main content

Page Guide

Usage scenarios​

In some daily project requirements, for some specific pages, users need to visit the specified end (Computer side and mobile phone side) to achieve the best use effect, at this time, you need to configure page guidance on the page. With this example, you can quickly configure a page guidance.

Implement functions​

When the mobile terminal is accessible only​

Configure custom pages​

We need two containers. The first container is used to configure our page guide, and the second container is our page content.

The first container is configured as follows:

Set the following style for this container:

:root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100vh;
  background-color: #ffffff;
}

Whether to render and bind the following code:

!this.utils.isMobile()

Set the following style for the content container:

:root {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  padding: 24px;
  box-shadow: rgba(31, 56, 88, 0.2) 2px 2px 10px 0px;
}

Add the following configuration to the QR code image:

Bind the following variables to the image address:

state.qrcodeUrl

Whether to render and bind the following variables:

!!state.qrcodeUrl

loading set the following styles for containers:

:root {
  width: 252px;
  height: 252px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Whether to render and bind the following variables:

!state.qrcodeUrl

Add the following configuration to the loading image in the container:

//img.alicdn.com/tfs/TB1S3fieubviK0jSZFNXXaApXXa-144-144.gif

The split line container sets the following style:

:root {
  width: 100%;
  margin: 16px 0;
  background: #f1f2f3;
  height: 1px;
  overflow: hidden;
}

Set the following style for the prompt text:

:root {
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
  color: #666;
}

Attached:

{"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4e99e1","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  min-height: 100vh;\n  background-color: #ffffff;\n}\n","fieldId":"div_lw1nqz7g","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"!this.utils.isMobile()","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4e99e0","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 6px;\n  padding: 24px;\n  box-shadow: rgba(31, 56, 88, 0.2) 2px 2px 10px 0px;\n}\n","fieldId":"div_lw1xxxpd","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Image","props":{"preview":false,"autoHeight":true,"src":{"type":"JSExpression","value":"state.qrcodeUrl","mock":"/fileHandle?appType=default_tianshu_app&fileName=4115334f-803a-4df0-b87a-d9e6871a89ae.png&instId=&type=download"},"alt":"Image 404","className":"image_lw4e99dx","fit":"contain","round":"0","width":"","autoWidth":true,"roundRadius":"0","__style__":":root {\n  display: block;\n}\n","height":"","fieldId":"image_lw1nqz7h","events":{"ignored":true},"onClick":{"ignored":true}},"condition":{"type":"JSExpression","value":"!!state.qrcodeUrl","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4epxad","behavior":"NORMAL","__style__":":root {\n  width: 252px;\n  height: 252px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n","fieldId":"div_lw4emnnr","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"!state.qrcodeUrl","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Image","props":{"preview":false,"autoHeight":false,"src":"//img.alicdn.com/tfs/TB1S3fieubviK0jSZFNXXaApXXa-144-144.gif","alt":"Image 404","className":"image_lw4epxac","fit":"contain","round":"0","width":48,"autoWidth":false,"roundRadius":"0","__style__":":root {\n  display: block;\n}\n","height":48,"fieldId":"image_lw4emnnq","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4e99dy","behavior":"NORMAL","__style__":":root {\n  width: 100%;\n  margin: 16px 0;\n  background: #f1f2f3;\n  height: 1px;\n  overflow: hidden;\n}\n","fieldId":"div_lw1xxxpe","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lw4e99dz","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"en_US":"Tips content","use":"zh_CN","zh_CN":"您好，请使用手机钉钉扫码查看。","type":"i18n"},"__style__":":root {\n  font-size: 16px;\n  text-align: center;\n  line-height: 1.5;\n  color: #666;\n}\n","fieldId":"text_lw1xxxpf","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":""}]}]}]}

Configure page functions​

Add variables:

qrcodeUrl

Add a function to generate a QR code:

// 生成二维码
export function createQrcode(text = '') {
  try {
    if (!text) {
      this.utils.toast({
        title: '二维码无内容',
        type: 'error',
      });
      return '';
    };
    if (!document.getElementById('qrcodeRootDom')) {
      // 若没有 qrcodeRootDom 则创建一个
      const qrcodeRoot = document.createElement('div');
      qrcodeRoot.setAttribute('id', 'qrcodeRootDom');
      qrcodeRoot.style.display = 'none';
      window.document.body.appendChild(qrcodeRoot);
    };
    document.getElementById('qrcodeRootDom').innerHTML = ''; // 清空内容
    const qrcode = new QRCode(document.getElementById('qrcodeRootDom'), {
      text: encodeURI(text),// 二维码内容
      width: 252, // 二维码宽度
      height: 252, // 二维码高度
      colorDark: '#000000',
      colorLight: '#ffffff',
      correctLevel: QRCode.CorrectLevel.H,
    });
    const canvas = qrcode._el.querySelector('canvas'); // 获取生成二维码中的canvas，并将canvas转换成base64
    const qrcodeUrl = canvas.toDataURL('image/png'); // 获取到生成的二维码的图片链接
    return qrcodeUrl;
  } catch (error) {
    console.error(error);
    this.utils.toast({
      title: '二维码生成失败',
      type: 'error',
    });
  }
}

On page didMount, load qrcodejs and generate a QR code:

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  if (!this.utils.isMobile()) {
    this.utils.loadScript('https://g.alicdn.com/code/lib/qrcodejs/1.0.0/qrcode.min.js').then(() => {
      this.setState({
        qrcodeUrl: this.createQrcode(window.location.href),
      });
    });
  }
}

When the computer is accessible only​

Configure custom pages​

We need two containers. The first container is used to configure our page guide, and the second container is our page content.

The first container is configured as follows:

Set the following style for this container:

:root {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 100vh;
  background-color: #ffffff;
}

Whether to render and bind the following code:

this.utils.isMobile()

Set the following style for the content container:

:root {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 6px;
  padding: 24px;
  box-shadow: rgba(31, 56, 88, 0.2) 2px 2px 10px 0px;
}

Add the following configuration to the default image:

https://img.alicdn.com/tfs/TB1TyfVebr1gK0jSZR0XXbP8XXa-150-150.svg

The split line container sets the following style:

:root {
  width: 100%;
  margin: 16px 0;
  background: #f1f2f3;
  height: 1px;
  overflow: hidden;
}

Set the following style for the prompt text:

:root {
  font-size: 16px;
  text-align: center;
  line-height: 1.5;
  color: #666;
}

Attached:

{"type":"nodeSchema","componentsMap":{},"componentsTree":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4e99e1","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 24px;\n  min-height: 100vh;\n  background-color: #ffffff;\n}\n","fieldId":"div_lw1nqz7g","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":{"type":"JSExpression","value":"this.utils.isMobile()","mock":true},"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4e99e0","behavior":"NORMAL","__style__":":root {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  border-radius: 6px;\n  padding: 24px;\n  box-shadow: rgba(31, 56, 88, 0.2) 2px 2px 10px 0px;\n}\n","fieldId":"div_lw1xxxpd","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":"","children":[{"componentName":"Image","props":{"preview":false,"autoHeight":false,"src":"https://img.alicdn.com/tfs/TB1TyfVebr1gK0jSZR0XXbP8XXa-150-150.svg","alt":"Image 404","className":"image_lw4e99dx","fit":"contain","round":"0","width":252,"autoWidth":false,"roundRadius":"0","__style__":":root {\n  display: block;\n}\n","height":252,"fieldId":"image_lw1nqz7h","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"loopArgs":["",""],"hidden":false,"title":"","isLocked":false,"conditionGroup":""},{"componentName":"Div","props":{"useFieldIdAsDomId":false,"width":"","customClassName":"","className":"div_lw4e99dy","behavior":"NORMAL","__style__":":root {\n  width: 100%;\n  margin: 16px 0;\n  background: #f1f2f3;\n  height: 1px;\n  overflow: hidden;\n}\n","fieldId":"div_lw1xxxpe","height":"","events":{"ignored":true},"onClick":{"ignored":true},"onMouseEnter":{"ignored":true},"onMouseLeave":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","loopArgs":[null,null]},{"componentName":"Text","props":{"maxLine":0,"showTitle":false,"contentPaddingMobile":"0","className":"text_lw4e99dz","title":{"en_US":"","use":"zh_CN","zh_CN":"","type":"i18n"},"behavior":"NORMAL","content":{"en_US":"Tips content","use":"zh_CN","zh_CN":"您好，请在电脑端查看当前页面。","type":"i18n"},"__style__":":root {\n  font-size: 16px;\n  text-align: center;\n  line-height: 1.5;\n  color: #666;\n}\n","fieldId":"text_lw1xxxpf","events":{"ignored":true},"onClick":{"ignored":true}},"condition":true,"hidden":false,"title":"","isLocked":false,"conditionGroup":"","loopArgs":[null,null]}]}]}]}

Effect​

When the mobile terminal is accessible only​

When the computer is accessible only​

Try it online​

This doc is generated using machine translation. Any discrepancies or differences created in the translation are not binding and have no legal effect for compliance or enforcement purposes.
Copyright © 2024钉钉（中国）信息技术有限公司和／或其关联公司浙ICP备18037475号-4