微信小程序开发 Day03

任务：1、在“我的” 页面调用微信小程序里的方法，把用户头像、用户名称做一个列表；

           2、 调用微信小程序的接口获取手机信息，在“我的” 页面里把手机信息展示出来（包括手机型号、手机系统、分辨率）；

           3、把整个“地图”页面变成地图（最好有浮标定位到当前位置）作业提交形式:有源代码和两个页面的手机截图。

1、在“我的” 页面调用微信小程序里的方法，把用户头像、用户名称做一个列表

2、 调用微信小程序的接口获取你的手机信息，在“我的” 页面里把手机信息展示出来（包括手机型号、手机系统、分辨率）

这个任务其实与第二个任务的形式相似，都是通过访问接口让用户反馈信息的方式，再将信息调用到面板让用户能够看到，在我看来最难的一步就是让控制台的信息放到版面的操作了。

调用小程序，将用户头像，用户名做成列表；手机信息，在“我的” 页面里把手机信息展示出来（包括手机型号、手机系统、分辨率）原码如下：

js原码：

const app = getApp()
Page({
  data: {
    model: '',
    pixelRatio: '',
    windowWidth: '',
    windowHeight: '',
    language: '',
    version: '',
    system: '',
    platform: ''
  },
  onLoad: function () {
  },

  getInfo: function () {
    var _this = this;
    wx.getSystemInfo({
      success: function (res) {
        _this.setData({
          model: res.model,
          pixelRatio: res.pixelRatio,
          windowWidth: res.windowWidth,
          windowHeight: res.windowHeight,
          language: res.language,
          version: res.version,
          system: res.system,
          platform: res.platform
        })
      },
      fail: function (res) {
      },
      complete: function (res) {
      }
    })
  }
})

wxml原码：

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->
<view class='header'>
 <open-data  type="userAvatarUrl"></open-data>
  </view>
  <view class='wenzi'>
  用户名：<open-data type="userNickName"></open-data>
  </view>
<view class="container">
  <button bindtap='getInfo'>获取系统信息</button>
  <view wx:if="{{model !=''}}">
    <view>手机型号:{{model}}</view>
    <view>设备像素比:{{pixelRatio}}</view>
    <view>窗口宽度:{{windowWidth}}</view>
    <view>窗口高度:{{windowHeight}}</view>
    <view>微信设置的语言:{{language}}</view>
    <view>微信版本号:{{version}}</view>
    <view>操作系统版本:{{system}}</view>
    <view>客户端平台:{{platform}}</view>
  </view>
</view>
<!-- 需要使用 button 来授权登录 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" style='width:150px ;hight:40px;'>授权登录</button>

wxss原码：

.header {
  position: relative;
  margin: 90rpx 0 90rpx 50rpx;
  width: 650rpx;
  height: 320rpx;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.wenzi{
  text-align: center;
} 

完成图如下：

 3、把整个“地图”页面变成地图（最好有浮标定位到当前位置）作业提交形式:有源代码和两个页面的手机截图

这个任务相对前两个来说简单很多，只要按照微信文件里面的教程操作就可以完成了，但是这之中有一个以后会经常遇到的问题，就是如果width和height都设置为100%的话，height无论如何都会变为0，无法正常显示模块，因此解决方法就是在classfly.wxss里面添加：

  page{
  height: 100%;
}

原因是菜单下面的元素使用了float属性。而float属性，会导致父元素的高度为0.以前在chrome或者Firefox下查看元素，父元素的高度都会是0.chrome的标尺会直接标出来是0，而Firefox下，则会看不到父元素。

下面是“地图”源代码：

js源代码：

Page({
  data: {
    longitude: 113.324520,
    latitude: 23.099994,
    markers: [{
      id: 0,
      iconPath: "../../images/icon_cur_position.png",
      latitude: 23.099994,
      longitude: 113.324520,
      width: 50,
      height: 50
    }]
  },
  onLoad: function () {
    var that = this;
    wx.getLocation({
      type: "wgs84",
      success: function (res) {
        var latitude = res.latitude;
        var longitude = res.longitude;
        //console.log(res.latitude);
        that.setData({
          latitude: res.latitude,
          longitude: res.longitude,
          markers: [{
            latitude: res.latitude,
            longitude: res.longitude
          }]
        })
      }
    })
  },
  onReady: function () {

  }
})

wxml源代码：

<view class="" hover-class="none" hover-stop-propagation="false" style="width: 100%; height: 100%;">

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

</view>

wxss源代码：

  page{
  height: 100%;
}

实现图片如下：