实训第五天

实训第五天，老师给我们讲解了如何获取用户信息和服务器域名的配置和相关API的应用。每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名与进行网络通信。这次的作业是做一个天气小程序，数据获取不难，难就难在如何把页面设计得好看点。美观的页面对于小程序来说也非常重要。

 

一、域名设置

 

二、api

  click: function () {
    var _this = this;
    //发起一个网络请求
    wx.request({
      url: 'https://v1.hitokoto.cn/', //仅为示例，并非真实的接口地址
      data: {
        c: "a"
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        // console.log(res.data)
        _this.setData({
          yiyan: res.data
        })
      }
    })
    
  },
  onLoad: function () {
    var that = this;
    //发起一个网络请求 weather
    wx.request({
      url: 'https://www.tianqiapi.com/api/', //仅为示例，并非真实的接口地址
      method: "get",
      dataType: "json",
      data: {
        version: "v1",
        city: '湛江'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
        that.setData({
          weather: res.data,
          
          
        })
        // console.log(res.data);
      }
    });
  

三、代码

  


    
      {{weather.city}}
      
      {{weather.data[0].tem2}}-{{weather.data[0].tem}} {{weather.data[0].wea}}
      空气质量{{weather.data[0].air_level}} {{weather.data[0].win[0]}}
       

      
        
          {{weather.city}}七日天气
          更新时间：{{weather.update_time}}
        
      
      
        {{item.day}}
        
        {{item.tem}}/{{item.tem2}}
      
      
      
      
      
      
      
        
        
        穿衣指数：{{weather.data[0].index[3].level}}\n{{weather.data[0].index[3].desc}}
      
      
        
        
        紫外线指数：{{weather.data[0].index[0].level}}\n{{weather.data[0].index[0].desc}}  
      
      
      
        健臻·血糖指数：{{weather.data[0].index[2].level}}\n{{weather.data[0].index[2].desc}}  
      
      
      
        洗车指数：{{weather.data[0].index[3].level}}\n{{weather.data[0].index[3].desc}}  
      
      
      
        空气污染扩散指数：{{weather.data[0].index[4].level}}\n{{weather.data[0].index[4].desc}}             
      




  {{yiyan.hitokoto}}
  {{yiyan.from}}
    
  收获你的一言

      




  

四、截图