小程序获取地址、客服聊天、用户授权

小程序获取地址有两种方式:1.引入第三方地图(腾讯地图)等 。2.小程序提供的获取地址api

这里我是用到第二种:

代码:

wx.getLocation({
      type: "wgs84",
      success(res) {
        wx.chooseLocation({
            latitude: res.latitude,
            longitude: res.longitude,
            success: (data)=>{
              var address = list
              that.setData({
                [address]:data.address
              })
            }
        })
      },
      complete:data =>{
        console.log(data)
      }
    })

app.json中配置这个,用户询问是否获取地理位置,这里前提是要有用户的授权信息先。

"permission": {

    "scope.userLocation": {

      "desc": "你的位置信息将用于小程序位置接口的效果展示" 

    }

  },

 

 

2.客服聊天

 这里需要在开发者里面配置关联的公众号 。

https://developers.weixin.qq.com/miniprogram/dev/component/button.html 官方文档提到 open-type="contact"

<button class="mgl-20 hiddenButton" open-type="contact">联系客服</button>

这样只有点击后,会触发当前小程序关联的公众号,客服只需要在公众号进行回复即可

 

3.用户授权

(1)重写一个授权界面

<view class="auth">
  <image src="https://res.wx.qq.com/wxopenres/htmledition/images/favicon32f740.ico" class="img" mode="aspectFill"></image>
  <view class="title">微信授权页面</view>
  <view class="describe">此页面是微信授权页面,点击下方按钮弹出授权或跳转页面</view>
  <button class="btn" open-type='getUserInfo' wx:if="{{canIUse}}" bindgetuserinfo='onAuth'>点击微信授权</button>
  <navigator wx:if="{{!canIUse}}" class="btn" url="/pages/auth/auth" open-type="reLaunch" hover-class="other-navigator-hover">已经授权点击调转</navigator>
</view>

/* pages/auth/auth.wxss *//* 开始 */
page {
  height: 100%;
  display: table;
}
 
.auth {
  margin-top: 0;
  text-align: center;
  display: table-cell;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  padding: 100rpx;
  vertical-align: middle;
}
 
.img {
  border-radius: 50%;
  border: 1px solid #fff;
  background-color: #fff;
  margin: 0 0 60rpx;
  display: inline-block;
  width: 200rpx;
  height: 200rpx;
  line-height: 0;
}
 
.title {
  display: inline-block;
  width: 100%;
  margin: 0 0 60rpx;
}
 
.describe {
  color: #a7aaa9;
  font-size: 26rpx;
  margin: 0 0 60rpx;
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  width: 100%;
}
 
.btn {
  padding: 0 60rpx;
  background-color: #19be6b;
  margin: 20rpx 0 200rpx;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  white-space: nowrap;
  user-select: none;
  font-size: 14px;
  border: 0 !important;
  position: relative;
  text-decoration: none;
  height: 44px;
  line-height: 44px;
  box-shadow: inset 0 0 0 1px #19be6b;  
  background: #fff !important;
  color: #19be6b !important;
  display: inline-block;
  border-radius: 10rpx;
}
// pages/auth/auth.js
var app = getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    code:'',
    pid: 0,
    url: "../index/index",
    productId: 0,
    ishow: 0,
    decodeStr: '',
    decoUrl: '', //解密URL
    pkid: '', //会员id
    productpkid: '', //产品ID
    bulkID: '', //是要扫码进入到片装区的参数
    bulkstoreID: '', //这个是门店id(是要扫码进入到片装区的)
    SaleMethod: '', //代表是线上还是线下的字段(是要扫码进入到片装区的)
  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
        that.setData({code:res.code})
        var code = res.code
        wx.getSetting({
          success(res) {
            if (res.authSetting['scope.userInfo']) {
              that.setData({
                ishow: 0
              })
              that.setData({
                code:code
              })
            } else {
              that.setData({
                ishow: 1
              })
            }
          }
        })
      }
    })
  },
  
 //  点击过后,授权,在不清除缓存的情况下依然可以调用的方法
 onAuth: function(code) {
  var that = this
  var code = that.data.code
  wx.getUserInfo({
    lang: 'zh_CN',
    success: res => {
      var encryptedData = res.encryptedData;
      var iv = res.iv;
      that.setData({
        isUserid: 1,
        ishow: 0
      })
      wx.showLoading({
        title: '登录中',
      })

      //  这个是一般的登录
      wx.request({
        url: app.globalData.baseUrl + '/user/decodeUserInfo',
        data: {
          code: code,
          encryptedData: encryptedData,
          iv: iv,
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        method: "POST",
        success: function(res) {

          if (res.data.status) {
            var userInfo = wx.getStorageSync('userInfo') || []
            userInfo = res.data.data.wxUser
            var userToken = res.data.data.token
            wx.setStorageSync('userInfo', userInfo)
            wx.setStorageSync('userToken', userToken)
            wx.reLaunch({
              url: '/pages/order/order',
            })

          } else {
            wx.showToast({
              title: '登录失败',
              icon: 'none'
            })
          }
        },
        fail: function(res) {

        }
      })
    }
  })
},


})

(2)调用小程序api进行授权。官方提供open-type="getUserInfo" 去触发授权

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" class="hideBtn"><image src="{{userImg}}"/></button>
bindGetUserInfo:function(e){
    if(wx.getStorageSync('userInfo')){return}
    var that = this;
    var encryptedData = e.detail.encryptedData;
    var iv = e.detail.iv;
    var code = that.data.code
    wx.showLoading({
      title: '登录中',
    })
    wx.request({
      url: app.globalData.baseUrl + '/user/decodeUserInfo',
      data: {
        code: code,
        encryptedData: encryptedData,
        iv: iv,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded' // 默认值
      },
      method: "POST",
      success: function(res) {
        wx.hideLoading()
        if (res.data.status == 200) {
          var userInfo = wx.getStorageSync('userInfo') || []
          userInfo = res.data.data.wxUser
          var userToken = res.data.data.token
          wx.setStorageSync('userInfo', userInfo)
          wx.setStorageSync('userToken', userToken)
          that.setData({
            userName:userInfo.nickName,
            userImg:userInfo.avatarUrl
          })
          // wx.reLaunch({
          //   url: '/pages/order/order',
          // })
        } else {
          wx.showToast({
            title: '登录失败',
            icon: 'none'
          })
        }
      },
      fail: function(res) {

      }
    })  
          
  },

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值