实训Day5

日期	2019年6月 17日			第 5 天  共 10天
实习地点		科技楼423
教学大纲中规定的实习教学内容	校内综合实训是系统讲授微信小程序开发技术，通过小程序开发项目实例来训练学生的实践能力，检验学生对微信小程序开发技术所学知识的综合运用能力的重要环节。每位学生需完成老师布置的实验内容，并完成综合性实训项目的开发。从而达到对所学知识的深刻理解，进而为今后更深入的学习和应用打下坚实的基础。
实习 目的及 要求	1、掌握微信小程序项目环境搭建; 2、掌握微信小程序项目界面设计编写;; 3、掌握微信小程序项目业务逻辑处理; 4、掌握MVVM设计模式框架开发; 5、通过本课程的学习，培养学生观察、分析、解决问题的能力； 6、培养学生严肃认真、实事求是的良好作风。
任务 完成 情况、 主要 收获 与 体会	实训第五天主要讲微信小程序项目组件应用相关知识，一开始老师先给我们讲解个人主页的样式如何实现，然后老师教我们如何使用接口来实现网络请求和响应，我们设置了相关了服务器的域名来请求需要的数据。    在实现了网络请求和响应之后，我们还继续学会了通过数据绑定，将数据展示到页面上。    在课余时间我们完成了老师布置的任务，做一个天气预报的小程序，在完成的过程中我遇到了不少的问题，比如样式的控制不够熟练等，我会在接下来的学习中不断去完善自己的不足。
教师 指导 （辅导） 内容	指导学生了解微信小程序项目组件应用，指导学生微信小程序项目组件应用实践
	指导方式		面授		指导时长（分钟）	300
其它 需说 明的 情况

 

wxml



  
  
        {{weather.city}}  麻章
        {{weather.data[0].tem}}
        {{weather.data[0].wea}} | 空气 {{weather.data[0].air_level}}
  
  
        
          {{weather.data[0].hours[0].win}}
          微风
          {{weather.data[0].hours[0].win_speed}}
        
        
        
          紫外线指数
          {{weather.data[0].index[0].level}}
        
        
        
          体感温度
          {{weather.data[0].tem2}}
        
  


 
    
    未来一周天气 
    {{weather.data[0].day}}:{{weather.data[0].wea}}
    {{weather.data[1].day}}:{{weather.data[1].wea}}
    {{weather.data[2].day}}:{{weather.data[2].wea}}
    {{weather.data[3].day}}:{{weather.data[3].wea}}
    {{weather.data[4].day}}:{{weather.data[4].wea}}
    {{weather.data[5].day}}:{{weather.data[5].wea}}
    {{weather.data[6].day}}:{{weather.data[6].wea}}
   

js
//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    msg: "Home",
    id: "txt",
    yiyan:{},
    weather:{},
    // flag:false,
    index: "5",
    imgurl: [{
      url: "../../images/b3.jpg"
    }, {
      url: "../../images/b2.jpg"
    }, {
      url: "../../images/b1.jpg"
    }, {
      url: "../../images/b1.jpg"
    }, {
      url: "../../images/b2.jpg"
    }, {
      url: "../../images/b3.jpg"
    }, {
      url: "../../images/b1.jpg"
    }],
    // flag: false,
    obj: {
      name: "惠普",
      index: "0",
      time: "18"
    }
  },
  click: function () {
    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
        })
      }
    })
//天气天气
    wx.request({
      url: 'https://www.tianqiapi.com/api/',
      method:"get",
      dataType:"json",

      data: {
       version:"v1",
       city:'湛江',
       district:'麻章'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        // console.log(res.data);
        console.log(res.data);
        _this.setData({
          weather: res.data
          // flag:true
        })
      }
    })
  },

  onLoad: function () {

    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
        })
      }
    })

    wx.request({
      url: 'https://www.tianqiapi.com/api/',
      method: "get",
      dataType: "json",

      data: {
        version: "v1",
        city: '湛江',
        district: '麻章'
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        // console.log(res.data);
        console.log(res.data);
        _this.setData({
          weather: res.data
          // flag:true
        })
      }
    })
  }
})

 

wxss
system{
  padding-left: 30rpx;
  width: 100%;
  
}
.system>view
{
  font-size: 30rpx;
  padding-right: 50rpx;
  height: 60rpx; 
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #ddd;
    font-weight: bold
  
}
#info{
  color: #666;
  font-size: 30rpx;
  align-items: center;
  padding-bottom: 5rpx;
  box-sizing: border-box;
  font-weight: bold;
}
.color{
  color: rgb(255, 255, 255);
}

.color{
  color: rgb(0, 0, 0)
}

.colortt{
  color: rgb(255, 255, 255);
  font-weight: bold;
}
.ml_10{
  margin-left: 10rpx;
}

/* 尝试 */
/**index.wxss**/
 
/**common css**/
.w{
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}
.b{
  font-weight: bold;
}
 
.l{
  border: 1rpx solid #fff;
}
 
.center{
  text-align: center;
  margin: auto 0;
}
 
.hor{
  display: flex;
}
 
.f50{
  font-size: 50rpx;
}
 
/**index css**/
 
 
.bg {
  width: 100%;
  height: 5q00rpx;
}
 
.box {
  flex-direction:column;
}

.temp{
  font-size: 100rpx;
}
 
.container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 500rpx;
  display: block;
}
 
.nowWeather{
  padding: 60rpx;
}
 
.weahterDetail{
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  position: absolute;
  bottom: 50rpx;
  
}
 
.forcast{
  padding: 30rpx;
  margin-left: 16rpx;
  margin-right: 16rpx;
  border-bottom: 1rpx solid #eee;
  justify-content: space-around;
}
 
.img{
  width: 60rpx;
  height: 60rpx;
  margin-right: 
}

截图