index.jsx 2.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
  1. import { View, Input } from '@tarojs/components'
  2. import Taro,{useReady} from "@tarojs/taro"
  3. import React,{useState,useEffect} from 'react'
  4. const Weather =(date)=> {
  5. const [futureli,setFutureli]=useState([])
  6. const [today,setToday]=useState([])
  7. const [success,setSuccess]=useState(false)
  8. const [time,setTime]=useState('')
  9. const weather=(a)=> {
  10. Taro.request({
  11. url: a.url, //仅为示例,并非真实的接口地址
  12. data: {
  13. app: 'weather.'+a.type,
  14. //cityId:"101210101",
  15. //citynm:'北京',
  16. weaId: a.weaId,
  17. appkey: '10003',
  18. sign: 'b59bc3ef6191eb9f747dd4e83c99f2a4',
  19. format: 'json'
  20. },
  21. header: {
  22. 'content-type': 'application/json' // 默认值
  23. },
  24. success: function (res) {
  25. //console.log(res.data.result)
  26. if(a.type==='future')
  27. {
  28. setFutureli(res.data.result);
  29. }
  30. else if(a.type==='today')
  31. {
  32. //console.log(res.data.result);
  33. setToday(res.data.result);
  34. }
  35. }
  36. })
  37. }
  38. const getTime=()=>{
  39. var time = new Date();
  40. var h =time.getHours(); //h用来放时
  41. h = h < 10? '0' + h:h;
  42. var m = time.getMinutes();//m用来放分
  43. m= m<10?'0'+m:m;
  44. //console.log(time.getMonth()+1+'月'+time.getDate()+'日'+' '+h + ':' + m);
  45. setTime(time.getMonth()+1+'月'+time.getDate()+'日'+' '+h + ':' + m)
  46. }
  47. const intoarea=(a)=>{
  48. if(typeof(a)==='string')
  49. return a.split('℃')[1].replace('/','')+'~'+ a.split('℃')[0]+'℃'
  50. }
  51. useReady(() => {
  52. weather({url:'https://sapi.k780.com',weaId:date.props.weaId,type:'future'});
  53. weather({url:'https://sapi.k780.com',weaId:date.props.weaId,type:'today'});
  54. setSuccess(true)
  55. setInterval(getTime,1000);
  56. })
  57. // useEffect(()=>{
  58. // setInterval(getTime,1000);
  59. // },[])
  60. return (
  61. <View className='weather'>
  62. <View className="dev">
  63. <View className="title">气象数据</View>
  64. <View className="address">{today.citynm}市</View>
  65. </View>
  66. <View className="today">
  67. <View className="temp_curr">{today.temp_curr}</View>
  68. <View className="todaydate">
  69. <View className="du">℃</View>
  70. <View className="sun">{today.weather}</View>
  71. <View className="date">{time}</View>
  72. <View className="temparea">{intoarea(today.temperature)}</View>
  73. </View>
  74. </View>
  75. <View className="futuretitle">未来7天天气预报</View>
  76. {
  77. futureli.map((item)=>{
  78. return (
  79. <View className="futurediv">
  80. <View className='data'>{item.days.split('-')[1]}月{item.days.split('-')[2]}日</View>
  81. <View className="wea zhui">{item.weather}</View>
  82. <View className="temp">{intoarea(item.temperature)}</View>
  83. </View>
  84. )
  85. })
  86. }
  87. </View>
  88. )
  89. }
  90. export default Weather