小程序-即时天气(已上线)

钱浩 1年前 ⋅ 482 阅读

小程序搜索----即时天气(已上线)。


 
小程序二维码
 
 
应用截图1

 
应用截图2

浅谈项目

这个项目的天气数据使用了和风的天气api.由于请求用户当前位置的时候只有经纬度,所以又利用了高德的api进行地理反编码。接口方面就这么多了,很简单哈~

浅谈项目中的难点吧

整体上反正是根据微信小程序官网文档进行开发,有html+css+js的基础的吧,上手很快~就是文档上的wxss的样式代码基本没有,所以有的时候怎么试都不行,像scroll-view,只能百度了,css的知识都忘了很多,像flex,display什么的简直是晕了。反正是一边做一边百度。假如要做一个大项目,看来要买本css的书好好从头看看了。
其他的就是头部的地址展示不会,背景要根据文字自适应,百度后核心代码:

<view class='location' bindtap='chooseLocation'>
          <view>
            <image class='locationImg' src='../img/location.png' mode='aspectFit'></image>
            <text >{{location}}</text>
          </view>
        </view>
.location {
  color: red;
  padding: 10rpx;
  font-size: 42rpx;
  font-family: "PingFangSC-Medium";
  text-align: center;
  position: absolute; 
   /* z-index: 2;  */
  top: 1%;  
  left: 0;
  right: 0;
  height: 56rpx;
}
.location view {
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  white-space: nowrap; 
}
.location view text {
  color: white;
  font-size: 30rpx;
  padding-right: 20rpx;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
  padding-left: 60rpx;
  white-space: nowrap;
  border-radius: 30rpx;
  background-color: rgba(215, 215, 215, 0.1);
}
 

 
 
 

背景色不太明显哈~

show me code

demo地址,喜欢的话给个star哈~


注意:本文归作者所有,未经作者允许,不得转载

全部评论: 0

    我有话说: