开发者社区> 问答> 正文

移动化开发下如何配置应用页面?

移动化开发下如何配置应用页面?

展开
收起
请回答1024 2020-03-26 20:50:24 1178 0
1 条回答
写回答
取消 提交回答
  • 前提条件

    步骤1: 创建项目。

    操作步骤

    1. 在项目主页,展开项目开发最右侧的历史功能,并选择移动应用开发。

    1.png

    1. 在移动应用开发页的可视化应用页签,单击新增可视化应用,然后填写信息并单击完成。

    22.png

    3.PNG

    1. 自定义新增页,设计界面布局,即根据您的业务需要,设计您的应用页面样式,如背景、UI组件位置等。 您可以自己设计界面样式,也可以使用左侧界面模板下的模板界面。后续步骤以自定义界面为例。

    使用界面模板:在页面左侧界面模板下选择合适的模板,拖拽到中间画布上,再根据您的需要进行调整。

    4.png 12.png 13.png

    自定义界面:

    设置界面对齐方式和背景。

    5.png

    设置页面布局。 根据业务需要,从左侧UI组件的容器中,拖拽横向或(和)纵向分栏组件到画布上,然后为各分栏分别设置样式。

    6.png

    7.PNG

    1. 配置应用页面标题。 拖拽一个文字组件到画布上的标题分栏位置上,并在右侧配置标题内容和显示样式。

    8.png

    1. 拖拽一个图片组件到画布上的对应分栏中,然后编辑图片显示样式。

    9.png

    1. 创建一个温度显示组件。
    2. 拖拽一个文字组件到预留分栏中,输入文字内容温度作为标题,并配置显示样式。
    3. 再拖拽一个文字组件到预留分栏中,配置文字内容时,选择配置数据。

    10.png

    11.png

    12.png 13.png

    1. 配置湿度和PM2.5显示组件。配置方法与步骤7配置温度显示组件相同。

    14.png

    1. 配置一个空气监测仪开关状态监控组件。

    15.png

    16.png

    1. 单击编辑器页面右上方保存 > 预览,预览应用。
    2020-03-26 20:56:04
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
QQ移送页面框架优化实践 立即下载
QQ移动页面框架优化实践 立即下载
函数计算最佳实践:快速开发一个分布式 Puppeteer 网页截图服务 立即下载