《校内实训日志》DAY 05

实训DAY05日志

今日学习如使用flex对个人页面进行美化以及使用免费开放的接口实现天气预报、一言等小功能页面。

#info{

  color:#bfbfbf;

  font-size: 28rpx;

  align-items: flex-end;

  padding-bottom: 5rpx;

  box-sizing:border-box;

}

.ml_10{

  margin-left: 10rpx;

}

一、使用flex对个人页面进行美化

使用flex布局对获取的系统信息文字进行排版以及进行显示分割线。

 

二、使用免费开放的接口实现天气预报、一言等小功能页面

首先在小程序 | 微信公众平台 开发设置里设置服务器域名里设置好免费可开放的接口域名。

（1）一言小功能

var _this = this;

    //发起一个网络请求

    wx.request({

      url: 'https://v1.hitokoto.cn/', //填写真实的接口地址

      //请求参数

      data: {

        x: '',

        y: ''

      },

      header: {

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

      },

      success(res) {

        // console.log(res.data);

        _this.setData({

          yiyan:res.data,

        })

      }

});

 

（2）实现天气预报

// 发起一个网络请求

    wx.request({

      url: 'https://www.tianqiapi.com/api/',

      data: {

        version: "v1",

        city: "湛江"

      },

      method: 'GET',

      encodeType: "json",

      header: {

        'content-type': 'application/json'

      },

      success: function (res) {

        console.log(res);

        // 根据city获取天气数据

        // _this.weathertoday(res.data.city);

        // _this.weatherweekday(res.data.city);

      }

});