Appearance
im_page_mixin 通用混入
im_page_mixin 是 IM 所有页面的通用混入,提供认证、用户信息加载、响应处理等基础能力。
引入方式
javascript
import im_page_mixin from '@/libs/mixin/im_page_mixin.js'
export default {
mixins: [template_page_mixin, im_page_mixin],
// ...
}提供的方法
getImHeader()
返回 IM API 请求所需的认证头。
javascript
getImHeader() {
const token = uni.getStorageSync('im_token');
return {
'Authorization': 'Bearer ' + token
};
}使用示例:
javascript
this.middle.get(
config.imBaseURL + '/friends',
{},
{ header: this.getImHeader() }
);loadCurrentUser()
从本地存储加载当前用户信息到 this.currentUser。
javascript
loadCurrentUser() {
const userStr = uni.getStorageSync('currentUser');
if (!userStr) {
uni.reLaunch({ url: '/partnerPages/login' });
return false;
}
this.currentUser = JSON.parse(userStr);
return true;
}使用示例:在 onShow 生命周期中调用,未登录时自动跳转:
javascript
onShow() {
if (!this.loadCurrentUser()) return;
this.fetchData();
}返回值:boolean — 用户是否已登录。
handleImResponse(res)
统一处理 IM API 响应,兼容不同格式的返回数据。
javascript
handleImResponse(res) {
if (typeof res === 'string') {
try { res = JSON.parse(res); } catch (e) { return { ok: false }; }
}
if (res.code === 200) {
return { ok: true, data: res.data !== undefined ? res.data : res };
}
return { ok: false, msg: res.msg || res.message || '请求失败' };
}使用示例:
javascript
this.middle.get(config.imBaseURL + '/friends', {}, {
header: this.getImHeader()
}).then(res => {
const result = this.handleImResponse(res);
if (result.ok) {
this.friends = result.data;
} else {
uni.showToast({ title: result.msg, icon: 'none' });
}
});formatTime(timestamp)
格式化时间戳为友好的显示格式。
javascript
formatTime(timestamp) {
if (!timestamp) return '';
const date = new Date(timestamp);
const now = new Date();
// 今天:显示 HH:mm
if (date.toDateString() === now.toDateString()) {
return date.getHours().toString().padStart(2, '0') + ':' +
date.getMinutes().toString().padStart(2, '0');
}
// 今年:显示 M/D
if (date.getFullYear() === now.getFullYear()) {
return (date.getMonth() + 1) + '/' + date.getDate();
}
// 更早:显示 YYYY/M/D
return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate();
}safeJsonParse(str)
安全解析 JSON 字符串,解析失败返回 null 而不是抛出异常。
javascript
safeJsonParse(str) {
try { return JSON.parse(str); }
catch (e) { return null; }
}提供的数据
currentUser
当前登录用户对象,由 loadCurrentUser() 填充:
javascript
{
id: "user_001",
username: "alice",
nickname: "Alice",
avatar: "https://example.com/avatar.png",
email: "alice@example.com",
token: "jwt-token-string"
}典型页用法
javascript
import im_page_mixin from '@/libs/mixin/im_page_mixin.js'
import config from '@/config/base.js'
export default {
mixins: [im_page_mixin],
data() {
return {
list: [],
loading: false
}
},
onShow() {
// 1. 加载用户信息(未登录自动跳转)
if (!this.loadCurrentUser()) return;
// 2. 加载数据
this.fetchData();
},
methods: {
fetchData() {
this.loading = true;
this.middle.get(
config.imBaseURL + '/some-endpoint',
{},
{ header: this.getImHeader() }
).then(res => {
const result = this.handleImResponse(res);
if (result.ok) this.list = result.data;
}).catch(() => {
uni.showToast({ title: '网络请求失败', icon: 'none' });
}).finally(() => {
this.loading = false;
});
}
}
}