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

由于公司打算要搞一个小程序app,所以趁闲先自己搞一个试试手，小程序搜索----即时天气(已上线)。

小程序二维码.jpg 应用截图1.png
应用截图2.png

浅谈项目

这个项目的天气数据使用了和风的天气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);
}

image.png
image.png

背景色不太明显哈~

show me code

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