微信小程序新手教程之怎么获取系统信息和地理位置

三个接口都是微信提供的。

index.js

//index.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
         });
       }
     });
   }
 })

index.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>

最后效果图

好了。文本介绍了三个接口的使用方式，具体怎么发挥，大家自行判断吧。