一、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);
      }
    })
  }
})