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

微信小程序新手教程之怎么获取系统信息和地理位置，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

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

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>

最后效果图

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

下面小编就给大家介绍一种一个小程序吧

嗨图功能

1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈。

2、分享墙——用户上传的自己DIY作品。

3、立即制作——可以用自己的图来DIY。

4、告诉我——告诉产品的改进，内容的增加。

想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!