作者:知晓云 - 小程序开发快人一步
来源:知晓课堂
在本章节,我们会带领大家开发一个基于地理位置查询天气的小程序。通过本章节,你会学习使用小程序位置 API、map 地图组件,wx.request() API等。
页面构建
我们开发的小程序有两个页面:天气详情页面和地图页面,天气详情页面用于查看指定城市的天气状况,而地图页面用于选取城市。两个页面通过底栏 tab 来相互切换。
天气详情页面
这个页面主要是展示特定城市当前的天气状况,默认展示当前城市的天气情况。
该页面的 UI 如下图:
地图页面
这个页面在地图上标注了全国34个省会城市,通过点击对应城市的 marker,可以查看该城市的天气情况。
该页面的 UI 如下图:
构建界面
ok,现在已经对我们所要开发的小程序有个大致概念了,接下来就开始编码工作了。
Tab 页面切换
我们先配置小程序的底部 Tab,方便接下来我们切换页面,如下图,在 app.json 中加入如下代码。
这里解释下上图配置:
l color tab 上的文字默认颜色
l selectedColor tab 上的文字选中时的颜色
l backgroundColor tab 的背景色
l borderStyle tabbar上边框的颜色
l list tab 按钮数组
l list.pagePath 页面路径,必须在 pages 中先定义
l list.text tab 按钮文本
配置完成后,即可通过点击 Tab 来切换页面了。
WXML 页面元素
接下来,我们来编写两个页面的相关 WXML 代码。
<view>
<view>
<view>
<image src='../../image/weather-icon/0.png' mode='aspectFill'></image>
</view>
<view>
<view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view>
<view>城市</view>
</view>
<view>
<input type="text" disabled="{{true}}" value="广州市" name="city"></input>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view>
<view>天气情况</view>
</view>
<view>
<input type="text" disabled="{{true}}" value="晴朗" name="latitude"></input>
</view>
</view>
<view class="weui-cell weui-cell_input">
<view>
<view>气温</view>
</view>
<view>
<input type="text" disabled="{{true}}" value="21°" name="name"></input>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
接下来是地图页面的构建过程。在 map.wxml 给 map 组件绑定数据和回调事件:
<map
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
markers="{{markers}}"
bindmarkertap="switchCity"
scale='8'
>
我解释一下 map 组件上的参数:
现在,两个页面的 WXML 已经写好。在下一章,我们将正式利用小程序的接口,为它们增加查询天气的功能。
相关阅读
第一章:一文了解小程序
第二章:手把手,动手编写一个简单小程序(上)
第三章:手把手,动手编写一个简单小程序(下)
第四章:如何开发一款内容展示类小程序(上)
第五章:如何开发一款内容展示类小程序(下)
第六章:小程序多媒体相关能力
关注「知晓云」公众号,点击菜单栏「知晓云」-「知晓课堂」,获取更多开发教程。