uniapp 弹框

主要介绍了 uniapp 弹框使用的一些问题，例如 uni.showModal 中的 content 换行显示实现、uni.showToast()字数超过 7 个显示问题、以及 uni-popup 自定义弹层处理

1. uni.showModal 中的 content 换行显示实现

// 注意：\r\n在微信模拟器中无效，真机才行
const content =
  "学校名：光谷一小\r\n" +
  "班级名：501\r\n" +
  "教师名：张哈哈\r\n"
uni.showModal({
  title: "确认操作吗？",
  content: content,
  success: (res) => {
    if (res.confirm) {
    } else if (res.cancel) {
    }
  },
});

2. uniapp 解决 showToast 字数超过 7 个显示问题

使用 uni-app 开发小程序，不管是使用微信小程序的 wx.showToast() API 或 uni-app 的 uni.showToast() API 显示消息提示框，显示图标 title 文本最多显示 7 个汉字长度，在不显示图标的情况下，大于两行不显示。

解决方案一：如果要显示超过两行的文本，使用 uview-ui 框架的 Toast 消息提示组件。

// 先在html中引入组件
<u-toast ref="uToast" />;
// 然后调用
this.$refs.uToast.show({
  title: "请学生绑定图书后再布置任务！",
  duration: 1500,
});

解决方案二：不显示图标，就可以显示两行了

uni.showToast({
  title: "请学生绑定图书后再布置任务！",
  icon: "none",
  duration: 1500,
});

3. uniapp 自定义弹框 uni-popup

复杂弹框，需要自定义内容的话，只能自己写了，可以使用 uni-popup 弹出层进行实现

<template>
  <uni-popup ref="popup" class="lm-popup">
    <view class="lm-popup-content">
      <uni-icons
        class="close"
        type="closeempty"
        size="24"
        color="#ccc"
        @click="hide"
      ></uni-icons>
      <button class="btn confirm" @click="handleAuth">微信授权登录</button>
      <button class="btn cancel" @click="handleLogin">手机验证码登录</button>
    </view>
  </uni-popup>
</template>

<script>
  export default {
    name: "login-popup",
    methods: {
      show() {
        this.$refs.popup.open("center");
      },
      hide() {
        this.$refs.popup.close();
      },
    },
  };
</script>

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') {
    // 获取成功，做对应操作
  }
}

2.1 拦截默认弹框

如下图所示：一般情况下，需要先勾选隐私协议，才能弹窗。

但是@getphonenumber事件弹窗无法拦截的，就算事件中写了判断，还是会先弹窗的，没找到拦截的方法。

目前的解决方法，用了两个按钮来判断实现

<button v-if="!agree" class="login-btn" hover-class='zn-btn-green-hover' @click="handleSubmit('auth')">手机号验证登录</button>
<button v-else class="login-btn" hover-class='zn-btn-green-hover' open-type="getPhoneNumber" @getphonenumber="(e) => handleSubmit('auth', e)">手机号验证登录</button>

handleSubmit(type, e) {
  if (!this.agree) {
    uni.showToast({ title: '请勾选用户服务协议', icon: 'none' });
    return;
  }
}

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) {
    // 打开其他小程序失败的回调函数
  },
});