uni-app开发路上的坑

前情提要

记录一下使用uni-app + Vue3开发项目过程中遇到问题、以及解决方法。

map组件使用问题

skew属性

配置skew属性后个别手机（vivo iqoo neo11）中心点或者缩放异常（设置了坐标在广东，打开地图却定位在北京，或者定位对了但是缩放错误），未找到确切原因，为保证应用正常使用，删除了skew配置。

触摸事件穿透

设置了元素定位在地图上方时，滑动元素，底部地图会跟随移动，常见于苹果手机，通过设置以下代码即可：

html 复制代码

<view @touchmove.stop.prevent="stopTouchMove"></view>

js 复制代码

const stopTouchMove = () => {}

Wot UI FloatingPanel浮动面板交互优化

当FloatingPanel包含滚动列表时，在内容区向上滑动，不会触发面板展开，只会滚动列表，不符合使用的习惯，应该改为：内容区向上滑动，判断面板是否完全展开，是则列表滚动，否则展开面板

html 复制代码

<!-- 父组件 传入子组件浮动面板的高度、展开高度 -->
<wd-floating-panel v-model:height="height" :anchors="anchors" :safeAreaInsetBottom="true" :showScrollbar="false">
    <PromotionList :panelHeight="height" :panelMaxHeight="panelMaxHeight" />
</wd-floating-panel>

<!-- 子组件 -->
<scroll-view style="height: 100%;" :scroll-y="scrollY"></scroll-view>

js 复制代码

// 子组件，设置计算属性scrollY，判断浮动面板高度达到最大高度则允许垂直方向的滚动，否则禁用
const props = defineProps({
    // 浮动面板高度
    panelHeight: {
        type: Number,
        default: 0
    },
    // 浮动面板最大高度
    panelMaxHeight: {
        type: Number,
        default: 0
    }
})

const scrollY = computed(() => {
    return props.panelHeight === props.panelMaxHeight
})

启用分享功能

通过混入(mixin)方式设置指定页面启用分享功能

js 复制代码

// shareMixin.js
export default {
  data() {
    return {
      share: {
        title: "标题",
        path: "页面路由",
      },
    };
  },
  // 分享到微信好友功能
  onShareAppMessage(res) {
    // 获取当前页面标题
    const pages = getCurrentPages();
    const data = pages[pages.length - 1]?.$page;
    const { title, path } = this.share;
    return {
      title,
      path: data?.fullPath || path,
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
  // 分享到朋友圈功能
  onShareTimeline(res) {
    const pages = getCurrentPages();
    const data = pages[pages.length - 1]?.$page;
    const { title, path } = this.share;
    return {
      title,
      path: data?.fullPath || path,
      success(res) {
        uni.showToast({
          title: "分享成功",
        });
      },
      fail(res) {
        uni.showToast({
          title: "分享失败",
          icon: "none",
        });
      },
    };
  },
};

富文本内容格式化

富文本字符串包含的图片可能设置了固定宽度，影响预览效果，通过正则进行处理

js 复制代码

export function formatRichImg(content) {
  if (!content) return "";
  return content
    .replace(/(<img\b[^>]*?)\s+style=(["'])[\s\S]*?\2([^>]*>)/gi, "$1$3")
    .replace(/<img/gi, '<img style="max-width:100%; height:auto;"');
}