Skip to content

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)调用逻辑

  1. 打开loading动画,调用nxhSDKLib.$init
  2. 获取主题色配置store.dispatch("getAppConfig", query);
  3. 获取页面模版配置 nxhSDK.getData("cms_page_info", { template_type: 2 })
  4. 获取新闻栏目列表 nxhSDK.getData("cms_channel_list")
  5. 获取新闻列表 nxhSDK.getData("cms_article_list", {})
  6. 关闭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: '自定义标题'
})