代码是天气api的小程序demo, 粘贴上js和wxml就可以运行看效果了, 有问题的加我qq 445899710, 可提供源代码, 效果如图

如果是测试, 请勾选配置 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书

如果正式使用, 请添加安全域名两个 (tianqiapi.com)

index.js代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

//index.js

//获取应用实例

const app = getApp()

Page({

data: {

weather: { 'wea_img': 'qing'},//实况天气

weatherweek:[],//七日天气

},

onLoad: function () {

this.getapi();

},

getapi:function(){

var _this = this;

// 获取IP地址

wx.request({

url: 'https://tianqiapi.com/ip/',

data: {

},

method: 'POST',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

console.log(res);

// 根据IP获取天气数据

_this.weathertoday(res.data.ip);_this.weatherweekday(res.data.ip);

}

});

},

// 天气api实况天气

weathertoday:function(ip){

var _this = this;

wx.request({

url: 'https://www.tianqiapi.com/api/?version=v6',

data: {

'ip': ip

},

method: 'GET',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

_this.setData({

weather: res.data

});

console.log(_this.data.weather)

}

});

},

// 天气api实况天气

weatherweekday: function (ip) {

var _this = this;

wx.request({

url: 'https://www.tianqiapi.com/api/?version=v1',

data: {

'ip': ip

},

method: 'GET',

header: {

'content-type': 'application/x-www-form-urlencoded'

},

success: function (res) {

_this.setData({

weatherweek: res.data

});

console.log(_this.data.weatherweek)

}

});

}

})

wxml代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

天气api - 小程序示例

{{weather.city}}实况天气预报

气象台 {{weather.update_time}} 更新

{{weather.tem}}℃ {{weather.wea}}

{{weather.win}} {{weather.win_speed}} {{weather.win_meter}}

湿度: {{weather.humidity}}

能见度: {{weather.visibility}}

气压: {{weather.pressure}}hPa

空气质量 {{weather.air_level}}

{{weather.air_tips}}

{{weather.city}}七日天气

{{item.day}} - {{item.wea}} - {{item.win[0]}} - {{item.tem1}}/{{item.tem2}}

TianqiAPI.com

CSS代码

1

2

3

4

5

.container {

height: 100%;

text-align:center; background:#f6f8f8; padding:20rpx;font-size:16px;

}

.padb{padding-bottom: 15rpx;}

小程序源码下载: https://pan.baidu.com/s/1jIPAtU1Q-EH6I18ud9pNvw 提取码 s8tm

--  转载的别人的文章(https://www.cnblogs.com/ccjin/p/10684924.html)-- 因为转载不过来 所以就复制了