uniapp 授权登录及页面跳转

uniapp 授权登录

主要介绍了uniapp授权的几种方式，分别为临时登录授权、手机号授权、用户信息授权

1. 微信登录授权

微信小程序的登录逻辑发生了变化，要求开发者使用静默登录，即在用户无感知的情况下进行登录操作，不需要弹出授权窗口了。

如下所示，获取微信的临时登录凭证 code，不会弹出授权窗口了。

uni.getProvider({
  // 类型为oauth，用于获取第三方登录提供商
  service: "oauth",
  success: (res) => {
    // 输出支持的第三方登录提供商列表
    if (~res.provider.indexOf("weixin")) {
      // 发起登录请求，获取临时登录凭证 code
      uni.login({
        // 登录提供商，如微信
        provider: "weixin",
        success: (loginRes) => {
          // 获取用户登录凭证
          this.handleLogin(loginRes.code);
        },
      });
    }
  },
});

2. 微信手机号授权

对于一般的用户信息，如头像、昵称等，被视为非敏感信息，以静默登录的方式进行获取。而用户的手机号等敏感信息，是需要授权的，可以通过 open-type="getPhoneNumber"属性来触发获取手机号码的授权弹框。

getPhoneNumber：获取用户手机号，可以从@getphonenumber 回调中获取到用户信息，该接口一直会弹出授权弹框，具体可查看官网：uniapp.dcloud.net.cn/component/b...

<button type="default" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>

// 打开获取用户手机号的授权窗口
getPhoneNumber(e) {
  console.log('getPhoneNumber', e.detail)
  console.log(e.detail.encryptedData); // 获取加密数据
  console.log(e.detail.iv); // 获取加密算法的初始向量

  const { detail:{ code, encryptedData, iv, errMsg } } = e;
  if(errMsg === 'getPhoneNumber:ok') {
    // 获取成功，做对应操作
  }
}

3. 微信用户信息（头像、昵称）授权

可以使用uni.getUserProfile获取用户信息，如头像、昵称

该 API 对于低版本（基础库 2.10.4-2.27.0 版本），每次触发 uni.getUserProfile 才会弹出授权窗口；

我开发时，最新的基础库为 3.3.1，不会弹出授权窗口，直接获取到值了，也是静默授权状态。

<button type="default" size="mini" @click="getUserInfo">获取用户信息</button>

getUserInfo(e) {
  // 获取用户信息
  uni.getUserProfile({
    desc: '获取你的昵称、头像、地区及性别',
    success: res => {
      console.log('获取你的昵称、头像',res);
    },
    fail: err => {
      console.log("拒绝了", err);
    }
  });
}

uniapp 跳转

主要介绍了 uniapp 小程序跳转的三种方式，分别为内部页面跳转、外部链接跳转、其他小程序跳转。

1. 内部页面

内部页面的跳转，可以通过如下方式：navigateTo、reLaunch、switchTab

// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({ url: "/pages/home/home" });

// 关闭所有页面，打开到应用内的某个页面
uni.reLaunch({ url: "/pages/home/home" });

// 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.switchTab({ url: "/pages/home/home" });

2. 外部链接

通过 webview 打开外部网站链接，web-view 是一个 web 浏览器组件，可以用来承载网页的容器。

// 1. 新建pages/webview/webview.vue页面
<template>
  <web-view :src="url"></web-view>
</template>
<script>
export default {
  data() {
    return {
      url: ''
    }
  },
  onLoad(e) {
    // 使用web-view标签进行跳转
    this.url = decodeURIComponent(e.url)
  }
}
</script>

// 2. 外链跳转使用
uni.navigateTo({url: "https://www.taobao.com"})

3. 小程序 appId

通过navigateToMiniProgram可以打开其他小程序

// 打开其他小程序
uni.navigateToMiniProgram({
  appId: "AppId", // 其他小程序的AppId
  path: "pages/index/index", // 其他小程序的首页路径
  extraData: {}, // 传递给其他小程序的数据
  envVersion: "release", // 其他小程序的版本（develop/trial/release）
  success(res) {
    // 打开其他小程序成功的回调函数
  },
  fail(err) {
    // 打开其他小程序失败的回调函数
  },
});