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

  },

});