微信小程序天气查询实例

 时间:2026-02-14 22:22:29

1、打开开发者工具,在工程的pages内新建‘mypage’文件夹,并在文件夹下新建mypage,在app.json中将mypage设为第一页面

微信小程序天气查询实例

2、在mypage.wxml中添加一个input输入框和一个查询button,以及for循环显示的view,用来显示查询结果,代码如下:

<!--pages/mypage/mypage.wxml-->

<input placeholder='请输入城市名' bindinput='input' style='border:3rpx solid ;height:80rpx'>

</input>

<button bindtap='clickHandler' style='margin:10rpx' class='primary'>查询</button>

<view wx:for='{{tqdata}}'>

{{item.date}} :{{item.temperature}}:{{item.weather}}

</view>

微信小程序天气查询实例

3、在工程的app.js文件,定义查询的函数,这里要调用api接口,访问的域名必须在小程序后台先配置号,或者在开发者工具详情页面,勾选不校验域名

微信小程序天气查询实例

4、天气接口这里用的某合,可以自行百度很多都提供,调用方法同样会有详细说明,这里不赘述,调用接口代码如下:

getweather:function(ct,callbackfun){

wx.request({

url: 'https://apis.juhe.cn/simpleWeather/query?city='+ct+'&key=yourkey',

data: {

x: '',

y: ''

},

header: {

'content-type': 'application/json' // 默认值

},

success(res) {

callbackfun(res.data)

}

})

},

这里定义了两个参数,一个是传进来的城市名,一个是回调函数处理返回的数据,key值用申请接口是得到的

微信小程序天气查询实例

5、在mypage.js的data中定义数据如下:

data: {

tqdata:[],

city:''

},

微信小程序天气查询实例

6、在mypage.js中定义input的响应函数,绑定数据,同时定义查询按钮的点击事件函数,调用app.js的getweather函数,代码如下:

input:function(e){

this.setData({city:e.detail.value})

},

clickHandler:function(){

var thispage = this

app.getweather(this.data.city,function(data){

console.log(data)

thispage.setData({tqdata:data.result.future})

})

}

微信小程序天气查询实例

7、编译运行代码,输入北京,查询天气结果如下图

微信小程序天气查询实例

  • LinqDataSource如何配置Where条件#校园分享#
  • Win10怎么打开或关闭输入指示图标?
  • 怎样使用Eclipse新建Android模拟器
  • edge浏览器修改字体样式步骤介绍
  • IntelliJ IDEA如何设置IDE自动保存的时间
  • 热门搜索
    肝血管瘤是怎么形成的 房子平面图怎么画 小学生成语接龙大全 怎么发帖 分手信怎么写 日语大全 红烧肉的做法大全 海贼王果实大全 玻璃胶怎么洗 qq个性签名大全霸气