校内实训第三天

第三天的实训，学习到了很多，如轮播图、小程序地图、用户头像和昵称的获取和排版

小程序地图

html文件代码

<view style='width:100%;height:100%'>
  <map longitude="{{longitude}}" latitude="{{latitude}}" markers="{{markers}}" covers="{{covers}}" show-location scale="13" style='width:100%;height:100%'></map>
</view>

js文件代码

// pages/classify/classify.js
Page({
  data: {
      longitude:0,
      latitude:0,
    markers: [{
      iconPath: "/resources/others.png",
      id: 0,
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }]
  },
  onLoad: function () {
    console.log(this)
  },
  onReady: function () {
    // console.log(this)
    var _this = this;
    wx.getLocation({
      success:function(res){
        console.log(res);
        _this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    })
    
  }
})

用户

js文件代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    mobileModel: '',
    windowWidth: '',
    windowHeight: '',
    screenWidth:'',
    screenHeight:'',
    system:'',
    userInfo: {}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          mobileModel: res.model,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          screenWidth:res.screenWidth,
          screenHeight:res.screenHeight,
          system:res.system
        })
      }
    })
  },

wxml文件代码

<!--pages/mine/mine.wxml-->
<view class="container0">
  <text>Mine</text>
  </view>
<view class="container0-1">
  <view  bindtap="bindViewTap" class="userinfo">
    <open-data type="userAvatarUrl"></open-data>
  </view>
</view>
<view class="userinfo-nickname"><open-data type="userNickName"></open-data></view>

  <view class="container1">
  <view>手机型号：{{mobileModel}}</view>
  <view>窗口宽度：{{windowWidth}}</view>  
  <view>窗口高度：{{windowHeight}}</view>
  <view>可使用窗口宽度:{{screenWidth}}</view>
  <view>可使用窗口高度：{{screenHeight}}</view>
  <view>手机系统：{{system}}</view>
</view>

wxss文件代码

/* pages/mine/mine.wxss */
.container0{
  height: 8%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.container0-1{
  height: 20%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
}

.userinfo-nickname {
  color: #aaa;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.container1 {
  display: flex;  /**指定flex 布局*/
  flex-direction:column; /**主轴 方向*/
} 
.container1>view{
  width:100%; /**宽度*/
  height:75rpx; /**高度指定*/
  background-color: whitesmoke;
  text-align: center; /**文字居中*/
  line-height: 100rpx; /**文字居中*/
}
.userinfo{
  width: 185rpx;
  height:185rpx;
  border-radius:50%;
  display: flex;
  overflow:hidden;
  justify-content: center;
}