文档章节

小程序案例-查询天气

o
 osc_wws45aot
发布于 2019/08/20 13:12
字数 254
阅读 14
收藏 0

精选30+云产品,助力企业轻松上云!>>>

/**
   * 组件的初始数据
   */
  data: {
    region:"点击选择地区",
    wd:"**",
    tq:"**",
    njd:0,
    qy:0,
    sd:0,
    fx:0,
    fs:0,
    fl:0,
    img:305
  },
  changRegion:function(e){
    var that=this;
    this.setData({
      region:e.detail.value
    })
    var str = e.detail.value;
    str = str.join(',');
    console.log(str);
    wx.request({
      url: 'https://free-api.heweather.net/s6/weather/now?', //仅为示例,并非真实的接口地址
      data: {
        location:that.data.region[1],
        key: '687a71132d6d4bfc8136011fa39dd345'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        var info=res.data.HeWeather6[0];
        console.log(info)
        that.setData({
          wd: info.now.tmp,
          tq: info.now.cond_txt,
          njd: info.now.vis,
          qy: info.now.pres,
          sd: info.now.hum,
          fx: info.now.wind_dir,
          fs: info.now.wind_spd,
          fl: info.now.wind_sc,
          img: info.now.cond_code,
        })
      }
    })
  },

<view class="content">
<!-- 区域1 地区 -->
<picker custom-item="中国" mode="region" bindchange="changRegion">
 <view>{{region}}</view>
</picker>
<!-- 区域2 文本 -->
<text>
 {{wd}}°C {{tq}}
</text>
<image src="/images/{{img}}.png"></image>

<!-- 区域4 -->
<view class="detail">
  <view class="bar">
    <view class="box">能见度</view>
    <view class="box">气压</view>
    <view class="box">湿度</view>
  </view>
  <view class="bar">
    <view class="box">{{njd}}%</view>
    <view class="box">{{qy}}hPa</view>
    <view class="box">{{sd}}Km</view>
  </view>
  <view class="bar">
    <view class="box">风向</view>
    <view class="box">风速</view>
    <view class="box">风力</view>
  </view>
  <view class="bar">
    <view class="box">{{fx}}</view>
    <view class="box">{{fs}}Km/H</view>
    <view class="box">{{fl}}</view>
  </view>
</view>

</view>

css使用 flex布局

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
android基础知识02——线程安全1:定义及例子

android的UI操作不是线程安全的,同时也只有主线程才能够操作UI,同时主线程对于UI操作有一定的时间限制(最长5秒)。为了能够做一些比较耗时的操作(比如下载、打开大文件等),android提供...

迷途d书童
2012/03/23
819
0
【云栖号案例 | 互联网】墨迹天气上云 分析日志大数据 洞察用户需求

云栖号案例库:【点击查看更多上云案例】 不知道怎么上云?看云栖号案例库,了解不同行业不同发展阶段的上云方案,助力你上云决策! 公司简介 我们是北京墨迹风云科技股份有限公司,于2010年...

云栖号案例库
03/16
0
0
iOS7 一个天气应用案例

iOS7 一个天气应用案例: http://blog.jobbole.com/62488/ http://blog.jobbole.com/62448/ 开放的天气接口: 0、json数据清晰格式网站:http://www.bejson.com/index.php 1、城市查询经纬度...

cobish
2014/05/19
349
0
python接口自动化(二十四)--unittest断言——中(详解)

简介   上一篇通过简单的案例给小伙伴们介绍了一下unittest断言,这篇我们将通过结合和围绕实际的工作来进行unittest的断言。这里以获取城市天气预报的接口为例,设计了 2 个用例,一个是查...

osc_ertc0ko2
04/16
4
0
[视频教程]手把手教你用python“查天气” - 知乎

用python写一个查天气https://www.zhihu.com/video/1172522553284775936 “查天气”是编程教室课程里比较经典的一个开发案例。它的开发难度不算大,但作为对网络请求、文件读写、类型转换、循...

Crossin的编程教室
2019/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

为什么从HBase的0.96版本开始,舍弃了-ROOT-文件?

HBase结构的读写流程 (1). HBase0.96版本之前: (2). HBase0.96开始: a. 当客户端获取到.meta文件的位置之后,会缓存.meta.文件的位置 b. 客户端还会缓存HRegion的位置 -ROOT-存在的意义: ...

其乐m
15分钟前
12
0
volatile关键字对 - What is the volatile keyword useful for

问题: At work today, I came across the volatile keyword in Java. 今天的工作中,我遇到了Java中的volatile关键字。 Not being very familiar with it, I found this explanation: 不太熟......

技术盛宴
20分钟前
25
0
golang 封装 mysql 和 redis 连接

Mysql封装 package dbimport ("fmt"_ "github.com/go-sql-driver/mysql""github.com/jmoiron/sqlx")var DB *sqlx.DBfunc init(){database, err := sqlx.Op......

开源中国最牛的人
21分钟前
16
0
pdfbox 读取文件报错 java.io.IOException: Page tree root must be a dictionary

pdfbox java.io.IOException: Page tree root must be a dictionary 示例代码 public static void main(String[] args) { try (InputStream sampleInputs = new ClassPathResource("s......

lemos
29分钟前
28
0
整理 Linux下列出目录内容的命令

在 Linux 中,有非常多的命令可以让我们用来执行各种各样的任务。当我们想要像使用文件浏览器一样列出一个目录下的内容时,大家第一时间想到的是 ls 命令。但只有 ls 命令能实现这个目的吗?...

良许Linux
30分钟前
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部