实训Day6

最新推荐文章于 2025-03-21 10:22:08 发布

原创最新推荐文章于 2025-03-21 10:22:08 发布 · 433 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

xuexi 专栏收录该内容

29 篇文章

订阅专栏

今天是实训的第六天，通过实际操作，我深入理解了项目中的一些关键技术和难点。在团队合作中，我们共同解决了代码集成问题，并对前端界面进行了优化，提升了用户体验。此外，我还学习了如何使用新的开发工具，对日后的开发工作有了更充分的准备。

日期	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
<view class='nav'>
  <image class='img' src='../../assets/icons/ss.png'></image>
  <input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息' bindconfirm="finish" ></input>
</view>

<view class='user'>
  <view class='userAvatar'>
    <open-data type="userAvatarUrl"></open-data>
  </view>
  <open-data class='userNick' type="userNickName"></open-data>
</view>

<view class='map'>
  <view class='l-box'>
    <image class="img" src='../../assets/icons/lo.png'></image> 
    <text class='loc'>{{weather.city}}</text>
  </view>
 <text class='r-box'>{{weather.update_time}} 更新</text>
</view>

<!-- 天气信息 -->
<view class='info'>
  <view class='tem'>
    {{weather.data[0].tem}} <text>℃</text>
  </view>
  <text class='wea'>{{weather.data[0].wea}}</text>
  <text class='air_level'>空气质量:{{weather.data[0].air_level}}</text>
  
</view>

<view class='title'>未来一周天气预报</view>
<view class='guides'>
<view class="item" wx:for="{{weather.data}}" wx:key="{{index}}">
<view class="i">{{item.date}}</view>
<view class='temperature i'>{{item.wea}}</view>
<view class='temperature i'>{{item.tem}}~{{item.tem2}}</view>

</view>
</view>

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

截图