以下是一个简单的微信小程序示例,可以显示一个按钮和点击按钮后的天气查询结果:
// app.jsApp({ onLaunch: function () { // 小程序启动时执行的代码 }, globalData: { weatherData: null, }})
<!-- index.wxml --><view class="container"> <button bindtap="getWeatherData">查询天气</button> <text>当前天气为: {{ weatherData.current.temperature }}℃</text></view>
/* index.wxss */.container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;}button { margin-top: 20px; padding: 10px 20px;}
// index.jsPage({ data: { weatherData: null, }, getWeatherData: function () { const app = getApp() wx.request({ url: 'https://api.example.com/weather', // 替换为实际的天气查询接口地址 method: 'GET', success: (res) => { app.globalData.weatherData = res.data this.setData({ weatherData: app.globalData.weatherData }) }, fail: (err) => { console.log(err) } }) }})
这个小程序有一个页面,页面上有一个按钮。当用户点击按钮时,程序会调用getWeatherData
函数,向指定的天气查询接口发送GET请求。如果请求成功,将返回的数据存储在全局变量weatherData
中,并更新页面以显示当前天气信息。如果请求失败,将在控制台中打印错误信息。请注意,在真实应用中,您需要将https://api.example.com/weather
替换为实际的天气查询接口地址。