查看每日的天气情况是咱们在日常生活场景中的常见利用,本文就利用腾讯云的微搭低代码平台率领大家疾速的搭建一款天气预报的小程序。
定义数据源
低代码平台不仅提供了自建数据源,而且也提供了内部数据源。利用内部数据源咱们能够不便的调用第三方平台公布的各种接口,具体操作形式是登录低码的控制台在数据源治理菜单中点击【新建数据源】,在下拉选项中咱们抉择内部数据源:
咱们输出数据源名称和数据源标识,点击【确定】按钮
在关上的页面中点击【编辑】按钮进入数据源的编辑页面
在编辑页面点击【新增自定义办法】减少一个办法
而后咱们设置办法的名称、标识、用意,办法的类型抉择 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
最新资讯关注微信公众号【腾讯云低代码】