微信小程序 由于公司打算要搞一个小程序app,所以趁闲先自己搞一个试试手,小程序搜索----即时天气(已上线)。
这个项目的天气数据使用了和风的天气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);
}
喜欢的话给个star哈~