更新记录

1.3.29（2023-11-20）

新增单选复选组件,h5扫码组件,条码组件,二维码组件,抽奖组件,签名组件,气泡弹窗,矩阵评分,矩阵单选,矩阵多选,矩阵输入,新闻跑马灯,树型,多规格SKU,颜色选择器,地区组件,分页组件,微信隐私协议等组件

1.3.19（2023-02-06）

新增文件上传组件、周/日历月滑动件

1.3.18（2023-01-12）

1.3.18（2023-01-05）

【新增】diy-marquee 新闻跑马灯组件。
1.3.17（2022-12-30）
【新增】diy-popover 气泡弹出组件。
1.3.16（2022-12-30）
【新增】diy-scaninput 二维码、条码输入组件。
1.3.15（2022-11-02）
【新增】diy-signature 手写签名组件。
1.3.14（2022-11-02）
【新增】diy-page 分页组件。
1.3.13（2022-10-30）
【新增】diy-select 下拉多选、单选支持过滤组件。

平台兼容性

Vue2	Vue3
√	√

App	快应用	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
HBuilderX 3.6.0 app-vue	×	√	√	√	√	√

钉钉小程序	快手小程序	飞书小程序	京东小程序
√	√	√	√

H5-Safari	Android Browser	微信浏览器(Android)	QQ浏览器(Android)	Chrome	IE	Edge	Firefox	PC-Safari
√	√	√	√	√	×	√	√	√

diy-uview-ui

🌈 介绍 `diy-uview-ui` 与 `uview-ui` 的关系？

diy-uview-ui 是基于 vk-uview-ui、uview-ui 1.8.3 版本改造而来，其本质依然还是 uview-ui，是 DIY 的珍藏版，由 DIY 维护。

在这里，也感谢 vk-uview-ui、uview-ui 1.8.3 作者的开源奉献，再次为开源点赞。同时 diy-uview-ui 也是无条件开源。

`diy-uview-ui` 与 `uview-ui 1.8.3` 功能上有什么区别？

1、最大的亮点：同时支持 Vue3.0 和 Vue2.0，你没看错，现在 uview-ui 支持 Vue3.0 了（这应该是目前为数不多的 uniapp Vue3.0 组件库）（2021-11-18）
2、以 uni_modules 模块形式发布，方便一键更新（同时组件会自动按需加载，无需手动写 easycom 规则（注意，你需要把之前写的 easycom 规则删除，在项目根目录的 pages.json 中删除）
3、删除了 uview-ui 内置的 国际化语言 功能，（改造成 Vue3 比较麻烦，故作者干脆直接删除了）
4、增加手写签名、二维码条码扫码输入、气泡弹窗、分页、下拉多选选择、分页、新闻跑马灯等组件。

目前大的问题应该没有了，作者自己的项目也是用此组件库开发，因此你无需担心后期无人维护。

如果你了解了以上须知，那么请继续阅读快速上手。

⚡ 快速上手之 Vue2.0

即使是 Vue2 版本，同样比原版 uView1.0 做了一些优化，如（车牌号键盘点击 1 次中文后会自动切英文，倒计时支持毫秒等等）

支持：H5、App(vue)、微信小程序、支付宝小程序（其他小程序未测试）

1、main.js 引入 diy-uview-ui

import uView from './uni_modules/diy-uview-ui';
Vue.use(uView);

2、App.vue 引入基础样式（注意 style 标签需声明 scss 属性支持）

<style lang="scss">
    @import './uni_modules/diy-uview-ui/index.scss';
</style>

3、uni.scss 引入全局 scss 变量文件

@import '@/uni_modules/diy-uview-ui/theme.scss';

⚡ 快速上手之 Vue3.0

不建议把老项目升级到 Vue3.0 (升级非常麻烦，建议新项目才考虑是否使用 Vue3.0)

支持：H5、App(vue)、微信小程序（其他小程序未测试）

目前发现 Vue3 H5 版本一个重大 bug（与此 UI 框架无关），调试开发没问题，发布到前端托管时样式会错乱，已确定是 HBX 的问题，等待 HBX 修复此问题。（hbx3.3.0 版本已修复此问题）

1、前置步骤：修改 manifest.json 内的 vue 版本为 vue3
2、项目根目录新增 index.html 文件，文件代码为

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
        />
        <title></title>
        <!--preload-links-->
        <!--app-context-->
        <!-- 配置H5的 web图标static/logo.png -->
        <link rel="icon" href="./static/logo.png" />
    </head>
    <body>
        <div id="app">
            <!--app-html-->
        </div>
        <script type="module" src="/main.js"></script>
    </body>
</html>

3、main.js 引入 diy-uview-ui

// 引入 uView UI
import uView from './uni_modules/diy-uview-ui';

import { createSSRApp } from 'vue';

export function createApp() {
    const app = createSSRApp(App);

    // 使用 uView UI
    app.use(uView);

    return { app };
}

4、App.vue 引入基础样式（注意 style 标签需声明 scss 属性支持）

<style lang="scss">
    @import './uni_modules/diy-uview-ui/index.scss';
</style>

5、uni.scss 引入全局 scss 变量文件

@import '@/uni_modules/diy-uview-ui/theme.scss';

介绍

DIY 官网可视化工具做好的可视化拖拽开发工具无须编程、零代码基础、所见即所得设计工具支持轻松在线可视化导出微信小程序、支付宝小程序、头条小程序、H5、WebApp、UNIAPP 等源码支持组件库,高颜值,卡片,列表,轮播图,导航栏,按钮,标签,表单,单选,复选,下拉选择,多层选择,级联选择,开关,时间轴,模态框,步骤条,头像,进度条等感谢 colorui、uniapp、uView UI 等第三方组件库的支持

引入多平台快速开发的 UI 框架 uView UI，全面的组件和便捷的工具会让您信手拈来，如鱼得水。众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用

DIY可视化组件库diy-uview-ui 支持组件库 高颜值 卡片 列表 轮播图 导航栏 按钮 标签 表单 单选 复选 下拉选择 多层选择 级联选择 开关 时间轴 模态框 步骤条 头像 进度条 单选复选组件 h5扫码组件 条码组件 二维码组件

更新记录

1.3.29（2023-11-20）

1.3.19（2023-02-06）

1.3.18（2023-01-12）

1.3.18（2023-01-05）

1.3.17（2022-12-30）

1.3.16（2022-12-30）

1.3.15（2022-11-02）

1.3.14（2022-11-02）

1.3.13（2022-10-30）

平台兼容性

diy-uview-ui

🌈 介绍 diy-uview-ui 与 uview-ui 的关系？

diy-uview-ui 与 uview-ui 1.8.3 功能上有什么区别？

⚡ 快速上手之 Vue2.0

⚡ 快速上手之 Vue3.0

介绍

文件说明

uniapp -- 对应 Uniapp 多端生成源码

weixin -- 生成微信小程序原生源码

alipay -- 生成支付宝小程序原生源码

qq -- 生成 QQ 小程序原生源码

baidu -- 生成百度小程序原生源码

bytedance -- 生成字节跳转小程序原生源码

finclip -- 生成 FinClip 小程序原生源码

dingtalk -- 生成钉钉小程序原生源码

html -- 生成 html vue 静态页面源码

API 调用截图

项目截图

隐私、权限声明

1. 本插件需要申请的系统权限列表：

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

许可协议

MIT协议

DIY可视化导出uni-app源码生成器

DIY可视化通用组件演示

DIY可视化组件库diy-uview-ui

diygwUI仿应用市场模板

DIY可视化+整合图鸟模板素材

Modal title

DIY可视化组件库diy-uview-ui 支持组件库高颜值卡片列表轮播图导航栏按钮标签表单单选复选下拉选择多层选择级联选择开关时间轴模态框步骤条头像进度条单选复选组件 h5扫码组件条码组件二维码组件

🌈 介绍 `diy-uview-ui` 与 `uview-ui` 的关系？

`diy-uview-ui` 与 `uview-ui 1.8.3` 功能上有什么区别？