DAY03 微信小程序项目结构分析

 

 

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

mine.wxml

<view class="btn-area">
<view class="logo"><open-data type="userAvatarUrl" class="userinfo" id="userinfo"></open-data></view><open-data type="userNickName" lang="zh_CN"></open-data>  
</view>

<view class="page-body-info">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>

mine.wxss

/* pages/mine/mine.wxss */
.page-body-info {
padding-bottom: 0;
height: 230px;
}
.userinfo-avatar {
border-radius: 128rpx;
width: 128rpx;
height: 128rpx;
}
.userinfo-nickname {
margin-top: 20rpx;
font-size: 38rpx;
}
.userinfo{
 width: 185rpx;
 height:185rpx;
 border-radius:50%;
 display: flex;
overflow:hidden;
 text-align: center;
}

mine.js

/*获取用户信息*/
  getUserInfo: function () {
    var that = this
    _getUserInfo();
    function _getUserInfo() {
      wx.getUserInfo({
        success: function (res) {
          that.setData({
            userInfo: res.userInfo
          })
          that.update()
        }
      })
    }
  },
onGotUserInfo: function (e) {
 console.log("nickname=" + e.detail.userInfo.nickName);
 }

遇到的问题：将用户头像及昵称在页面上显示，我尝试了多种方法，传统接口wx.getUserInfo的效果会弹出一个给用户的弹窗，需要用户授权，经过测试传统的wx.getUserInfo目前还是能用的，但是在使用时候会有官方log提醒你，这个方法需要升级。所以我又尝试了官方提供的最新方法Open-data标签，使用这个标签可以不用用户授权直接获得头像和昵称。后通过这些方法我得到了用户头像，可是发现图片不清晰且规格太大，使页面看起来不美观，于是我修改了图片规格，并添加了将头像图片修改为圆形的方法。预览后发现用户头像及昵称没在页面居中，具体我也不知该如何调整。

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

mine.wxml

<button type="primary" button bindtap='getInfo'>获取系统信息</button>
</view>
    <view>手机型号:{{model}}</view>
    <view>设备像素比:{{pixelRatio}}
    <view>操作系统版本:{{system}}</view>
  </view>

mine.js

/*获取设备信息*/
  getInfo: function() {
    var _this = this;
wx.getSystemInfo({
success: function (res) {
  _this.setData({
  model: res.model,
 pixelRatio: res.pixelRatio,
  system: res.system
  })
},
  fail: function (res) {
  },
  complete: function (res) {
  }

})
}

小程序预览

点击“获取设备信息”按钮后才可获得设备信息

 遇到的问题：这三种设备信息的标题直接出现在页面中，不需要点击按钮。点击按钮后，得到的设备信息的内容才出现。不知道该怎样让标题连同信息都于点击按钮后出现。

3.把整个“地图”页面变成地图（最好有浮标定位到当前位置）

classify.wxss

page{
  height: 100%;
}

classify.wxml

<view>纬度：{{latitude}}</view>
<view>经度：{{longitude}}</view>
<view style='width:100%;height:100%'>
<!-- map.wxml -->
  <map id="map"
    map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" 
    controls="{{controls}}"
    bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bindregionchange="regionchange" show-location 
style='width:100%;height:100%'>
     </map>
</view>

classify.js

currentLoaction: function (e) {//地图上显示图标
    wx.getSystemInfo({
      success: function (res) {
        widthCtr = res.screenWidth;
        //console.log(widthCtr + "=====");
        e.setData({
          height: res.windowHeight - 59,
          controls: [
            {
              id: 1,
              iconPath: '../images/1.png',
              position: {
                left: res.screenWidth - 50,
                top: 300 - 50,
                width: 30,
                height: 30
              },
              clickable: true
            }
          ]
        })，

 GPSsubmit: function (e) {
    wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        var latitude = res.latitude
        var longitude = res.longitude
        var speed = res.speed
        var accuracy = res.accuracy
        this.setData({ latitude: latitude, longitude: longitude })
        wx.showModal({
          title: '当前位置',
          content: '经度' + res.longitude + '纬度' + res.latitude,
        })
      }

    })
  }

 

小程序预览

①获取用户权限

②在地图中显示大致位置及经纬度