实训Day5

最新推荐文章于 2022-11-15 17:32:22 发布
最新推荐文章于 2022-11-15 17:32:22 发布
阅读量255 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Wayne_Xiaowei/article/details/93457904
版权

日期

2019年6月 17日

第 5 天  共 10天

实习地点

科技楼423

教学大纲中规定的实习教学内容

校内综合实训是系统讲授微信小程序开发技术，通过小程序开发项目实例来训练学生的实践能力，检验学生对微信小程序开发技术所学知识的综合运用能力的重要环节。每位学生需完成老师布置的实验内容，并完成综合性实训项目的开发。从而达到对所学知识的深刻理解，进而为今后更深入的学习和应用打下坚实的基础。

实习

目的及

要求

1、掌握微信小程序项目环境搭建;

2、掌握微信小程序项目界面设计编写;;

3、掌握微信小程序项目业务逻辑处理;

4、掌握MVVM设计模式框架开发;

5、通过本课程的学习，培养学生观察、分析、解决问题的能力；

6、培养学生严肃认真、实事求是的良好作风。

任务

完成

情况、

主要

收获

与

体会

 

 

实训第五天主要讲微信小程序项目组件应用相关知识，一开始老师先给我们讲解个人主页的样式如何实现，然后老师教我们如何使用接口来实现网络请求和响应，我们设置了相关了服务器的域名来请求需要的数据。

   在实现了网络请求和响应之后，我们还继续学会了通过数据绑定，将数据展示到页面上。

   在课余时间我们完成了老师布置的任务，做一个天气预报的小程序，在完成的过程中我遇到了不少的问题，比如样式的控制不够熟练等，我会在接下来的学习中不断去完善自己的不足。

 

 

教师

指导

（辅导）

内容

指导学生了解微信小程序项目组件应用，指导学生微信小程序项目组件应用实践

指导方式

面授

指导时长（分钟）

300

其它

需说

明的

情况

 

 

 

 

 

wxml
<image src="../../images/bg5.jpg" class="bg"></image>

<view class="container">
  
  <view class="nowWeather">
        <view class="city w">{{weather.city}}  麻章</view>
        <view class="temp w b">{{weather.data[0].tem}}</view>
        <view class="weather w">{{weather.data[0].wea}} | 空气 {{weather.data[0].air_level}}</view>
  </view>
  <view class="weahterDetail">
        <view class="">
          <view class="w center">{{weather.data[0].hours[0].win}}</view>
          <view wx:if="{{sc == '微风'}}" class="w b center f50">微风</view>
          <view wx:else class="w b center f50">{{weather.data[0].hours[0].win_speed}}</view>
        </view>
        <view class="l"></view>
        <view class="">
          <view class="w center">紫外线指数</view>
          <view class="w b center f50">{{weather.data[0].index[0].level}}</view>
        </view>
        <view class="l"></view>
        <view class="">
          <view class="w center">体感温度</view>
          <view class="w b center f50">{{weather.data[0].tem2}}</view>
        </view>
  </view>

</view>
 <view class='system'>
    <view></view>
    <view id="info"><text>未来一周天气</text></view> 
    <view><text class='colors'>{{weather.data[0].day}}:</text><text class='colors'>{{weather.data[0].wea}}</text></view>
    <view><text class='colors'>{{weather.data[1].day}}:</text><text class='colors'>{{weather.data[1].wea}}</text></view>
    <view><text class='colors'>{{weather.data[2].day}}:</text><text class='colors'>{{weather.data[2].wea}}</text></view>
    <view><text class='colors'>{{weather.data[3].day}}:</text><text class='colors'>{{weather.data[3].wea}}</text></view>
    <view><text class='colors'>{{weather.data[4].day}}:</text><text class='colors'>{{weather.data[4].wea}}</text></view>
    <view><text class='colors'>{{weather.data[5].day}}:</text><text class='colors'>{{weather.data[5].wea}}</text></view>
    <view><text class='colors'>{{weather.data[6].day}}:</text><text class='colors'>{{weather.data[6].wea}}</text></view>
  </view> 



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

截图

 

 

 

 

 

 

大橘汪汪喵
关注
微信小程序实践总结
qq_38727742的博客
06-12 2万+
基础的介绍框架小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，可以让开发者可以方便的聚焦于数据与逻辑上。响应的数据绑定框架的核心是一个响应的数据绑定系统。整个系统分为两块视图层（View）和逻辑层（...
安卓实训DAY5——简单的用户登录程序
weixin_62499894的博客
06-18 450
直接粘贴打包带走
微信小程序开发总结
且听真言
01-16 1403
微信小程序培训文档   目录 1. 小程序的目录结构 1 2. 微信小程序的生命周期 6 3. 小程序中的组件事件处理函数以及事件绑定 7 3.1小程序中的事件 7 3.2事件分类 9 3.3事件绑定和冒泡 10 3.4事件的捕获阶段 12 3.5事件对象 13 4. 微信小程序的渲染 15 5. 微信小程序路由 16 5.1页面栈 16 5.2路由方式 17 6. ...
2022-2023第一学期微信小程序期末实训报告
呦菜呦爱玩的博客
11-15 7552
2022-2023第一学期微信小程序期末实训报告 @[TOC](微信小程序小程实训报告) # 一、微信小程序简介 1. 简介 名称：网易云音乐 使用的技术：微信小程序，云服务
微信小程序-开发经验总结
03-29
最近小程序出来了，公司也要求我们开发一款小程序。于是，就开始着手做了，做了差不多一周吧，也遇到了很多问题，这里就来总结一下。（主要是从一个Android开发者的角度来述说的，可能比较 ...       最近小程序出来了，公司也要求我们开发一款小程序。 于是，就开始着手做了，做了差不多一周吧，也遇到了很多问题，这里就来总结一下。 （主要是从一个Android开发者的角度来述说的，可能比较零碎的一些知识点和经验，如果大家还有补充，欢迎） 总结 1：传参，方法判断 js中 方法中可以传递一个方法作为形参，在java中是不可以的。比如start项目中的 getUserInfo:function(cb
微信小程序项目实训
小菜鸟博客
07-27 3036
文章目录小程序项目培训实践周记第一周周记第二周周记 小程序项目培训实践周记 第一周周记   第一周实训很快就过去了，这一周是整个实训的开始，我们知道了整个实训要完成的项目—微信小程序订餐系统，于是，我们这组便开始进行项目。   我们整理项目资料，然后对各自的特长分好工，我主要负责微信小程序部分后端的任务。我觉得不管个人完成什么任务，都要对这个项目有所了解，同时还要处理好信息对等，互相需要沟通好，如...
宁波实训Day5:查询、分页、登录
weixin_45388044的博客
07-16 163
查询 sql的模糊查询的语句如下 select * … like ‘%’ …’%’ 有时候Mybatis里会报错，可以这样写： <select id="findUserByName" parameterType="java.lang.String" resultType="com.gn.bean.UserInfo"> select * from tb_user ...
项目实训day8
03-04
在“day8”这个压缩包文件中，可能包含了实训项目这一天所涉及到的代码、模型、日志或其他相关资料。这些资料可以帮助我们进一步理解如何在实际项目中运用PyTorch进行深度学习模型的构建和训练。通过学习和实践这些...
Android实训 DAY1
weixin_62499894的博客
06-12 692
正式学习Android的第一天
python实训目的意义_Python-暑期实训day 1
weixin_39854070的博客
11-26 5050
python基础:一 编程语言什么是编程语言？上面提及的能够被计算机所识别的表达方式即编程语言，语言是沟通的介质，而编程语言是程序员与计算机沟通的介质。在编程的世界里，计算机更像是人的奴隶，人类编程的目的就命令奴隶去工作。什么是编程？编程即程序员根据需求把自己的思想流程按照某种编程语言的语法风格编写下来，产出的结果就是包含一堆字符的文件。强调：程序在未运行前跟普通文件无异，只有程序在运行时，文件内...
2020微信小程序学习报告.2.17-3.1.（一）
01-03
#微信小程序学习报告 应学校课程要求，在此记录网上学习微信小程序相关知识的过程，如各知识点与实践等。 首先是微信小程序的相关知识点： 产品： 1.微信小程序是在2015年提出的一个方案，起初叫应用号，随后渐为口语化，改称微信小程序； 2.微信小程序可以提供https请求、上传与下载文件、数据缓存、位置获取等众多API,支持左大多数简易的软件游戏等。 开发： 1. 在网页找到微信开发者工具，然后下载并安装合适的版本； 2. 了解各种工具，如：创建新文件夹，创建js、json等文件，插入断点逐步浏览查看代码等； 3. 了解各个模板的作用，左侧的模拟器与右侧的资源管理器
微信小程序学习摘要系列
11-30
微信小程序学习摘要系列
微信小程序学习总结（三）条件、模板、文件引用实例分析
12-28
本文实例讲述了微信小程序条件、模板、文件引用。分享给大家供大家参考，具体如下： 上一节的在遍历的时候控制台中会报错 {{item.name}} 控制台中会显示这个东西 Now you can provide attr “wx:key” for a “wx:for” to improve performance. 当然了不处理也不影响程序运行，但是看着好不爽啊。 wx：key用来对列表渲染的数据指定一个”主键”，以加快列表渲染的速度。以
微信教师布置作业批改作业小程序.rar
07-10
这是一个用微信写的教师专用程序，布置作业批改作业小程序，主界面如下图左图所示，这也是本小程序的功能概括，主要就三个功能：我的作业、布置作业、批改作业，教师和学生登录后，会只显示自己所属的操作。若认真策划后写成小程序，功能还是挺有用的吧。
微信小程序实训报告
热爱分享，热爱记录
06-29 2万+
一 实习周记 第1周 （ 6 月 7 日 至 6 月 11 日） 这周是实习的第一周，这周第一天学习了git仓库同步老师的code，安装了vscode,学习了微信开发者工具的安装和使用，学习了创建一个小程序，和创建页面，以及小程序项目结构以及常用标签，使用开发者文档等基础入门知识，第一天坐在第一排，有比较认真的听陆老师讲课，但是在学习写标签的样式时有点吃力，学习了布局和定位。第二天学了定位中的绝对定位，和相对定位。绝对定位的参考系是页面的视口，而相对定位的参考系是绝对定位元素的父元素。学会了如何调整一个
小程序开发实践总结
weixin_45564474的博客
07-01 3760
小程序开发实践总结 从微信发布小程序以来，各大公司纷纷跟进都想从微信这个流量池里捞一杯羹。我司也不例外，我们整个前端团队这半年来基本上都是在开发小程序。前前后后也开发了四五个小程序了。总觉得要留下点什么，既是记录那些年我们踩过的坑，也是希望大家别再掉坑。 那些年我们踩过的坑 css样式不能引用本地图片资源，只能引用线上资源(background-image)，引用本地图片资源只能用标签。 {{}}不能执行函数方法，{{}}只支持基本的简单运算和ES6拓展运算符。如价格格式化这种常用的处理，只能.
微信小程序开发总结与心得(一)
热门推荐
qq_40126542的博客
02-25 5万+
Fundebug专注于JavaScript、微信小程序、微信小游戏，Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务，众多大佬公司都在使用。 0 前言 最近的工作重心一直在小程序，也开发了几个小程序，对小程序开发的流程及相关技术相对比较熟悉，在开发过程中也总结了一些心得经验、了解一些小程序文档上没有的东西、踩了一些坑。所以想着写篇文章记录下来，并借此将小程序开发的...
微信小程序学习和实践总结
不积跬步无以至千里; 不积小流无以成江海
06-18 9631
微信小程序学习和实践总结: 技术方案选型;原生小程序的UI库推荐;小程序和公众号账号的如何统一; 消息推送机制;小程序推广三类方式; 小程序的如何发布; 如何获取公共号微信用户openid
c语言简单万年历实训报告
最新发布
06-02
以下是一个简单的C语言万年历的实训报告，供您参考： 一、实训目的 本次实训的主要目的是通过编写一个简单的C语言万年历程序，巩固C语言基本语法和编程思想，提高编程能力和解决问题的能力。 二、实训要求 1、能够使用C语言基本语法和控制语句编写程序。 2、能够使用数组来存储和操作数据。 3、能够使用函数来实现模块化编程。 4、能够使用指针来操作内存中的数据。 5、能够使用文件来读取和写入数据。 三、实训内容 1、程序功能 本程序实现了一个简单的万年历功能，可以通过输入年份和月份来显示该月的日历。 2、程序实现 以下是本程序的主要代码实现： ```c #include <stdio.h> // 判断是否为闰年 int is_leap_year(int year) { if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) { return 1; } else { return 0; } } // 获取某个月份的总天数 int get_days(int year, int month) { int days[] = {31, 28 + is_leap_year(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31}; return days[month - 1]; } // 获取某个日期是星期几 int get_weekday(int year, int month, int day) { if (month == 1 || month == 2) { year--; month += 12; } int c = year / 100; int y = year % 100; int w = y + y / 4 + c / 4 - 2 * c + 26 * (month + 1) / 10 + day - 1; w = (w % 7 + 7) % 7; return w; } // 显示日历 void show_calendar(int year, int month) { int days = get_days(year, month); int weekday = get_weekday(year, month, 1); printf(" 日 一 二 三 四 五 六\n"); int i; for (i = 0; i < weekday; i++) { printf(" "); } for (i = 1; i <= days; i++) { printf("%2d ", i); if ((weekday + i) % 7 == 0) { printf("\n"); } } if ((weekday + days) % 7 != 0) { printf("\n"); } } int main() { int year, month; printf("请输入年份："); scanf("%d", &year); printf("请输入月份："); scanf("%d", &month); if (month < 1 || month > 12) { printf("月份输入错误！\n"); return 1; } printf(" %d年%d月\n", year, month); show_calendar(year, month); return 0; } ``` 四、实训总结 通过本次实训，我学会了如何使用C语言来编写一个简单的万年历程序，巩固了C语言基本语法和编程思想，加强了对函数、数组、指针、文件等概念和用法的理解，提高了编程能力和解决问题的能力。同时，我也意识到在编程过程中需要注重代码的规范、可读性和可维护性，这对于日后的开发工作非常重要。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值