Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >小程序没有授权时的处理方法

小程序没有授权时的处理方法

作者头像
NanBox
发布于 2019-07-09 12:26:42
发布于 2019-07-09 12:26:42
2.8K00
代码可运行
举报
文章被收录于专栏:NanBoxNanBox
运行总次数:0
代码可运行

在做小程序开发的时候,我们经常会需要获取用户的一些权限。比如获取用户信息用于直接登录,获取地理位置用于定位等。但要是用户拒绝授权了,该怎么处理呢?

问题分析

小程序里面,获取到用户权限是进行某些操作的必要前提。比如在进入小程序的时候,获取到用户信息,拿到 unionId 对应到自己平台的账号进行登录,免去用户自己输入账号密码,这就是一个不错的体验。

当我们调用 wx.getUserInfo 或者 wx.getLocation 这种需要用户授权的 API 时,小程序会弹框让用户选择授权:

当用户选择允许后,下次再进入小程序就不会再询问了,直接获得用户授权(除非将小程序删了再进入)。这里的问题在于,当用户点了拒绝之后,就拿不到相关授权了,并且在一段时间内,进入小程序都不会再出现这个弹框。

从用户体验及保护隐私的角度考虑,小程序最好是不用授权也可以使用(或者体验)。但有些类型的小程序确实是需要拿到用户信息才能使用的。这里提供一个简单的解决方案。

解决方案

以获取用户信息直接登录为例。增加一个授权页面,作为进入小程序的第一个页面,在这里获取用户数据和登录。默认可以什么都不显示,也可以当做引导页来使用。

获取用户信息需要用到 wx.login 和 wx.getUserInfo 两个 API,关于这两个 API 的具体信息大家可以到官方文档去查看。

增加一个登陆方法,代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//登录
login: function () {
  var that = this
  if (typeof success == "function") {
    this.data.getUserInfoSuccess = success
  }
  wx.login({
    success: function (res) {
      var code = res.code;
      wx.getUserInfo({
        success: function (res) {
          //平台登录
        },
        fail: function (res) {
          that.setData({
            getUserInfoFail: true
          })
        }
      })
    }
  })
}复制代码

当上面代码走到了 fail 里面,就可以认为在获取授权的时候,用户点了拒绝。当 getUserInfoFail 为 true 的时候,可以展示一个获取授权的按钮,比如像这样:

接下来介绍另一个 API : wx.openSetting,使用 wx.openSetting 可以跳转到小程序的授权设置界面,在安卓里面它长这样:

在点击授权按钮后跳转到这里,让用户授权了才给进入首页,否则就停留在授权页面。

但还有个小问题,这个 API 是基础库 1.1.0 才有的,所以需要做兼容处理:

所以,最终跳转授权的代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//跳转设置页面授权
openSetting: function () {
  var that = this
  if (wx.openSetting) {
    wx.openSetting({
      success: function (res) {
        //尝试再次登录
        that.login()
      }
    })
  } else {
    wx.showModal({
      title: '授权提示',
      content: '小程序需要您的微信授权才能使用哦~ 错过授权页面的处理方法:删除小程序->重新搜索进入->点击授权按钮'
    })
  }
}复制代码

还好 1.1.0 已结算是比较早的版本了,现在都出到 1.3.0 了。

最终效果如下:

同样的处理方式也可以用在获取别的权限上,妥妥的。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年06月24日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
react 学习:React属性 数组遍历、css引入
一:index.js 里直接引入css。 import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; // import Welcome from './Welcome'; import * as serviceWorker from './serviceWorker'; import 'bootstrap/dist/css/bootstrap.
爱明依
2019/04/22
1.1K0
react 学习:React属性 数组遍历、css引入
[Next] 初见next.js
  Next.js 可与 Windows,Mac 和 Linux 一起使用.您只需要在系统上安装 Node.js 即可开始构建 Next.js 应用程序.如果有个编辑器就更好了
不会飞的小鸟
2019/10/01
5.3K0
[Next] 初见next.js
Next.js入门教程 原
参考代码:https://github.com/chkui/nextjs-getting-started 。
随风溜达的向日葵
2018/12/07
6K0
react新手教程
github仓库 https://github.com/Rynxiao/react-newer JSX语法 const element = <h1>Hello, world!</h1>; This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe w
糊糊糊糊糊了
2018/05/09
2.1K0
Next.js 入门
当使用 React 开发系统的时候,常常需要配置很多繁琐的参数,如 Webpack 配置、Router 配置和服务器配置等。如果需要做 SEO,要考虑的事情就更多了,怎么让服务端渲染和客户端渲染保持一致是一件很麻烦的事情,需要引入很多第三方库。针对这些问题,Next.js提供了一个很好的解决方案,使开发人员可以将精力放在业务上,从繁琐的配置中解放出来。下面我们一起来看看它的一些特性。
Dickensl
2022/06/14
6.7K0
Next.js 入门
js汇率计算器系统
css逻辑: 第一步:先清除掉系统默认的元素的padding与margin值. 第二步;定义css变量
贵哥的编程之路
2020/10/28
5.8K0
js汇率计算器系统
【尚筹网】四、管理员登录
用户11332765
2024/11/26
930
【尚筹网】四、管理员登录
分享 7 个你可能不知道的 Next.js 14 小技巧
今天,我将向大家介绍一些关于NextJS的概念,这些可能是许多开发者所不知道的。你可以利用这些概念来优化你的应用,并改善开发者体验。
前端达人
2024/02/01
9470
分享 7 个你可能不知道的 Next.js 14 小技巧
万字长文助你搞懂现代网页开发中常见的10种渲染模式
近年来,网络开发的迅速演变,尤其是在前端开发领域。这种转变主要归功于无数涌现的框架和技术,它们旨在简化和增强构建引人入胜的用户界面的过程。然而,由于现有框架的丰富多样以及不断涌现的新框架,跟上前端趋势已成为一项艰巨的任务。对于新手来说,很容易感到不知所措,仿佛迷失在广阔的选择海洋中。
前端达人
2023/10/25
5310
万字长文助你搞懂现代网页开发中常见的10种渲染模式
Next.js的创建与使用
NextJs是React的服务器渲染框架,区别于官方SSRNext最大的特点是可以渲染出Ajax异步请求渲染出来的结果,本网站目前使用的前端框架就是NextJs
用户6256742
2022/07/06
4.2K0
Next.js的创建与使用
动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)
大家好,在《动手练一练,使用 React 和 Next.js 做一个简单的博客网站(上)》一篇文章里,我们一起了解了什么是 Next.js,并手工创建了一个简单的 Next.js 项目,学会了如何基于模板创建简单的页面,本篇文章,我们继续完善这个案例。
前端达人
2021/04/11
1.8K0
动手练一练,使用 React 和 Next.js 做一个简单的博客网站(中)
构建通用的 React 和 Node 应用
原文:Build a universal React and Node App 演示:https://judo-heroes.herokuapp.com/ 译者:nzbin 译者的话:这是一篇非常优秀的 React 教程,该文对 React 组件、React Router 以及 Node 做了很好的梳理。我是 9 月份读的该文章,当时跟着教程做了一遍,收获很大。但是由于时间原因,直到现在才与大家分享,幸好赶在年底之前完成了译文,否则一定会成为 2016 年的小遗憾。翻译仓促,其中还有个别不通顺的地方,望见谅
叙帝利
2018/01/17
9K0
构建通用的 React 和 Node 应用
React学习笔记(二)—— JSX、组件与生命周期
JSX = JavaScript XML,这是React官方发明的一种JS语法(糖)
张果
2023/03/01
6.1K0
React学习笔记(二)—— JSX、组件与生命周期
Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP
本文完整版:《Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP》
蒋川@卡拉云
2022/05/30
1.7K0
Vue3 Typescript + Axios 全栈开发教程:手把手教你写「待办清单」APP
SSR服务器端渲染(Next.js总结和豆瓣电影项目)「建议收藏」
先解释一下Nuxt.js和Next.js虽然只有一个字母之差,但它们是不同的两个服务端渲染框架.
全栈程序员站长
2022/11/15
2.3K0
bootstrap教程,SQL
DDL数据定义语言 TPL事务处理语言 DCL数据控制语言 DML数据操作语言
达达前端
2019/07/03
9630
bootstrap教程,SQL
react进阶用法完全指南
React调用回调函数,正确设置this指向的三种方法 通过bind this.increment = this.increment.bind(this); 通过箭头函数 <button onClick={this.multi}>点我*10</button> multi = () => { this.setState({ count: this.state.count * 10 }) } 箭头函数包裹 <button onClick={() => {this.muti2(
xiaofeng123aa
2022/09/26
6.1K0
React 路由详解(超详细详解)
使用 Link 是会有一些问题的, 他不会显示按钮的高亮显示, 所以我使用 NavLink 来替代它
全栈程序员站长
2022/08/10
6K0
React 路由详解(超详细详解)
forex-python,一个强大的 Python 库!
大家好,今天为大家分享一个强大的 Python 库 - forex-python。
sergiojune
2024/05/30
5851
forex-python,一个强大的 Python 库!
react hook+ts+rouerV6 dev notes
 组件“/machine”为已经定义好的路由,state负责传值state:{参数:值}
biaoblog.cn 个人博客
2022/08/11
2.5K0
react hook+ts+rouerV6 dev notes
相关推荐
react 学习:React属性 数组遍历、css引入
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验