微信小程序逻辑层天气小程序-微信小程序获取本地天气-微信小程序开发天气预报-即速应用

微信小程序逻辑层天气小程序-微信小程序获取本地天气-微信小程序开发天气预报

浏览量：1343 时间：2020-04-06 来源：gaopursuit

1.
天气微信小程序用来显示天气的温度、最低温度、最高温度及天气情况，下面通过数据绑定的方式来显示天气情况，如图所示。
1.导航栏设计2.
首先，新建一个小程序，把index里面的内容删除；然后在app.json里面，把颜色的色值，修改为蓝色，即添加属性：
“navigationBarBackgroundColor”:”#002041”3.
然后文字内容修改为中国天气网，文字颜色修改为白色。刷新一下，导航栏就有了。
2.页面设计4.
接着，我们进入页面设计，先给出页面的代码：
viewclass"content"viewclass"today"viewclass"info"viewclass"temp"{{temp}}℃/viewviewclass"lowhigh"{{low}}/{{high}}/viewviewclass"type"{{type}}/viewviewclass"city"{{city}}/viewviewclass"week"{{week}}/viewviewclass"weather"{{weather}}/view/view/view/view5.
我们此时发现页面的颜色不对，和导航栏不统一。这样，可以修改app.wxss，在里面添加一个属性：
background-color:#0020416.
添加这个属性后，就可以得到和导航栏相同的颜色。
7.
接着，在index.js里面添加下面代码：
Page({data:{temp:"4",low:"-1℃",high:"10℃",type:"晴",city:"北京",week:"星期二",weather:"无持续风向微风级"}})8.
在index.wxss里面添加下面的样式代码：
.content{font-family:微软雅黑,宋体;font-size:14px;background-size:cover;height:100%;width:100%;color:#ffffff;}.today{padding-top:70rpx;height:50%;}.temp{font-size:80px;text-align:center;}.city{font-size:20px;text-align:center;margin-top:20rpx;margin-right:10rpx;}.lowhigh{font-size:12px;text-align:center;margin-top:30rpx;}.type{font-size:16px;text-align:center;margin-top:30rpx;}.week{font-size:12px;text-align:center;margin-top:30rpx;}.weather{font-size:12px;text-align:center;margin-top:20rpx;}9.
最后，得到效果如图所示。
10.
大家可以看到，各种文字是有大有小，重要的部分是有大有小。比如说，我们首先关注的是温度，然后最高温度是多少，最低温度是多少。接着是晴天~~这些都是研究过用户心理学得到的。