更新记录

1.0.1（2024-09-23） 下载此版本

修复一直问题，增加图片显示 示例数据 { "title": "一秒破解到梦空间强制学习", "content": "最近学校将第二课堂由PU口袋校园更换成了到梦空间，在初次使用时会要求你去学习操作，最近直接改成了强制学习\n所以我写了一个功能，能够在1秒内破解到梦空间的强制学习，甚至都不需要打开盗梦空间\n点击确认去解除！", "actionType": "switchTab", "actionUrl": "/pages/gongneng/gongneng", "image":"https://mmbiz.qpic.cn/mmbiz_jpg/3ApoGH4ucX5Pk1lPTtIVOevaPM4fXjdIk02N4wxlnicHyHLML7wtPGNVSAhicibYp51UomQ0UgzPyibC5buFJ2bSiaw/640?wx_fmt=jpeg", "style":"height:698px", "showOnce": true, "modalId":"07" }

1.0.0（2024-08-26） 下载此版本

首次发布

平台兼容性

uni-app

其他

Tanchuang 弹窗组件使用文档

组件简介

tanchuang.vue 是一个功能强大的模态弹窗组件，支持远程配置和本地存储控制。该组件可以显示标题、内容、图片，并支持用户选择"下次不再显示"的功能。

主要特性

• 远程配置支持 - 从远程API获取弹窗内容
• 本地存储控制 - 支持"下次不再显示"功能
• 美观的UI设计 - 现代化的弹窗界面
• 响应式布局 - 适配不同屏幕尺寸
• 多种跳转方式 - 支持 navigate、redirect、switchTab
• 图片展示 - 可选的图片显示功能
• 动画效果 - 淡入和缩放动画

使用方法

1. 导入组件

<template>
  <view>
    <!-- 其他页面内容 -->
    <tanchuang></tanchuang>
  </view>
</template>

<script>
import Tanchuang from '@/components/tanchuang.vue'

export default {
  components: {
    Tanchuang
  }
}
</script>

2. 直接使用

组件会在页面挂载时自动从远程API获取配置并显示弹窗（如果满足显示条件）。

<template>
  <view>
    <tanchuang></tanchuang>
  </view>
</template>

远程配置说明

API接口

默认API地址：/tanchuang.json

配置数据结构

{
  "title": "弹窗标题",
  "content": "弹窗内容描述",
  "actionType": "navigate",
  "actionUrl": "/pages/target/target",
  "modalId": "unique_modal_id_001",
  "image": "https://example.com/image.jpg",
  "style": "height: 200px;"
}

配置字段说明

动作类型说明

• navigate: 使用 uni.navigateTo() 跳转，可返回
• redirect: 使用 uni.redirectTo() 跳转，不可返回
• switchTab: 使用 uni.switchTab() 跳转到 tabBar 页面

组件属性

组件内部维护以下数据属性：

本地存储机制

组件使用 uni.getStorageSync('modalStatus') 来存储已显示过的弹窗记录：

// 存储结构
{
  "modal_id_1": true,
  "modal_id_2": true,
  // ...
}

当用户勾选"下次不再显示"并点击确认后，对应的 modalId 会被记录到本地存储中，下次不会再显示该弹窗。

方法说明

公共方法

内部方法

样式定制

组件提供了完整的CSS样式，主要包括：

• .modal-container - 弹窗容器（遮罩层）
• .modal-content - 弹窗主体内容
• .modal-header - 弹窗头部
• .modal-body - 弹窗主体
• .modal-footer - 弹窗底部按钮区域

自定义样式

如需修改样式，可以通过覆盖CSS类来实现：

<style>
/* 覆盖弹窗宽度 */
.modal-content {
  width: 90% !important;
}

/* 修改确认按钮颜色 */
.confirm-button {
  background-color: #007aff !important;
}
</style>

使用示例

基础使用

<template>
  <view class="container">
    <tanchuang></tanchuang>
  </view>
</template>

<script>
import Tanchuang from '@/components/tanchuang.vue'

export default {
  components: {
    Tanchuang
  },
  onLoad() {
    // 组件会自动获取远程配置并显示
  }
}
</script>

手动控制显示

<template>
  <view class="container">
    <button @click="showModal">显示弹窗</button>
    <tanchuang ref="modal"></tanchuang>
  </view>
</template>

<script>
import Tanchuang from '@/components/tanchuang.vue'

export default {
  components: {
    Tanchuang
  },
  methods: {
    showModal() {
      this.$refs.modal.openModal()
    }
  }
}
</script>

注意事项

1. 网络请求: 组件依赖网络请求获取配置，确保设备有网络连接
2. modalId唯一性: 每个弹窗的 modalId 应该是唯一的，避免存储冲突
3. 图片加载: 图片URL应该是有效的，支持HTTPS协议
4. 页面路径: actionUrl 中的页面路径应该是项目中存在的页面
5. 兼容性: 组件基于uni-app框架，支持多端运行

错误处理

组件包含完善的错误处理机制：

• 网络请求失败时显示错误信息
• API返回数据异常时显示默认错误内容
• 自动设置组件高度为最小值以避免显示异常

更新日志

• v1.0.0: 初始版本，支持基础弹窗功能
• 支持远程配置和本地存储
• 添加图片展示功能
• 支持多种页面跳转方式