小程序： 授权 （button微信开放能力）删除小程序

最新推荐文章于 2021-08-12 10:18:45 发布
最新推荐文章于 2021-08-12 10:18:45 发布
阅读量1.1k 收藏
点赞数 1
分类专栏： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36413371/article/details/109958279
版权

删除小程序： 授权,数据缓存,文件缓存,小程序登录状态会被删除
针对用户的授权： 中途关闭授权接着用,删除小程序重新授权（删除和关闭授权的属性值都不为true）

一： 查看用户授权情况

res.authSetting的值为
{scope.userLocation: true,
scope.userInfo: true,
scope.address: true,
scope.invoice: true,
scope.invoiceTitle: true}

—授权情况（比如查看userInfo的授权）

    wx.getSetting({
      success (res) {
        console.log(res.authSetting)
        console.log('userInfo授权结果(true/false)',res.authSetting['scope.userInfo'])
        if (res.authSetting['scope.userInfo']) {
        } else {
        }
      }
    })

二：open-type=“openSetting” 位置授权

调用 wx.getLocation(),会出现如下授权弹窗
在这里插入图片描述

1）当用户允许后，可以根据经纬度做一些处理（如：根据经纬度获取所在市）

wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的坐标，可传入'gcj02'
      altitude: false, //传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
      success: function (res) {
        console.log(res)
        var latitude = res.latitude; // 纬度，浮点数31.319608
        var longitude = res.longitude; // 经度，浮点数120.598736
        // that.globalData.latitude = latitude // app.js中记录经纬度
        // that.globalData.longitude = longitude
      },
      fail: (res) => {
        //未授权就弹出弹窗提示用户重新授权。。。。（相关逻辑）
        console.log('定位未授权')
      }
    })
  1. 当用户拒绝后，需要重新打开设置进行授权，如下
/components/popup.js
const app = getApp()

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    title: {            // 属性名
      type: String,     // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '标题'     // 属性初始值（可选），如果未指定则会根据类型选择一个
    },
    // 弹窗内容
    content: {
      type: String,
      value: '内容'
    },
    // 弹窗取消按钮文字
    btnNo: {
      type: String,
      value: '取消'
    },
    // 弹窗确认按钮文字
    btnOk: {
      type: String,
      value: '确定'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    flag: true,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    tapFn: function () {
      console.log('123')
      // 事件冒泡-点击开始授权触发
      this.setData({
        flag: !this.data.flag
      })
    },
    //隐藏弹框
    hidePopup: function () {
      this.setData({
        flag: !this.data.flag
      })
    },
    //展示弹框
    showPopup () {
      this.setData({
        flag: !this.data.flag
      })
    },
    /*
    * 内部私有方法建议以下划线开头
    * triggerEvent 用于触发事件
    */
    _error () {
      // 触发取消回调
      this.triggerEvent("error")
      this.setData({
        flag: false
      })
    },
    _success (e) {
      // 退出设置界面触发
      // console.log('success-打开了设置')
      let that = this
      console.log()
      let tmp = e.detail.authSetting["scope.userLocation"]
      // 打开授权,进行获取用户经纬度
      if (tmp) {
        that.triggerEvent("success", tmp)
        app.openLocationSetting(function (obj) { //  重新获取定位信息
          // console.log(obj)
          // that.triggerEvent("success", tmp)
        })
      } else {
        that.triggerEvent("success", tmp)
      }
    }
  }
})




// /components/popup.json
{
  "component": true,
  "usingComponents": {}
}


// /components/popup.wxml
<view class="wx-popup" hidden="{{flag}}">
  <view class='popup-container'>
    <!-- <view class="wx-popup-title">{{title}}</view> -->
    <view class="wx-popup-con">{{content}}</view>
    <view class="wx-popup-btn" bindtap="tapFn">
      <text class="btn-no" bindtap='_error'>{{btnNo}}</text>
      <view class="btn">
        <button class="btn-ok" style="border: 2rpx solid #ccc;" open-type="openSetting" type="default" plain="true" bindopensetting="_success">
          {{btnOk}}
        </button>
      </view>
    </view>
  </view>
</view>

// /components/popup.wxss
/* component/popup.wxss */
.wx-popup {
  position: absolute;
  left: 0;
  top: 0;

  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
}

.popup-container {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 80%;
  max-width: 600rpx;
  border: 2rpx solid #ccc;
  border-radius: 10rpx;
  box-sizing: bordre-box;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: #fff;
}

.wx-popup-title {
  width: 100%;
  padding: 20rpx;
  text-align: center;
  font-size: 40rpx;
  border-bottom: 2rpx solid red;
}

.wx-popup-con {
  margin: 60rpx 10rpx;
  text-align: center;
}

.wx-popup-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 40rpx;
}

.wx-popup-btn .btn-no {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 88rpx;
  border: 2rpx solid #ccc;
  border-radius: 88rpx;
}
.wx-popup-btn .btn{
  width: 30%;
}

.btn-ok::after {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.btn-ok{
  border-radius: 44rpx;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  display: flex;
  margin: 0;
  padding: 0;
  font-size: 40   rpx;
  justify-items: center;
  justify-content: center;
}
  1. 使用
// 1)引入 页面mine /pages/home/home.json
{
  "usingComponents": {
    "z-popup": "/components/popup/popup"
  },
}
// 2) 省略

// 3）使用组件 /pages/home/home.wxml
  <view class="btn" bindtap="handler">
                    <view class="position">
                        <text>当前位置</text>
                    </view>
                    <image class="custom-icon" src="https://ms.renyihotel.com/images/home/positioning.png" />
 </view>
 
<z-popup id="zPopup" title="biaoti" content="执行此功能小程序需要获取您的授权使用您的当前位置" btnNo="{{'暂不授权'}}" btnOk="{{'修改授权'}}"
    binderror="errorFn" bindsuccess="successFn" />
// 4） home.js初始化组件，接受成功或失败的回调，并判断用户授权情况做逻辑判断 app.js中wx.getLocation获取经纬度逻辑处理

// app.js
onLaunch: function () { // app.js中不存在onLoad钩子
    let that = this
    this.getLocation()
},

getLocation: function () {
    var that = this
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的坐标，可传入'gcj02'
      altitude: false, //传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
      success: function (res) {
        console.log(res)
        var latitude = res.latitude; // 纬度，浮点数
        var longitude = res.longitude; // 经度，浮点数
        that.globalData.latitude = latitude // app.js中记录经纬度
        that.globalData.longitude = longitude
        // 测试开始
        // 苏州的经纬度
        // 120.598736,31.319608
        // that.globalData.longitude = 120.598736
        // that.globalData.latitude = 31.319608
        // 测试结束
        console.log({ latitude, longitude })
        
        // 构建请求地址  范浩优选  TBDBZ-GSR6D-FQY4P-PXZU4-RH5S2-YGFJD  兴发 AKCBZ-SFZ35-AAUI5-QNS3S-R53PQ-2KFX3
        // var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + that.globalData.latitude + ',' +
          // that.globalData.longitude + "&key=" + 'TBDBZ-GSR6D-FQY4P-PXZU4-RH5S2-YGFJD' + "&get_poi=1";
       //  that.getAddressDetail(qqMapApi)
      },
      fail: (res) => {
        //未授权就弹出弹窗提示用户重新授权。。。。（相关逻辑）
        console.log('定位未授权')
      }
    });
  }
// pages/home/home.js
  onReady: function () {
    // 获得popup组件
    this.popup = this.selectComponent("#zPopup")
  },
handler: function (e) {
    // 1.先判断有没有授权,且经纬度不为空
    let that = this
    wx.getSetting({
      success (res) {
        // console.log(res)
        if (res.authSetting['scope.userLocation'] && app.globalData.latitude && app.globalData.longitude) {
          console.log('有经纬度数据', app.globalData.latitude, app.globalData.longitude)
          app.getAddressDetail()
          // 后台拿到经纬度后，进行获取推荐的房源
        } else {
          that.popup.showPopup()
        }
        // res.authSetting['scope.userLocation']
      }
    })
    // 打开设置之后触发,用户设置了后就会拿到设置的结果
  }

–获取定位信息按钮
在这里插入图片描述

–打开设置的button伪装弹窗

在这里插入图片描述

三： open-type=“getUserInfo” 获取用户信息

必须用户手动点击buttton按钮打开授权弹窗, 后续可以用wx.getUserInfo()获取最新的用户信息

1）展示登录按钮
在这里插入图片描述
无论用户有没有拒绝，每次点击都是打开授权弹窗界面
在这里插入图片描述

/pages/mine/mine.wxml
  <view class="header" wx:if="{{sexFlag}}">
		。。。
  </view>
<view>
<button class="btn" open-type="getUserInfo" bindgetuserinfo="userSuccess">
  注册/登录
</button>
</view>

/pages/mine/mine.wxss
.btn {
  margin: 0;
  height: 90rpx;
  background: linear-gradient(270deg, #FDCA99 0%, #FFFFFF 100%, #FFFFFF 100%);
  border-radius: 45rpx;
  text-align: center;
  line-height: 90rpx;
  color: #212129;
  font-size: 40rpx;
  padding: 0;
  width: 280rpx!important;
}

/pages/mine/mine.js
  userSuccess: function (e) {
    console.log(e)
    // console.log(123)
    if (e.detail.errMsg === 'getUserInfo:ok') {
      // 成功了授权
      // 发请求获取用户信息，展示用户信息
      console.log('返回的信息',e.detail)
      // e.detail.userInfo.gender
      this.setData({
        sexFlag: true
      })
      
    }else{
      // 用户拒绝授权，依旧可以打开button授权
    }
  },

2 ）此时就可以在onReady进行逻辑处理展示不同的登录状态页面

  onReady: function () {
    let that = this
    // 获取用户授权信息
    wx.getSetting({
      success (res) {
        console.log(res.authSetting)
        console.log(res.authSetting['scope.userInfo'])
        if (res.authSetting['scope.userInfo']) {
          // 第一次是undefined; (没有点击关闭小程序依旧是undefined) (点击 拒绝后是false 允许后是true )  
          that.setData({
            sexFlag: true
          })
          // 这里可以获取到用户信息
          wx.getUserInfo({
            success: function (res) {
              console.log(res)
              var userInfo = res.userInfo
              var nickName = userInfo.nickName
              var avatarUrl = userInfo.avatarUrl
              var gender = userInfo.gender //性别 0：未知、1：男、2：女
              var province = userInfo.province
              var city = userInfo.city
              var country = userInfo.country
            }
          })
        } else {
          that.setData({
            isAuth: false
          })
        }
      }
    })
 })

2 )

wx.getLocation() 可以调起授权弹窗（只会触发一次）
在这里插入图片描述

getLocation: function () {
    var that = this
    wx.getLocation({
      type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的坐标，可传入'gcj02'
      altitude: false, //传入 true 会返回高度信息，由于获取高度需要较高精确度，会减慢接口返回速度
      success: function (res) {
        console.log(res)
        var latitude = res.latitude; // 纬度，浮点数
        var longitude = res.longitude; // 经度，浮点数
        that.globalData.latitude = latitude // app.js中记录经纬度
        that.globalData.longitude = longitude
        // 测试开始
        // 苏州的经纬度
        // 120.598736,31.319608
        // that.globalData.longitude = 120.598736
        // that.globalData.latitude = 31.319608
        // 测试结束
        console.log({ latitude, longitude })
        // 构建请求地址  范浩优选  TBDBZ-GSR6D-FQY4P-PXZU4-RH5S2-YGFJD  兴发 AKCBZ-SFZ35-AAUI5-QNS3S-R53PQ-2KFX3
        var qqMapApi = 'https://apis.map.qq.com/ws/geocoder/v1/' + "?location=" + that.globalData.latitude + ',' +
          that.globalData.longitude + "&key=" + 'TBDBZ-GSR6D-FQY4P-PXZU4-RH5S2-YGFJD' + "&get_poi=1";
        that.getAddressDetail(qqMapApi)
      },
      fail: (res) => {
        //未授权就弹出弹窗提示用户重新授权。。。。（相关逻辑）
        console.log('定位未授权')
      }
    });
  }

在这里插入图片描述

四： open-type=“contact” 打开客服消息

五： open-type=“getPhoneNumber” 获取微信手机号
链接

六： open-type=“share” 用户转发

七： 推动订阅授权 wx.requestSubscribeMessage

小程序： wx.requestSubscribeMessage
服务端（发送小程序公众号服务消息）： https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/uniform-message/uniformMessage.send.html
调用示例1
https://www.cnblogs.com/wangxiaomei/p/10488069.html
调用实例2
https://www.jb51.net/article/168592.htm
调用实例3（最全版本）
https://blog.csdn.net/woqianduo/article/details/80947028

小强有个dream
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何取消对微信小程序的授权
PromiseCao的博客
12-05 5887
小程序发布体验版本之后经常要验证授权登录流程，这就需要经常清理用户授权 清理教程见百度经验: https://jingyan.baidu.com/article/4f34706e1f6454e386b56d56.html
uniapp小程序订阅消息
qq_45164516的博客
07-12 791
uniapp小程序订阅消息
小程序系列（二）——授权相关及实例（语音识别）
宝贝QY的博客
07-02 1555
小程序授权相关内容讲解
微信小程序获取地理位置
l_yilan的博客
08-12 3741
微信小程序获取地理位置 微信小程序开发中选择地理位置，就需要通过官方文档API去判断用户是否授权地理位置，用户开启授权后可直接获取地理位置，否则需要用户手动开启授权。下面是获取地理位置的相关方法： //先判断用户是否授权获取地理位置 let that = this; wx.getSetting({ success(res) { if (res.authSetting['scope.userLocation'] == false) {//如果没有授权地理位置
微信小程序通讯地址授权拒绝后的处理方式
StruggleRookie的博客
12-04 1万+
微信小程序通讯地址授权拒绝后的处理方式
微信小程序 实例汇总 完整项目源代码
11-01
4. **API调用**：微信小程序提供了丰富的API接口，如网络请求、地图、位置、媒体、文件、用户授权等，开发者可以利用这些API实现各种功能。 5. **组件化开发**：小程序支持组件化开发，如view、button、image、...
微信小程序：button组件的边框设置
03-29
button的边框是用:after方式实现的，用户如果在button上定义边框会出现两条线，需用:after的方式去覆盖默认值。如果设置了Button的背景色，没有用:after设置边框的颜色，则button的四个角会出现模糊的尖角。如下图所...
uni-app微信小程序登录授权的实现
11-20
微信小程序授权是非常简单和常用的功能，但为了方便，还是在此记录一下要点： 首先是需要用到一个授权按钮来触发获取用户信息授权： 关键在于 open-type 为 getUserInfo , 然后有个@getuserinfo的事件，把获取授权...
微信小程序 button 的样式设置为图片的方法
10-15
主要介绍了微信小程序 button 的样式设置为图片的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
微信小程序源码大全（130个）
04-21
3. **组件化开发**：微信小程序提供了丰富的内置组件，如view、button、image等，开发者可以基于这些组件构建复杂的用户界面。此外，还可以自定义组件以满足特定需求。 4. **网络请求**：使用wx.request方法进行...
微信小程序授权获取用户详细信息openid
热门推荐
学习-记录笔记-积累
09-15 18万+
小程序获取用户的头像昵称openid之类 第一种使用wx.getUserInfo直接获取微信头像，昵称 wx.getUserInfo({ success: function (res) { that.setData({ nickName: res.userInfo.nickName, avatarUrl: res....
微信小程序获取经纬度，当前定位
weixin_46337813的博客
10-26 1843
微信小程序获取地理位置授权，首先需要在app.json中添加配置： "permission": { "scope.userLocation": { "desc": "我们将获取你的位置" } } 获取经纬度：如果手机未开启位置信息，那么授权成功后在wx.getLocation()方法中也会一直失败，所以需要在fail方法中提示用户开启手机位置信息 getUserLocation: function () { let vm = this wx.getSetting({...
微信小程序 总结
ljmkmnkl的博客
07-25 1380
微信小程序数组添加： 使用push进行数组添加会报错：经测试  concat ：链接一个或多个字符串/数组 var array=array1.concat(array2,array3);  //生成一个新的数组
小程序定位显示
weixin_42340514的博客
11-02 1358
1.微信提供了wx.getLocation的方法可以获取到经纬度信息。在使用这个 API 之前需要首先设置用户授权. 2.用户有可能在进入小程序的时候关闭了获取位置的权限， 当需要获取位置的时候要重新判断是否拥有权限。 如果没有权限需要再次提醒用户授权. 第一步我们需要在app.json文件中首先配置地理位置用途说明 "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序位置接口的效...
微信小程序 openSetting:fail 此接口已废弃,请使用 OpenSetting 组件
那年夏天
01-28 3900
微信小程序，在用户拒绝授权后，重新拉起授权 ，之前可以使用wx.openSetting接口来设置，但是现在这个接口已经废弃使用了。 方法1：使用 button 组件来使用此功能： <button open-type="openSetting" bindopensetting="handler">打开设置页</button> 方法2：由点击...
小程序登录&授权&获取用户信息
只是一只程序媛
01-16 16万+
一  登录 时序图如下： wx.login() 获取js_code 示例代码： App({   onLaunch: function() {     wx.login({       success: function(res) {         if (res.code) {           //TODO         } else {    
微信小程序保存图片到相册授权被拒绝后重新拉取授权wx.opensetting的使用方法
Charles_Tian的博客
07-07 2万+
近期开发过小程序的童鞋应该已经知道，小程序某些接口已废弃，改用新的接口。比如wx.getUserInfo()、wx.authorize()、wx.openSetting()等都将废弃，拉起不了用户授权界面。而它们被统一集成在button组件里的一个open-type属性里面，也就是说，小程序为了更好的保护用户隐私，大部分涉及到授权的问题，都需要引导用户主动去授权，而不是强制被授权。下面就主要来讲怎...
小程序文档整理之 -- API（开放接口）
bobobocai的博客
08-28 3万+
登录wx.login(OBJECT)调用接口获取登录凭证（code）进而换取用户登录态信息，包括用户的唯一标识（openid） 及本次登录的 会话密钥（session_key）等。用户数据的加解密通讯需要依赖会话密钥完成。注：调用 login 会引起登录态的刷新，之前的 sessionKey 可能会失效。 wx.login({ success: function(res) {
小程序用wx.openSetting让用户重新授权，用户之前拒绝授权怎么办？
11-08 1万+
一、 小程序用户重新授权案例 做连锁店小程序开发时， 需要用户授权， 获得用户的经纬度坐标， 来确定哪个店面离用户最近， 方便用户导航或者向用户送货之类的功能。   像这种需要用户授权后才能使用某项功能， 在小程序开发中是经常遇到的， 类似经常用到的还有用户信息授权，图片或视频保存到相册授权。 小程序openSetting授权
前端学习笔记-微信小程序学习笔记
最新发布
01-09
本篇前端学习笔记主要聚焦于微信小程序的开发，深入讲解了小程序页面的构建、配置文件的作用以及代码构成。首先，我们了解到小程序页面由JSON配置文件来定义，如app.json、project.config.json和sitemap.json，它们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值