实训Day6

日期	2019年6月 17日			第 6 天  共 10天
实习地点		科技楼423
教学大纲中规定的实习教学内容	校内综合实训是系统讲授微信小程序开发技术，通过小程序开发项目实例来训练学生的实践能力，检验学生对微信小程序开发技术所学知识的综合运用能力的重要环节。每位学生需完成老师布置的实验内容，并完成综合性实训项目的开发。从而达到对所学知识的深刻理解，进而为今后更深入的学习和应用打下坚实的基础。
实习 目的及 要求	1、掌握微信小程序项目环境搭建; 2、掌握微信小程序项目界面设计编写;; 3、掌握微信小程序项目业务逻辑处理; 4、掌握MVVM设计模式框架开发; 5、通过本课程的学习，培养学生观察、分析、解决问题的能力； 6、培养学生严肃认真、实事求是的良好作风。
任务 完成 情况、 主要 收获 与 体会	实训的第六天，老师主要讲解微信小程序项目API。在实训刚开始，老师就之前布置的天气小程序的作业进行了详细的讲解，在讲解的过程中来教我们使用API。在小程序的设计过程中虽然遇到了一点问题，比如地点的定位不准确，但是还是很快解决了问题，天气小程序得以成功定位城市来获取天气。     老师给我们布置了一个作业，就是通过数据绑定来显示获取定位之后的天气状况，还有设计一个七天天气的左右滑动的布局，在课余时间我基本完成了老师布置的任务，虽然在布局上还有需要完善的地方，但是还是有所收获。
教师 指导 （辅导） 内容	指导学生了解微信小程序项目API，指导学生微信小程序项目API实践
	指导方式		面授		指导时长（分钟）	300
其它 需说 明的 情况

 

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

Page({
  data: {
    location: "",
    weather: {}
  },
  // 输入框搜索功能
  finish: function (e) {
    var _this = this;
    // console.log(e.detail.value);
    _this.setData({
      location: e.detail.value
    })
    this.getWeather(_this);
  },

  // 获取天气
  getWeather: function (_this) {
    wx.request({
      url: 'https://www.tianqiapi.com/api/', //仅为示例，并非真实的接口地址
      method: "get",
      dataType: "json",
      data: {
        version: "v1",
        city: _this.data.location
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
        // console.log(res.data.update_time.substr(5,11))
        _this.setData({
          weather: res.data,
        })

      }
    });
  },

  onLoad: function () {
    var _this = this;
    //发起一个网络请求 weather
    this.getWeather(_this);
  }
})

wxml

  
  



  
    
  
  



  
     
    {{weather.city}}
  
 {{weather.update_time}} 更新




  
    {{weather.data[0].tem}} ℃
  
  {{weather.data[0].wea}}
  空气质量:{{weather.data[0].air_level}}
  


未来一周天气预报


{{item.date}}
{{item.wea}}
{{item.tem}}~{{item.tem2}}

 

wxss
/**index.wxss**/
page{
  height: 100%;
  background: url(https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1110753158,2009428808&fm=26&gp=0.jpg) no-repeat 0 0
}

/* 导航条开始 */
.nav{
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
}
.nav>.ipt{
  width: 90%;
  border-bottom: 2rpx solid #ddd;
  padding-left: 60rpx;
  box-sizing: border-box;
}
.pla{
  font-size: 26rpx;
}
.nav>.img{
  width: 40rpx;
  height: 40rpx;
  position: absolute;
  left: 45rpx;
  top: 5rpx;
}

/* 导航条结束 */
/* 用户 */
.user{
  margin: 20rpx 34rpx 0rpx;
  display: flex;
  align-items: center;
}
.user>.userAvatar{
  width: 55rpx;
  height: 55rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 1rpx solid #ddd;
}
.user>.userNick{
  font-size: 28rpx;
  color: rgb(179, 160, 160);
  margin-left: 20rpx;
}

/* 8465148651 */
.map{
  margin: 0 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.map .l-box{
  display: flex;
  align-items:center;
}
.map .img{
  width: 35rpx;
  height: 35rpx;
}
.map .loc{
  font-size: 54rpx;
  margin-left: 15rpx;
  color: #777;
}
.r-box{
  font-size: 26rpx;
  color:#777;
}

/* 7845125321 */
.info{
  height: 600rpx;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.info .tem{
  height: 400rpx;
  line-height: 400rpx;
  font-size: 140rpx;
  color: #777;
  position: relative;
}
.info .tem text{
  position: absolute;
  right: -30rpx;
  top: -15rpx;
  font-size: 30rpx;
}

.info .wea{
  color: #666;
}
.info .air_level{
  margin: 10rpx;
  font-size: 30rpx;
  color: #777;
}
/* END weather */

scroll-view{
  height: 400rpx;
  background-color:rgba(0,0,0,.3);
}

/* 滚呀 */
.guides {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
font-size: 24rpx;
padding-top: 20rpx;
/* border-bottom: 1rpx solid rgba(240, 240, 240, .4); */
background: rgba(0, 0, 0, .04);
margin-bottom: 20rpx;
overflow-x: scroll;
}

.item {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
width: 170rpx;
flex-shrink: 0;
}
.i {
  padding-bottom: 20rpx;
  color: #777;
}

.title{
  height: 100rpx;
  color: #777;
  font-size: 40rpx;
  display: flex;
  justify-content: center;
  align-items:flex-end;
}

截图