微信小程序入门——天气查询，flex布局

一.项目结构

1.创建项目后清空目录，依次创建app.json，app.js，app.wxss。
app.json是整个小程序的配置文件，新建后写入{}

2.新建目录pages(开发页面的目录)和images(存放图片)

3.pages下新建index目录，index目录中新建page(这时会自动创建4个页面相关的文件)

二.开发

1.页面开发 index.wxml 语法类似html
picker是个选择器，mode设置为region时为地区选择器，通过bindchange绑定事件函数
页面中使用{{}}进行数据的动态绑定

<view class="container">
  <!-- mode=region 表示区域选择器 -->
  <picker mode="region" bindchange="changeRegion">
    <view>{{region}}</view>
  </picker>

  <text>{{data.tem}}℃ {{data.wea}} {{data.week}}</text>
  <image src="/images/{{data.wea_img}}.png"></image>
  <text class="air_tips">
    空气质量：{{data.air_level}}。{{data.air_tips}}
  </text>

  <view class="detail">
    <view class="row">
      <view>最低温度</view>
      <view>最高温度</view>
      <view>能见度</view>
    </view>
    <view class="row">
      <view>{{data.tem2}}℃</view>
      <view>{{data.tem1}}℃</view>
      <view>{{data.visibility}}</view>
    </view>
    <view class="row">
      <view>风向</view>
      <view>风力</view>
      <view>湿度</view>
    </view>
    <view class="row">
      <view>{{data.win}}</view>
      <view>{{data.win_speed}}</view>
      <view>{{data.humidity}}</view>
    </view>
  </view>
</view>

2.样式开发 index.wxss
采用了flex布局

/* pages/index/index.wxss */
.container{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  justify-content: space-around;
}
.detail{
  width: 100vw;
}
.row{
  display: flex;
}
.row view{
  width: 33.3%;
  text-align: center;
  margin: 20rpx 0;
}
text{
  color: #3883FA;
  font-size: 50rpx;
}
.air_tips{
  font-size: 40rpx;
  margin: 0 30rpx;
}
image{
  width: 200rpx;
  height: 200rpx;
}

3. js逻辑 index.js
api接口的调用使用wx.request({})，用法类似ajax，访问的api域名必须在自己的微信公众平台进行配置，且必须是https接口
使用this.setData({})来修改数据

  /* 定义页面中的初始数据 */
  data: {
    region: ["北京市", "北京市", "朝阳区"],
    city: "北京",  // 用来记录api查询时的城市名
    data: {
      wea_img: "xue",  // 给个默认的image，不然先加载页面的时候会报错
    }
  },

// picker选择器监听事件 bindchange="changeRegion"
changeRegion:function(e){
  this.setData({
    region: e.detail.value,
    // 因为api接口不用带市，所以对字符串进行切片，舍弃最后一个字
    city: e.detail.value[1].slice(0,-1),
  });
  this.getWeather();
},

// 自定义的天气查询函数，查询后更新数据
getWeather:function(){
  var that=this;  // wx.request方法中无法使用this关键字
  // 请求api，类似ajax，url中的域名必须是https，并配置过
  wx.request({
    url: 'https://tianqiapi.com/api',
    data: {
      version: 'v6',
      appid: '67317642',
      appsecret: '8cBVtkI9',
      city: that.data.city
    },
    success: function(resp){
      console.log(resp.data);
      that.setData({
        data: resp.data
      });
    }
  })
},
  /* 生命周期函数--监听页面加载 */
  onLoad: function (options) {
    this.getWeather();
  },

4.设置顶部导航 app.json

{
  "pages": [
    "pages/index/index"
  ],
  // 顶部窗口设置
  "window": {
    "navigationBarBackgroundColor": "#3883FA",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "今日天气",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "sitemapLocation": "sitemap.json"
}

5.页面展示

三.flex布局

1.简介
Flex是Flexible Box的缩写，意为”弹性布局”
采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

容器默认存在两根轴：主轴（main axis）和交叉轴（cross axis）

使用flex布局时，需要先设置容器的display属性为flex

2.容器常用属性及参数

• flex-direction
  设置主轴的方向：row(默认)，column
• justify-content
  项目在主轴上的对齐方式：
  center：居中
  space-around：两端留有空隙，项目之间的间隔都相等。
  space-between：两端对齐，项目之间的间隔都相等。
• align-items
  项目在交叉轴上的对齐方式：center（居中）
• flex-wrap
  一条轴线排不下时，如何换行
  nowrap（默认）：不换行
  wrap：换行，第一行在上方
• align-content
  定义了多根轴线的对齐方式
  space-around：每根轴线两侧的间隔都相等。
  space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
  center：与交叉轴的中点对齐

参考：https://www.runoob.com/w3cnote/flex-grammar.html

参考：https://www.bilibili.com/video/av58012612