一、wx.getUserProfile 获取用户信息
通过wx.getUserProfile实现微信登录小程序方法。
1、页面wxml文件
<view class="login">
<view wx:if="{{!isLogin}}" class="btn" bindtap="login">登录</view>
<view wx:else class="avatar">
<image class="img" src="{{avatarUrl}}" mode="aspectFit" bindtap="exit"></image>
<view class="txt">{{nickName}}</view>
</view>
</view>
2、页面wxss文件
.login{
height: 400rpx;
background-color: rgb(91, 127, 163);
font-size: 28rpx;
display: flex;
justify-content: center;
align-items: center;
}
.btn{
width: 100rpx;
height: 50rpx;
border: 1px solid #ccc;
text-align: center;
line-height: 50rpx;
background-color: white;
border-radius: 6rpx;
}
.avatar{
width: 140rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar .img{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
.avatar .txt{
color: #fff;
margin-top: 10rpx;
}
3、页面js文件
Page({
data: {
// 是否登录
isLogin:false,
// 头像
avatarUrl:'',
// 昵称
nickName:'',
},
// 登录方法
login(){
//获取当前微信用户信息
wx.getUserProfile({
// 设置获取微信信息的用途
desc: '登录系统',
// 成功获取用户信息的回调函数
success:(e)=>{
// 获取用户的头像，昵称
let {userInfo:{avatarUrl,nickName}} = e
// 更新页面渲染
this.setData({
avatarUrl:avatarUrl,
nickName:nickName,
isLogin:true
})
// 将头像和昵称保存到缓存中
wx.setStorageSync('avatarUrl', avatarUrl)
wx.setStorageSync('nickName', nickName)
}
})
},
//退出登录方法
exit(){
// 清空缓存数据
wx.clearStorageSync()
this.setData({
avatarUrl:'',
nickName:'',
isLogin:false
})
},
onLoad: function () {
//判断缓存中有没有用户昵称，如果有，就表示该用户已经登录过
if(wx.getStorageSync('nickName')){
this.setData({
isLogin:true,
nickName:wx.getStorageSync('nickName'),
avatarUrl:wx.getStorageSync('avatarUrl')
})
}
}
})
4、功能效果
登录界面
点击登录按钮，出现获取当前微信用户信息
选择允许，成功登录小程序。并且将头像和昵称保存到缓存中。
点击头像，清除缓存，退出登录。
二、 wx.scanCode 扫码
调起客户端扫码界面进行扫码。
1、页面wxml文件
<view class="item">
<input class="txt" value="{{result}}" disabled />
<van-icon class="icon" name="scan" bindtap="scanCode" />
</view>
2、页面wxss文件
.item{
padding: 10rpx;
display: flex;
align-items: center;
}
.item .txt{
flex: 1;
border-bottom: 1px solid #eee;
}
.item .icon{
font-size: 40rpx;
margin-left: 10rpx;
}
3、页面js文件
Page({
data: {
//扫描二维码的结果
result:''
},
//扫一扫
scanCode(){
wx.scanCode({
success:(e)=>{
let {result} = e
this.setData({
result
})
}
})
}
})
4、功能效果
点击扫码图标，从相册中选择二维码图片
将二维码的扫描结果显示
三、 wx.makePhoneCall 拨打电话
1、页面wxml文件
<view class="item">
<input class="txt" value="{{tel}}" disabled />
<van-icon class="icon" name="phone-o" bindtap="makePhoneCall" />
</view>
2、页面js文件
Page({
data: {
//手机号码
tel:'19912345678'
},
//打电话
makePhoneCall(){
wx.makePhoneCall({
phoneNumber:this.data.tel,
success:(e)=>{
console.log(e);
}
})
}
})
3、功能效果
点击拨打电话
四、 wx.getLocation 获取当前位置经纬度
1、页面wxml文件
<view class="item">
<input class="txt" value="{{location}}" disabled />
<van-icon class="icon" name="location-o" bindtap="getLocation" />
</view>
2、页面js文件
Page({
data: {
// 位置信息
location:''
},
// 获取位置
getLocation(){
// 获取当前位置的纬度和经度坐标
wx.getLocation({
success:(e)=>{
let {latitude,longitude} = e
this.setData({
location:'经度: '+longitude+'，纬度: '+latitude
})
}
})
},
})
3、app.json
在微信小程序开发中，获取用户所在地理位置，需要在app.json中声明permission字段。为开发者需要填写获取用户地理位置的用途说明。
"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
}
4、功能效果
点击获取地理位置
五、wx.chooseLocation 打开地图选择位置
1、页面wxml文件
<view class="item">
<input class="txt" value="{{location}}" disabled />
<van-icon class="icon" name="location-o" bindtap="chooseLocation" />
</view>
2、页面js文件
Page({
data: {
// 位置信息
location:''
},
// 打开地图选择位置
chooseLocation(){
wx.chooseLocation({
success:(e)=>{
// name位置名称；address详细地址
let {name,address} = e
this.setData({
location:name+': '+address
})
}
})
},
})
3、功能效果
点击选择位置，获取地址信息
六、wx.getBatteryInfoSync 获取设备电量
1、页面wxml文件
<view class="item">
<input class="txt" value="{{battery}}" disabled />
<van-icon class="icon" name="bar-chart-o" bindtap="getBatteryInfoSync" />
</view>
2、页面js文件
Page({
data: {
// 电量信息
battery:''
},
// 获取手机电量
getBatteryInfoSync(){
// 属性level表示设备电量，范围 1 - 100
// 属性isCharging表示是否正在充电中
let {level,isCharging} = wx.getBatteryInfoSync()
this.setData({
battery:'电量：'+level+'% '+(isCharging?'正在充电':'')
})
}
})
3、功能效果
点击获取电量，以及是否正在充电
七、wx.chooseContact 选择联系人
拉起手机通讯录，选择联系人。
1、页面wxml文件
<view class="item">
<input class="txt" value="{{contact}}" disabled />
<van-icon class="icon" name="contact" bindtap="chooseContact" />
</view>
2、页面js文件
Page({
data: {
},
//选择联系人
chooseContact(){
wx.chooseContact({
success:(e)=>{
console.log(e);
}
})
}
})
