天气预报——Web学习day5

天气预报

1. 按钮单击事件
2. 输入框输入事件
3. 请求网络。
4. 处理响应。

弹性布局

整个页面先横向分隔成块，为不同日期与其包含信息。

.body view{
        }     //后代选择器,横向各占一份
整个页面先横向分隔成块，为不同日期与其包含信息。

.body view view{
             }     //日期类型气温等纵向各占一份

display: flex;     //弹性布局默认水平

 flex-direction: column;   // 日期类型气温等纵向各占一份

循环wx:for

1，wx:for
在组件上使用wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item 事例如下：

<view wx:for="{
   {items}}">
{
   {
   index}}: {
   {
   item:one}}
</view>
js文件：
Page({
   
items:[{
   one: "test1"},{
   one: "test2"}]
})

2、wx:for-item=‘变量名（随便起的）’ 它是指定循环数据当前的变量名，可以通过 { {变量名.属性}} 展示数组的元素。

3、wx:for-index=‘变量名（随便起）’，相当于给子元素起别名，如果缺省，默认值是 item，如果设置 wx:for-item=‘aName’，则可以在循环中通过 { {aName.属性名}} 来访问子元素的属性值。 如果没有这个wx:for-index，则访问的时候要像数组一样带下标。

将应用项目设置一个数组，拿其中一组元素，如何表达它？

设置一个内置变量item，为获取一个”日期“对象，则写为{item.data}.

再通过wx:for循环表达输出数组各个元素。

发送网络请求必要条件

发送网络请求，微信有以下几个要求：

1. 网址备案。
2. https,带证书，有效
3. 必须在小程序后台登记该网址。开发管理-> 开发设置->服务器域名。
4. 有了以上3点就可以上线小程序，并且所有人都能访问
   如果不具备以上条件，在开发阶段，可以选择，详情 勾选 不校验合法 域名

发送请求

onLoad:function()生命周期相关方法，可自动执行。

conslog.log(“进来没有？”) 指在微信开发者conslog框里打印一句话。

success回调函数，接口调用成功的回调函数

wx.request 发送请求

res调用回来的的数据就在res里

setData返回数据给前端

1、在data数据里直接给

**console.log()**会在浏览器控制台打印出信息

**console.dir()**可以显示一个对象的所有属性和方法

console.dir(res.data.data.forecast)一层一层又一层找到我们需要的数据

msg = res.data.date.forecast msg只会赋值一次，所以行不通

2、给this重新赋值，用setData返回数据给前端

代码

//index.js
// 页面获取全局数据的方式,app表示小程序的实例对象
const app = getApp()

Page({
   
  data: {
   
  },
  onLoad:function(){
   
    //this:当前对象
    let _this = this;
    //conslog.log("进来没有？")
    //自动执行
    //请求网络
    wx.request({
   
      //url: 请求地址。
      url:'http://wthrcdn.etouch.cn/weather_mini?city=武汉',
      success: function