201711671137 校内综合实训DAY3：微信小程序——轮播图、地图功能、获取用户信息

Content

• 地图功能实现参考https://developers.weixin.qq.com/miniprogram/dev/component/map.html
• 获取用户头像、名称等参考https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html
• 获取用户位置信息参考https://developers.weixin.qq.com/miniprogram/dev/api/location/wx.getLocation.html
• 获取用户设备信息参考https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfo.html
• 100vb

Results

• 通过微信开发者工具实现了图片轮播的功能
• 通过小程序open-data实现获取用户公开的个人信息
• 通过API实现获取用户的手机设备信息及位置信息
• 通过地图组件实现了在小程序内查看地图及显示所在位置的功能

Homework

// pages/classify/classify.js
Page({
  data: {
    latitude: 0,
    longitude: 0
  },
  onReady: function () {
    // console.log(this)
    var _this = this;
    wx.getLocation({
      success:function(res){
        console.log(res);
        _this.setData({
          longitude: res.longitude,
          latitude: res.latitude
        })
      }
    })
  }
})

<!--pages/classify/classify.wxml-->
<map id="map" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" show-location style="width: 100%; height: 100vb;"></map>

// pages/mine/mine.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    mobileBrand: "",
    mobileModel: "",
    mobileSystem: "",
    mobileScreenWidth: "",
    mobileScreenHeight: ""
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    var _this=this;
    wx.getSystemInfo({
      success: function(res) {
        _this.setData({
        mobileBrand: res.brand,
        mobileModel: res.model,
        mobileSystem: res.system,
        mobileScreenWidth: res.screenWidth,
        mobileScreenHeight: res.screenHeight
        })
      }
    })
  }
})

<!--pages/mine/mine.wxml-->
  <view><open-data type="userAvatarUrl"></open-data></view>
  <view><open-data type="userNickName" lang="zh_CN"></open-data></view>
  <view>手机型号：{{mobileBrand}} {{mobileModel}}</view>
  <view>手机系统：{{mobileSystem}}</view>
  <view>分辨率：{{mobileScreenWidth}}*{{mobileScreenHeight}}</view>