微信小程序系列-1获取系统信息，地理位置，用户信息

直接调用微信接口实现：

test2.js

var app = getApp();
Page({
  data:{
    userinfo: {},
    systemInfo: {},
    location: {}
  },
  onShow:function(){
    var that = this;
    wx.getUserInfo({
      success:function(res){
        that.setData({
          userinfo:res.userInfo
        })

      }
    });
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          systemInfo:res
        });
      }
    });
    //获取位置信息
    wx.getLocation({
      success: function(res) {
        that.setData({
          location:res
        })

      }
    })
  }

})

test2.wxml

 <view class="header">
    <image class="user-header" src="{{userinfo.avatarUrl}}"></image>
    <text  >{{userinfo.province}}  {{userinfo.city}}</text>
    <text >{{userinfo.nickName}}</text>
  </view>
  <view class="slice-line"></view>
  <view class="center">
    <text class="text">系统信息</text>
  </view>
  <view class="info-box">
    <text class="info-text">手机型号：{{systemInfo.model}}</text>
    <text class="info-text">设备像素比：{{systemInfo.pixelRatio}}</text>
    <text class="info-text">窗口宽度：{{systemInfo.windowWidth}}</text>
    <text class="info-text">窗口高度：{{systemInfo.windowHeight}}</text>
    <text class="info-text">微信设置的语言：{{systemInfo.language}}</text>
    <text class="info-text">微信版本号：{{systemInfo.version}}</text>
  </view>
  <view class="center">
    <text class="text">位置信息</text>
  </view>
  <view class="slice-line"></view>
  <view class="info-box">
    <text class="info-text">纬度：{{location.latitude}}</text>
    <text class="info-text">经度：{{location.longitude}}</text>
    <text class="info-text">速度：{{location.speed}}</text>
    <text class="info-text">位置精确度：{{location.accuracy}}</text>
  </view>
  <view style="margin-top:100rpx;width:100%;height:2rpx;"></view>
  

需要在app.json中配置相应页面访问路径，访问结果是:

作者：scgyus

转载请注明出处：http://blog.csdn.net/scgyus/