案例：查询天气预报
1.需要使用到的接口网址，在百度搜索 聚合数据：https://www.juhe.cn/
聚合数据是一个请求接口的网站
准备工作做好后，就开始打开微信小程序编译器
wxml：
<view class="top" > <text>查看天气预报</text> </view> <form bindsubmit="submit" > <view class="search"> <input type="text" name="city" placeholder="请输入查询的城市" /> <button form-type="submit" type="primary" size="mini">查询</button> </view> </form> <!-- 遍历数据 --> <view class="city"><text>当前城市：{{city}}</text></view><view wx:for="{{weather_info}}" wx:key="index" class="bottom"> <text>当前日期：{{item.date}}</text> <text>当前天气：{{item.text_day}}</text> <image src="/pages/image/white/{{item.code_day}}@1x.png" mode="" class="img" /> <text>当前最高温度：{{item.high}}</text> <text>当前最低温度：{{item.low}}</text> </view> wxss： .this{ padding: 0; margin: 0; box-sizing: border-box; } .top{ text-align: center; color: blueviolet; font-size: 40rpx; font-weight: bold; } input{ border: 2rpx solid #ccc; width: 400rpx; height: 100rpx; } .search{ width: 700rpx; height: 100rpx; display: flex; justify-content: center; margin: 30rpx auto; } .search input{ padding-left: 20rpx; } .search button{ margin-top: 20rpx; } .img{ width: 50rpx; height: 50rpx; } .city{ font-size: 40rpx; margin: 50rpx 10rpx; text-decoration: underline; } .bottom{ border: 10rpx solid #ccc; color: blue; margin: 50rpx 20rpx; border-radius: 20rpx; } wx.js： data: { city:"郑州", weather_info:[] }, sending(){ wx.request({ url: 'https://www.itnan.cc/api/xcxapi/getweather.php', data:{ city:this.data.city, key:"ShEnBT72p59WVjXFq" }, success:(res)=>{ console.log("请求能成功"); this.setData({ weather_info:res.data.results[0].daily }) } }) }, submit(event){ console.log(event); //获取城市名称 this.setData({ //更改城市名称 city:event.detail.value.city }) //发送请求，调用sending this.sending();
}, /** * 生命周期函数--监听页面加载 */ onLoad(options) { this.sending(); },
总结：
知识点：wxml里面用到了<from>表单获取数据 渲染页面：当前城市，天气图片，温度等
wxss: 根据个人喜好来 进行修饰 美化
wx.js: 1. 点击按钮事件 创建一个函数 用来点击发起请求
2.wx. request 发起请求 输入接口地址及key success 求情成功 在里面进行遍历渲染
3. 获取表单数据 创建一个函数
4.获取 搜索框内的 信息，通过连接的接口发送至后台
5.后台进行反馈，渲染到页面
生命周期函数：监听页面加载 意思是在页面出现时，加载出渲染的网页信息。
使用微信小程序调用接口的方法如此，其他接口的调用方法思路一样，需要注意的是，再调用不同类型接口时，需要注意每个接口地址提供的接口文档，对应的type不同，其中里面渲染的内容名称也不同。
标签：city,调用,微信,接口,50rpx,margin,页面
From： https://www.cnblogs.com/ljygzyblog/p/weixn_8.html