微信小程序小tip(一) --- 获取权限完整过程

本文详细介绍了小程序中用户权限的管理方式,包括获取权限状态、处理用户授权拒绝及重新请求授权的流程。通过优化代码结构,使用async/await简化了复杂的回调逻辑,提高了代码的可读性和维护性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

参考 黑马 的教学视频

一、获取权限

获取权限,有三种情况

1、用户从来没有获取过,所以这个的权限 scope = undefined

2、用户获取过,同意了,权限 scope = true

3、用户拒绝了,scope = false

4、当用户拒绝了,便无法再为这个权限使用

解决方法:

1、诱导用户 自己 打开 授权设置页面(wx.openSetting)

以下以获取用户地址为例

原生版本

获取 用户 对小程序 所授予 获取地址的 权限 状态 scope

  1. 假设 用户 点击获取收货地址的提示框 确定 authSetting scope.address scope 值 true 直接调用 获取收货地址

  2. 假设 用户 从来没有调用过 收货地址的api

    scope undefined 直接调用 获取收货地址

  3. 假设 用户 点击获取收货地址的提示框 取消

    scope 值 false

3-1 诱导用户 自己 打开 授权设置页面(wx.openSetting) 当用户重新给与 获取地址权限的时候

3-2  获取收货地址

3-3 把获取到的收货地址 存入到 本地存储中 
// 2 获取 用户 对小程序 所授予 获取地址的  
 wx.getSetting({
   success: (result)=>{
    // 权限 状态 scope
    const scopeAddress = result.authSetting["scope.address
    //   1 假设 用户 点击获取收货地址的提示框 确定  authSetting scope.address 
    //     scope 值 true 直接调用 获取收货地址
    //   2 假设 用户 从来没有调用过 收货地址的api 
    //     scope undefined 直接调用 获取收货地址
    if(scopeAddress === true || scopeAddress === undefined) {
      wx.chooseAddress({
        success: (result1)=>{
          console.log(result1)
        }
      });
    }else {
      //   3 假设 用户 点击获取收货地址的提示框 取消   
      //     scope 值 false 
      //     1 诱导用户 自己 打开 授权设置页面(wx.openSetting) 当用户重新给与 获取地址权限的时候 
      //     2 获取收货地址
      wx.openSetting({
        success: (result2)=>{
          //   4 把获取到的收货地址 存入到 本地存储中 
          wx.chooseAddress({
            success: (result3)=>{
              console.log(result3)
            }
          });
        }
      });
    }
  }
});

优化版本

新添加一个js文件,使用async,await 优化回调地狱

/**
 * primise 形式 getSetting
 */
export const getSetting = () => {
  return new Promise((resolve, reject) => {
    wx.getSetting({
      success: (result)=>{
        resolve(result);
      },
      fail: (err)=>{
        reject(err);
      },
      complete: ()=>{}
    });
  })
}

/**
 * primise 形式 chooseAddress
 */
export const chooseAddress = () => {
  return new Promise((resolve, reject) => {
    wx.chooseAddress({
      success: (result)=>{
        resolve(result);
      },
      fail: (err)=>{
        reject(err);
      },
      complete: ()=>{}
    });
  })
}

/**
 * primise 形式 openSetting
 */
export const openSetting = () => {
  return new Promise((resolve, reject) => {
    wx.openSetting({
      success: (result)=>{
        resolve(result);
      },
      fail: (err)=>{
        reject(err);
      },
      complete: ()=>{}
    });
  })
}
//  引入简化的 promise
import { getSetting, chooseAddress, openSetting } from "../../utils/asyncWx.js";
// 引入es7语法解析
import regeneratorRuntime from "../../lib/runtime/runtime";

// 简化的操作
try {
  // 1 获取 权限状态
  const res1 = await getSetting()
  const scopeAddress = res1.authSetting["scope.address"];
  // 2 判断 权限状态
  if (scopeAddress === false)
    // 3 打开授权设置页面
    await openSetting
  // 4 调用获取收货地址的 api
  const res2 = await chooseAddress();
  console.log(re
  // 5 把获取到的收货地址 存入到 本地存储中 
  wx.setStorageSync("address", res
} catch (err) {
  console.log(err)
}
### 开发微信小程序实现猜数字游戏 #### 游戏概述 为了创建个基于微信小程序平台的简单猜数字游戏,开发者可以通过微信官方提供的开发工具完成整个过程。该游戏的核心机制在于服务器端生成个介于0到100之间的随机整数作为目标值,玩家则通过界面上的个输入框猜测该数值并提交自己的答案[^1]。 #### 技术准备 在着手编写代码前,确保已经安装好最新版本的微信开发者工具,并注册成为微信公众平台成员以获得必要的权限和支持资源。此外,熟悉JavaScript、WXML(WeChat XML)、WXSS(WeChat CSS)以及JSON配置文件对于顺利构建应用至关重要。 #### 功能模块解析 ##### 页面布局与交互设计 利用WXML定义UI结构,包括但不限于标题栏、输入区域、按钮控件及反馈消息显示区等基本组件;采用WXSS样式表美化前端展示效果,使得用户体验更为友好直观[^2]。 ##### 数据处理逻辑 核心业务流程围绕着以下几个方面展开: - **初始化阶段**:启动时调用`Math.random()`函数配合取模运算产生指定范围内的伪随机数保存至全局变量中充当待猜谜底; - **事件响应机制**:监听用户按键动作触发相应的JS方法执行验证操作——对比当前轮次内所接收的数据项同预设标准答案间的关系差异程度进而决定下步骤走向; - **计分统计体系**:每当参与者发起轮新的尝试后即更新内部维护的历史记录列表长度直至达到上限为止;与此同时依据实际情况调整剩余可用次数提醒文字内容; - **胜利条件判定**:旦发现二者完全吻合立即终止循环播放庆祝动画同时提供选项允许重新开局继续挑战更高难度等级的任务。 - **失败情形应对策略**:当超出限定额度仍未能找出确切解法的情况下给予适当提示告知正确结果以便学习借鉴经验教训[^3]。 #### 关键代码片段示例 以下是部分重要环节对应的源码示意: ```javascript // app.js 或 page.js 中的部分代码 Page({ data: { answer: Math.floor(Math.random() * 101), // 随机产生的正确答案 count: 8, // 总共八次机会 tip: '', // 提示信息 isGameStart: true // 是否处于游戏中状态 }, onLoad(options) {}, onReady() {}, onSubmit(event) { const guess = parseInt(event.detail.value); if (this.data.count === 0 || this.data.isGameStart === false){ wx.showToast({title:'已无剩余次数',icon:'none'}); return; } let newTip; if(guess > this.data.answer){ newTip='太大啦'; }else if(guess < this.data.answer){ newTip='太小咯'; }else{ newTip='恭喜你赢了!'; this.setData({isGameStart:false}); } this.setData({ tip:newTip, count:this.data.count - 1 }); }, showAnswer(){ wx.showModal({ title:"正确答案", content:`是${this.data.answer}`, success(res){ if(res.confirm){ console.log('用户点击确定'); } } }) } }) ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值