微信小程序新手教程之怎么獲取系統(tǒng)信息和地理位置，本篇默認(rèn)已經(jīng)成功安裝微信小程序工具，來(lái)和小編一起看看吧

三個(gè)接口都是微信提供的。

index.js

//index.js//獲取應(yīng)用實(shí)例var app = getApp() Page({ data:{ userinfo : {}, systemInfo:{}, location :{} }, onShow:function(){ var that = this; // 獲取用戶資料 wx.getUserInfo({ success:function(res){ that.setData({ userinfo:res.userInfo }); } }); // 獲取系統(tǒng)資料 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">系統(tǒng)信息</text> </view> <view class="info-box"> <text class="info-text">手機(jī)型號(hào)：{{systemInfo.model}}</text> <text class="info-text">設(shè)備像素比：{{systemInfo.pixelRatio}}</text> <text class="info-text">窗口寬度：{{systemInfo.windowWidth}}</text> <text class="info-text">窗口高度：{{systemInfo.windowHeight}}</text> <text class="info-text">微信設(shè)置的語(yǔ)言：{{systemInfo.language}}</text> <text class="info-text">微信版本號(hào)：{{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">經(jīng)度：{{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>

最后效果圖

好了。文本介紹了三個(gè)接口的使用方式，具體怎么發(fā)揮，大家自行判斷吧。

下面小編就給大家介紹一種一個(gè)小程序吧

嗨圖功能

1、專題——DIY圖片的模板，點(diǎn)擊可以生成使用，分享到朋友圈。

2、分享墻——用戶上傳的自己DIY作品。

3、立即制作——可以用自己的圖來(lái)DIY。

4、告訴我——告訴產(chǎn)品的改進(jìn)，內(nèi)容的增加。

想要體驗(yàn)怎么制作屬于自己個(gè)性朋友圈照片的用戶，掃一掃下面的二維碼就可以啦!還等什么，趕緊掃碼體驗(yàn)，開啟你的嗨圖之旅吧!