微信小程序—day04

元素水平+垂直居中

昨天的用户页的用户头像，是根据已知的像素大小，设置固定的值，达到居中的效果。

今日切换机型进行适配，发现对不同尺寸大小的屏幕不匹配。所以对wxss进行修改，真正达到水平+垂直居中。

参考博客：https://blog.csdn.net/qq_32623363/article/details/77101971

修改部分的wxss代码：

.portrait-user {
  position: absolute;
  width: 64px;
  height: 94px;
  /* 水平+垂直居中 */
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  justify-content: center;
}
/* 该元素的父元素，需要设置position: relative; */

用户页--设置模块

暂时只做了四个部分：

wxml+wxss代码：

<view class='settingMod'>
  <view class='settingItem'>
    <text class='settingText'>{{weather}}</text>
    <switch class='switch-weather' color='#8CBEF5' bindchange='switchChange'></switch>
  </view>
  <view class='settingItem' bindtap='toEdit'>
    <text class='settingText'>分享攻略</text>
    <image class='arrow' src='{{arrowUrl}}'></image>
  </view>
  <view class='settingItem'>
    <text class='settingText'>其他设置</text>
    <image class='arrow' src='{{arrowUrl}}'></image>
  </view>
  <view class='settingItem'>
    <text class='settingText'>意见反馈</text>
    <icon class='settingIcon' type='info' size=''></icon>
    <image class='arrow' src='{{arrowUrl}}'></image>
  </view>
</view>

.settingItem {
  height: 35px;
  border-bottom: solid #7676776b;
  padding-top: 5px;
}
.settingText,.settingIcon {
  font-size: 18px;
  vertical-align: middle;/*垂直对齐方式*/
  padding-left: 10px;
}
.switch-weather {
  float: right;
  padding-right: 10px;
}
.arrow {
  float: right;
  width: 32px;
  height: 32px;
  padding-right: 10px;
}

开关获取天气

开关用了switch组件，通过bindchange属性来触发开关事件。

天气信息，是从和风天气获取的实时天气信息。

js代码：

  /**
   * 获取实时天气数据
   */
  switchChange: function(e){
    // console.log(e);
    if(e.detail.value){
      wx.request({
        url: 'https://free-api.heweather.com/s6/weather/now?parameters',
        data: {
          location: "上海",
          key: "***"
        },
        success:(res)=>{
          console.log(res);
          var location = res.data.HeWeather6[].basic.location;
          var weather = res.data.HeWeather6[].now.cond_txt;
          var tmp = res.data.HeWeather6[].now.tmp;
          this.setData({
            weather: location + " " + weather + " " + tmp + "度"
          })
        }
      })
    }
    else{
      this.setData({
        weather: "打开开关，获取实时天气"
      })
    }
  }

location，这里暂时设定为固定城市，后续会根据获取的位置信息而改变。

key，需要到和风天气的网站注册后获取。

分享攻略页面

点击分享攻略，会跳转到分享编辑页面。该页面有上传图片、发送位置信息等功能。

用wx.navigateTo进行页面跳转；当然，用navigator组件也是同样的效果。

攻略编辑页面，是一个form表单，里面的数据都要向服务器传输。

第一部分，文字输入框 + 图片输入框

wxml+wxss代码:

<view class='editMod'>
      <textarea name="blog" placeholder='分享你的美食'></textarea>
      <image src='{{PicUrl}}' class='addPic' wx:if="{{upImg}}"></image>
      <image src='{{addPicUrl}}' class='addPic' bindtap='addImg'></image>
  </view>

.editMod {
  border-bottom: solid #7676776b;
  padding-top: 5px;
}
.editMod textarea {
  padding: 20px;
}
.addPic {
  width: 80px;
  height: 80px;
  padding-left: 20px;
  padding-bottom: 20px;
}

在对图片进行添加后，因为要上传到服务器进行保存，所以我们在腾讯云上，来搭建小程序的服务器。