UniApp 踩坑记录

// ❌ 以下代码在微信小程序中会导致弹窗无法唤起
uni.showModal({
  title: '提示',
  content: '确认要提交订单吗？',
  confirmText: '确认提交订单',  // 超过 4 个字符，导致失败
  cancelText: '暂不提交',       // 超过 4 个字符，导致失败
  success: (res) => {
    console.log(res) // 永远不会执行
  }
})

// ✅ 正确写法
uni.showModal({
  title: '提示',
  content: '确认要提交订单吗？',
  confirmText: '确认',   // ≤ 4 个字符
  cancelText: '取消',    // ≤ 4 个字符
  success: (res) => {
    if (res.confirm) {
      // 用户点击确认
    }
  }
})

// utils/modal.ts
export function safeShowModal(options: UniApp.ShowModalOptions) {
  if (import.meta.env.DEV) {
    if (options.confirmText && options.confirmText.length > 4) {
      console.warn(`[showModal] confirmText "${options.confirmText}" 超过 4 个字符，小程序中将无法唤起弹窗`)
    }
    if (options.cancelText && options.cancelText.length > 4) {
      console.warn(`[showModal] cancelText "${options.cancelText}" 超过 4 个字符，小程序中将无法唤起弹窗`)
    }
  }
  return uni.showModal(options)
}

<template>
  <!-- 这个元素初始位置在视口左侧外，滑入动画 -->
  <div class="slide-panel" :class="{ active: isOpen }">
    侧边栏内容
  </div>
</template>

<style>
.slide-panel {
  position: fixed;
  left: 0;
  top: 0;
  /* 初始状态移出视口左侧 */
  transform: translateX(-100%);
  transition: transform 0.3s ease;
}

.slide-panel.active {
  transform: translateX(0);
}
/* H5 正常，但 iOS WebView 会因为初始的 -100% 撑开页面宽度 */
</style>

<!-- app.vue 或页面根组件 -->
<style>
/* 全局设置，防止 iOS WebView 横向溢出 */
page {
  overflow-x: hidden;
}
</style>

<template>
  <div class="page-wrapper">
    <!-- 页面内容 -->
  </div>
</template>

<style scoped>
.page-wrapper {
  overflow-x: hidden;
  width: 100%;
}
</style>

<template>
  <!-- ❌ 没有设置 fields，iOS 会调用原生 picker，可能出现时区问题 -->
  <picker mode="date" :value="date" @change="onDateChange">
    <view>{{ date }}</view>
  </picker>
</template>

<script setup>
import { ref } from 'vue'

const date = ref('2024-04-15')

const onDateChange = (e) => {
  date.value = e.detail.value
  // iOS 上可能出现选择 15 号，但这里拿到 14 号的情况
}
</script>

<template>
  <!-- ✅ 明确设置 fields="day"，避免 iOS 调用原生 picker -->
  <picker mode="date" fields="day" :value="date" @change="onDateChange">
    <view>{{ date }}</view>
  </picker>
</template>

// ❌ 以下代码在微信小程序中无法绘制图片
const ctx = uni.createCanvasContext('myCanvas')
ctx.drawImage('https://example.com/image.png', 0, 0, 300, 200)
ctx.draw()
// H5 正常，小程序上图片不显示

// ✅ 正确写法
const drawImage = async (url: string) => {
  try {
    // 先获取图片信息，会自动下载到本地并返回临时路径
    const imageInfo = await uni.getImageInfo({
      src: url
    })

    const ctx = uni.createCanvasContext('myCanvas')
    // 使用返回的临时路径进行绘制
    ctx.drawImage(imageInfo.path, 0, 0, 300, 200)
    ctx.draw()
  } catch (error) {
    console.error('图片加载失败', error)
  }
}

// 调用
drawImage('https://example.com/image.png')

// utils/canvas.ts

/**
 * 预加载图片，返回可用于 Canvas 绘制的本地路径
 * @param url 图片链接（支持在线链接和本地路径）
 */
export async function preloadImage(url: string): Promise<string> {
  // 如果已经是本地路径，直接返回
  if (url.startsWith('/') || url.startsWith('wxfile://') || url.startsWith('http://tmp')) {
    return url
  }

  const res = await uni.getImageInfo({ src: url })
  return res.path
}

/**
 * 批量预加载图片
 * @param urls 图片链接数组
 */
export async function preloadImages(urls: string[]): Promise<string[]> {
  return Promise.all(urls.map(preloadImage))
}

import { preloadImage, preloadImages } from '@/utils/canvas'

// 单张图片
const localPath = await preloadImage('https://example.com/bg.png')
ctx.drawImage(localPath, 0, 0, 300, 200)

// 批量预加载
const localPaths = await preloadImages([
  'https://example.com/bg.png',
  'https://example.com/avatar.png',
  'https://example.com/logo.png'
])

<template>
  <picker
    mode="selector"
    :range="options"
    :value="selectedIndex"
    mask-class="picker-mask-transparent"
    mask-style="background-image:none;background-color:transparent"
    @change="onChange"
  >
    <view>{{ options[selectedIndex] }}</view>
  </picker>
</template>

<script setup>
import { ref } from 'vue'

const options = ref(['选项一', '选项二', '选项三'])
const selectedIndex = ref(0)

const onChange = (e) => {
  selectedIndex.value = e.detail.value
}
</script>

<style scoped>
/* 使用 :deep() 穿透 scoped 样式 */
:deep(.picker-mask-transparent) {
  background-image: none !important;
  background-color: transparent !important;
}
</style>