实战 | 使用微搭低代码平台开发天气预报应用小程序

查看每日的天气情况是我们在日常生活场景中的常见应用，本文就利用腾讯云的微搭低代码平台带领大家快速的搭建一款天气预报的小程序。

定义数据源

低代码平台不仅提供了自建数据源，而且也提供了外部数据源。利用外部数据源我们可以方便的调用第三方平台发布的各种接口，具体操作方式是登录低码的控制台在数据源管理菜单中点击【新建数据源】，在下拉选项中我们选择外部数据源：

我们输入数据源名称和数据源标识，点击【确定】按钮

在打开的页面中点击【编辑】按钮进入数据源的编辑页面

在编辑页面点击【新增自定义方法】增加一个方法

然后我们设置方法的名称、标识、意图，方法的类型选择http请求，入参设置为city，url设置为：https://restapi.amap.com/v3/weather/weatherInfo?key=5d2d3e6c0d5188bec134fc4fc1b139e0&city=%E5%91%BC%E5%92%8C%E6%B5%A9%E7%89%B9&extensions=base

设置好后我们可以点击测试，点击运行测试，我们可以看到调用的结果

成功后我们点击【出参映射】

一切设置好后我们点击【确定】按钮让设置生效

创建应用

选中应用管理菜单，点击【创建空白应用】按钮，我们输入应用名称和应用标识，点击【确定】按钮创建应用

在应用列表中找到我们刚创建的应用，点击编辑按钮打开编辑器

创建变量

如果需要在低代码中使用外部数据源，我们需要先创建变量，点击导航条的【变量管理】打开变量的编辑器

在弹出的页面点击状态变量旁边的+号，依次录入变量标识、变量名，变量类别设置为数据源，数据源选择天气(weather)，数据类型选择单条记录，变量初始化动作选择获取实时天气，入参传入呼和浩特。设置好后点击【提交】按钮

定义页面组件

变量设置好后我们需要定义页面，切换到组件页签

布局的话我们选择行列式布局，在布局菜单中找到【行容器】组件，点击一下该组件

设置行容器的的样式为flex布局，主轴方向设置为水平，主轴对齐为居中，副轴对齐居中，换行为正换行

然后选中行容器的插槽，增加两个【列容器】组件

然后设置一下【列容器】组件的class类名为col-6，切换到样式页签，设置行容器的的样式为flex布局，主轴方向设置为水平，主轴对齐为居中，副轴对齐居中，换行为正换行

在每个【列容器】的插槽里增加一个【文本】组件

选择第一个【文本】组件，点击文本内容旁边的超链接图标

在弹出的页面我们选择city，点击【确定】按钮

按照同样的方法我们给第二个【文本】组件绑定变量为reporttime

按照上述的方法我们构造第二行，只不过在展示温度的时候我们需要带上单位，设置的时候我们选择表达式，表达式中输入如下代码

$page.dataset.state.lives.lives[0].temperature+'℃'

依次设置天气情况、风向、风力、湿度等信息

预览发布

页面设置好后点击【预览发布】按钮，部署到云服务器中，我们选择云端预览

构建完毕后点击网站可以查看发布后的效果

产品介绍

腾讯云微搭低代码是高效、高性能的拖拽式低代码开发平台，向上连接前端的行业业务，向下连接云计算的海量能力，助力企业垂直上云。腾讯云微搭低代码将繁琐的底层架构和基础设施抽象化为图形界面，通过行业化模板、拖放式组件和可视化配置快速构建多端应用（小程序、H5应用、Web 应用等），免去了代码编写工作，让您能够完全专注于业务场景。腾讯云微搭低代码以云开发作为底层支撑，云原生能力将应用搭建的全链路打通，提供高度开放的开发环境，且时刻为您的应用保驾护航。

开通低代码：https://cloud.tencent.com/product/lowcode

产品文档：https://cloud.tencent.com/document/product/1301/48874

技术交流加Q群：1003059706

最新资讯关注微信公众号【腾讯云低代码】