实用工具 - 页面引导
使用场景
在一些日常的项目需求中,对于某些特定的页面需要用户前往指定的端(电脑端、手机端)去访问以达到最好的使用效果,这时候需要在页面中配置页面引导,借助此例,我们可以快速配置一个页面引导。
实现功能
仅移动端可访问时
配置自定义页面
我们需要两个容器,第一个容器用来配置我们的页面引导,第二个容器则是我们的页面内容。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715826120200-481d7d97-15e9-4c48-8c9f-73e76ee75908.png)
第一个容器配置如下内容:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715826215804-e74fa529-dd4f-4e53-8343-33b4ffa17fe2.png)
我们为这个容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715830881985-ac69c47d-d02a-492f-98c7-69a1be36d975.png)
:root {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
min-height: 100vh;
background-color: #ffffff;
}
是否渲染绑定下述代码:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715830948769-78f0b55f-3640-4ee7-a4f4-14207efdd7a7.png)
!this.utils.isMobile()
为内容容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715830997965-70fb3ceb-a2f2-4fc4-9d7f-d05b787291b4.png)
: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;
}
二维码图片添加下述配置:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831088766-bc895266-410e-495e-8154-1ab61667a422.png)
图片地址绑定下述变量:
state.qrcodeUrl
是否渲染绑定下述变量:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831158933-720b353f-903b-4e38-93f3-838911904f9c.png)
!!state.qrcodeUrl
loading 容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831220310-11d0178f-c323-4ef6-8e4e-0987f03f380d.png)
:root {
width: 252px;
height: 252px;
display: flex;
align-items: center;
justify-content: center;
}
是否渲染绑定下述变量:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831260116-fa701311-3c9d-4f03-a292-ab4735e61e89.png)
!state.qrcodeUrl
容器内的 loading 图片添加下述配置:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831373205-68a97071-18fb-434d-ae40-f824ae05a0f7.png)
//img.alicdn.com/tfs/TB1S3fieubviK0jSZFNXXaApXXa-144-144.gif
分割线容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831447070-d1d2940f-3b20-4c98-ae0e-632b6b4b2b82.png)
:root {
width: 100%;
margin: 16px 0;
background: #f1f2f3;
height: 1px;
overflow: hidden;
}
提示文字设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715831498313-87198b75-3165-4959-96a6-858b3e7bf723.png)
:root {
font-size: 16px;
text-align: center;
line-height: 1.5;
color: #666;
}
附:
{"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":""}]}]}]}
配置页面功能
添加变量:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837443271-4f46d973-07ee-4b34-9ba4-3106bc310a54.png)
qrcodeUrl
添加生成二维码函数:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837498793-fa16dd31-487b-45ab-b17a-c161b7f3bc4f.png)
// 生成二维码
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',
});
}
}
页面 didMount 中加载 qrcodejs 并生成二维码:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837571043-ef49e2f4-389a-4843-851b-7ff98c2ceabc.png)
// 当页面渲染完毕后马上调用下面的函数,这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
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),
});
});
}
}
仅电脑端可访问时
配置自定义页面
我们需要两个容器,第一个容器用来配置我们的页面引导,第二个容器则是我们的页面内容。
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837844241-2834280b-55b8-47ba-ad13-ce19e5dd84dd.png)
第一个容器配置如下内容:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837870994-e9865ed7-cd66-447a-b6f1-56f91d5c8b86.png)
我们为这个容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837893555-2d332fe5-c5a3-4c2b-9620-00f2e94d2bda.png)
:root {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
min-height: 100vh;
background-color: #ffffff;
}
是否渲染绑定下述代码:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715837989710-05898493-a512-4b91-bc75-28ddeff1518f.png)
this.utils.isMobile()
为内容容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715838051296-5df8dcfc-c62b-4b2a-bea5-a7833c2347b0.png)
: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;
}
缺省图片添加下述配置:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715838163463-167960e4-1c6a-4e9b-831f-60bb2a5a3784.png)
https://img.alicdn.com/tfs/TB1TyfVebr1gK0jSZR0XXbP8XXa-150-150.svg
分割线容器设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715838224633-b337ca25-cf57-4f5b-93d0-6ec01c761bd5.png)
:root {
width: 100%;
margin: 16px 0;
background: #f1f2f3;
height: 1px;
overflow: hidden;
}
提示文字设置下述样式:
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715838247362-4f5fca8d-f94e-4d65-b6c0-d314add9ce01.png)
:root {
font-size: 16px;
text-align: center;
line-height: 1.5;
color: #666;
}
附:
{"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]}]}]}]}
实现效果
仅移动端可访问时
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/png/1715825680707-a46c3f6a-176a-4dd6-b568-f7c9cb3131e9.png)
仅电脑端可访问时
![](https://yida-support.oss-cn-shanghai.aliyuncs.com/static/jpeg/1715825775964-65ada790-2243-439b-9d7a-1f888858a4fa.jpeg)
在线试玩
本文档对您是否有帮助?