Appearance
20250421BUG-标准文件
1. 新闻详情富文本格式问题
说明: 后台富文本编辑处<p>
标签有默认间距,前台渲染需要给 <p>
标签加默认样式 margin: 15px 0
,给 <img>
标签加样式宽度100%。
处理方式:
javascript
/**
* @description: 处理富文本内容
* @param {string} str 解密后的富文本内容
* @return {string} 处理后的富文本内容
*/
const dealRichContent = (str) => {
if (!str) return '';
const res = str
.replace(/<img/gi, '<img class="rich-img" ')
.replace(/<p/gi, '<p class="rich-p" ');
return res;
};
css
.rich-img {
width: 100%;
}
.rich-p {
margin: 15px 0;
}
2. 登录页跳转问题
说明: 在进入页面前,页面跳转拦截器中添加判断是否需要前往登录页。
处理方式:
javascript
import {nxhSDKLib} from "@/nxhsdk.module.min";
import {checkEnvironment, miniProgramNavigateTo, wrapUrl} from "./utils.js";
const judegeLogin = (toUrl) => {
return new Promise((resolve, reject) => {
nxhSDKLib.$init(() => {
console.warn('addInterceptor-$init');
}).then((res) => {
const notLoginPage = nxhSDKLib.storage.getStorage('not_login');
const isMobVl = nxhSDKLib.storage.getStorage('is_mob_vl');
const toPath = toUrl.split('?')[0];
// 未绑定手机号且需要登录的页面强制跳转登录页
if (!isMobVl && !notLoginPage.includes(toPath)) {
const url = `/login/xcx/index?appid=${nxhSDKLib.storage.getStorage('app_id')}`;
// 保存当前页面路径,登录成功后跳转回来
uni.setStorageSync('returnUrl', toPath.slice(1))
resolve(url);
} else {
resolve(toUrl)
}
}).catch((err) => {
reject(err)
})
})
}
//添加页面跳转拦截器 navigateTo、redirectTo、reLaunch
uni.addInterceptor('navigateTo', {
invoke(args) {
return new Promise((resolve, reject) => {
let url = wrapUrl(args.url || '');
let environment = checkEnvironment();
if (environment === 3) {
miniProgramNavigateTo('navigateTo', url).then(() => {
reject()
}).catch(() => {
args.url = url;
resolve(args)
})
} else {
judegeLogin(url).then((res) => {
args.url = res;
resolve(args)
}).catch((err) => {
reject()
})
}
})
}
})
3. 进入页面默认数据和接口刷新体验问题
说明: 采用骨架屏占位(插件报错-暂不考虑),添加 loading 动画,数字 0 采用 "-" 占位。
4. 个人中心滚动问题
说明: 设置整个页面滚动。
vue
<template>
<scroll-view scroll-y>
内容
</scroll-view>
</template>
5. 无数据时展示不统一问题(同第8个问题)
说明: 统一采用全局 <n-empty-data />
组件,需要添加展示条件:无数据且加载完毕。
vue
<n-empty-data v-if="!dataList.length && !loading" />
6. 隐私协议弹窗展示问题
说明: 采用登录页弹窗模式,如下:
vue
<template>
<privacy-agreement
v-model:modelValue="oAgreement.isShowAgreement"
:content="oAgreement.content[oAgreement.current]?.content"
:title="oAgreement.content[oAgreement.current]?.text"
/>
</template>
<script setup>
import PrivacyAgreement from "@/components/privacy-agreement/index.vue";
</script>
7. 新闻分类页(/news/cate/index)调用逻辑
- 打开loading动画,调用nxhSDKLib.$init
- 获取主题色配置store.dispatch("getAppConfig", query);
- 获取页面模版配置
nxhSDK.getData("cms_page_info", { template_type: 2 })
- 获取新闻栏目列表
nxhSDK.getData("cms_channel_list")
- 获取新闻列表
nxhSDK.getData("cms_article_list", {})
- 关闭loading动画
8. 优惠券加载先展示暂无数据,再出现数据问题
说明: 进入页面先展示loading动画,接口调用结束后,有数据则展示数据内容,无数据再展示空数据占位 <n-empty-data />
。
处理方式:
vue
<template>
<view v-if="dataList.length">
<!-- 列表内容 -->
</view>
<n-empty-data v-if="!dataList.length && !loading" />
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive } from 'vue';
import {nxhSDK, nxhSDKLib} from "@/nxhsdk.module.min";
const queryData = reactive({});
const loading = ref(true);
const dataList = ref([]);
const listConfig = ref({});
const listType = ref(1);
const getPageInfo = () => {
// template_type: 1-首页 2-分类 3-详情
nxhSDK.getData("cms_page_info", { template_type: 1 }).then((res) => {
const { page_config } = res?.result?.info
if (page_config) {
listConfig.value = JSON.parse(page_config || '{}')
listType.value = listConfig.value.listType
}
})
}
const getChannelList = async () => {
try {
const res = await nxhSDK.getData("cms_channel_list", { template_type: curType.value })
console.log('fetchChannelList', res)
const list = res.result.data
dataList.value = list
} catch (error) {
console.log(error)
}
}
onLoad(async (query) => {
uni.showLoading({
title: '加载中...',
mask: true
})
Object.assign(queryData, query)
// 初始化$init
nxhSDKLib.$init(async () => {
// 获取主题色配置
const result = await store.dispatch("getAppConfig", query);
// 获取页面信息
getPageInfo()
// 获取新闻分类列表
getChannelList();
loading.value = false;
})
});
</script>
9. 缓存,不要每次返回都刷新问题(会员权益页)
说明: 默认在onLoad里处理接口,需要每次进入都刷新数据的页面采用onShow。
处理方式:
vue
import {onLoad} from "@dcloudio/uni-app";
onLoad((options) => {
// 页面初始化...
})
10. 分享按钮不可用问题
说明: 页面里需要手动调用onShareAppMessage()。
处理方式:
vue
<script setup>
import {onShareAppMessage} from "@dcloudio/uni-app";
import {nxhSDK} from "@/nxhsdk.module.min";
const store = nxhSDK.useSDKStore();
// 默认调用
onShareAppMessage(() => {
})
// 自定义标题、路径
onShareAppMessage(() => {
return {
title: `${newsDetailBlock.title}`,
path: `/news/detail/index?did=1&appid=${store.state.app_id}`
}
})
</script>
11. 导航标题
说明: 固定标题在pages.json中写死,动态标题在页面中设置。
处理方式:
json
// pages.json
{
"path": "cate/index",
"style": {
"navigationBarTitleText": "新闻分组页"
}
}
vue
uni.setNavigationBarTitle({
title: '自定义标题'
})