微信小程序天气查询

项目效果演示：

 

 代码展示：

search.wxml：

<!--pages/search/search.wxml-->
<view class="wrapper">
    <!-- 页面头部 -->
    <view class="header">
        <text>查讯{{city}}天气</text>
    </view>
    <!-- 输入框 -->
    <view class="search">
        <!-- 事件绑定 监听输入的事件-->
        <input placeholder="请输入城市" bindinput="inp_event"></input>
        <!-- 事件绑定 点击事件-->
        <image src="../../images/search.png" bindtap="tap_event"></image>
    </view>
    <!-- 天气列表 -->
    <view class="main">
        <view class="list">
            <!-- 列表渲染 -->
            <block wx:for="{{result}}" wx:key="index">
                <view class="opt">
                    <navigator url="../detail/detail?id=">
                        <view>日期：{{item.day}}</view>
                        <view>天气：{{item.wea}}</view>
                        <view>空气：{{item.air_level}}</view>
                        <view>温度：{{item.tem}}°C({{item.tem1}}°C/{{item.tem2}}°C)</view>
                        <view>风向风速：{{item.win[1]}}{{item.win_meter}}</view>
                        <view>日出日落：{{item.sunrise}}/{{item.sunset}}</view>
                        <!-- <image src="../../images/Weather/{{item.wea_img}}.png" style="width: 30px; height: 30px;"></image> -->
                    </navigator>
                </view>
            </block>
        </view>
    </view>
</view>

search.wxss:

.wrapper{
    background-color: #ccc;
}
.header{
    width: 100%;
    height: 50px;
    background-color: skyblue;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center;
    line-height: 50px;
}
.search{
    width: 100%;
    height: 50px;
    background-color: #ccc;
    padding: 0 50px; /*内边距*/
    box-sizing: border-box; /*改变组件大小的计算方式*/
    position: relative; /*相对定位*/
    border: 1px solid transparent;
}
.search input{
    width: 100%;
    height: 30px;
    background-color: white;
    border-radius: 15px;
    padding: 0 20px;
    box-sizing: border-box;
    margin: 10px 0;
}
.search image{
    width: 20px;
    height: 20px;
    position: absolute;
    right: 65px;
    top: 15px;
    z-index: 10000; /*层级*/
}
.main{
    width: 100%;
    padding: 20px 10px;
    box-sizing: border-box;
}
/* .main .list{} */
/* .main .list .opt{} */
.main .list .opt navigator{
    display: block;
    width: 100%;
    background-color: skyblue;
    border-radius: 10px;
    margin: 0 0 10px 0;
}
.main .list .opt navigator view{
    padding: 5px 20px;
    /* text-align: center; */
    border-bottom: 1px dashed white;
}
.main .list .opt navigator view:first-child{
    border-top: 1px dashed white;
}
search.js:

// pages/search/search.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        inpVal: "",
        result:[],
        city:""
    },
    //获取输入框的值
    inp_event: function (event) { //事件对象
        //获取输入框的值
        //声明变量  let const
        var val = event.detail.value;
        //给inpVal属性赋值
        this.setData({
            inpVal: val
        })
        // console.log(this.data.inpVal,'1111');
    },
    //获取inpVal属性值 查询天气
    tap_event: function () {
        // console.log(test);
        //判断inpVal 是否有值 如果没有值，不执行后续代码
        if (this.data.inpVal.length == 0) {
            //终止代码
            return;
        }
        //如果有值
        // console.log("输入框的值",this.data.inpVal);
        // 定义变量 记录输入框值
        var city = this.data.inpVal;
        // 调用查询添加的函数
        this.getWeatherData(city)
    },    
    //获取添加数据的函数
    getWeatherData:function(value){  //作用域1
        //记录当前函数作用域的 this
        var that = this;
        //请求数据的API
        wx.request({
            url: 'https://v0.yiketianqi.com/api?',
            data: {
                version: "v9",
                unescape: "1",
                appid: "34459491",
                appsecret: "Pd8tA2Py",
                city: value
            },
            success: function (res) {  //作用域2
                // console.log(res,222);
                that.setData({
                    city:res.data.city,
                    result:res.data.data
                })
                console.log(that.data.result);
            },
            fail: function (err) {
                console.log(err, '失败');
            }
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // 调用测试接口
        // this.test()
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {

    }
})