uniapp：常用跨端业务组件（ts版本）

已于 2023-08-29 08:56:39 修改
阅读量1.2k 收藏 2
点赞数
分类专栏： uniapp插件 UI组件库 文章标签： uni-app
于 2023-02-01 17:45:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/skyblacktoday/article/details/128837968
版权

插件内组件包含以下功能：

  1. 自定义状态栏组件(ZoNavBar)
  2. 上拉加载状态组件(ZoLoading)
  3. 弹窗组件(ZoPopup)
  4. 搜索组件(ZoSearchBar)
  5. 空数据组件(ZoEmpty)
  6. tab标签组件(ZoTabs)
  7. tab下拉筛选组件(ZoSelectTabs)
  8. 底部导航组件(ZoTabBar)
  9. cell导航组件(ZoCell)
    10.标题内容组件(ZoTitleValue)

因发版需要加上自己的ID，下载组建后请自行删除mosowe-zo-uniapp-components组件文件。

相关依赖的其他uni扩展插件需要自行下载

自测端：app，H5，微信小程序

演示H5地址
在这里插入图片描述

插件地址

Mosowe
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
uniapp-ts:uniapp+ts 开发小程序的项目最佳实践模板
05-07
uniapp+ts 开发小程序的项目最佳实践模板 配置了 vuex，使用模块化，配置了数据持久化 使用 vuex-class 里的装饰器写法来定义 state、getter、mutation 等 定义通用拦截器 内置了 vant 组件 内置了 mp-html 富文本展示组件 内置了一些工具类，例如手机号脱敏、精确的加减乘除、金额转换等 内置了一些 ts 的编码规范
vue-to-uniapp:用于代码适配性的转换
05-07
把 Vue 组件文件放到 source 文件夹中，输出到 result 文件中转换好的可用在 uni-app 的组件文件 主要转换的方面有如下几个： template 标签转换： div/li/ul 标签转换为 view img 转换为 image，添加 mode='...
基于UniAPP的小程序跨端开发
m0_67973751的博客
07-05 370
UniAPP官方网站：https://uniapp.dcloud.io/component/view.html安装scss/sass编译插件：https://ext.dcloud.net.cn/plugin?id=2046文件 > 新建 > 项目 项目建好之后启动自动下载插件，会下载两次，下载成功后我们就可以使用uni_ui提供的功能了。 新建文件：pages/user/user.vue 相对应的pages.json文件也发生变化 如果想默认访问user，将index和user位置互换
小兔鲜儿实战 uni-app:dcloud 插件SKU插件ts类型声明文件
weixin_49229663的博客
03-31 325
** SKU 价格 * 100, 注意：需要乘以 100 *//** 字段名 - 商品缩略图字段名(未选择sku时) *//** 字段名 - 商品对应的sku列表的字段名 *//** 字段名 - sku组合路径的字段名 *//** 字段名 - sku表id的字段名 *//** 字段名 - 商品规格名称的字段名 *//** 加入购物车 - 按钮的字体颜色 *//** 加入购物车 - 按钮的背景颜色 *//** 字段名 - 商品表id的字段名 *//** 字段名 - sku库存的字段名 */
跨桌面端之组件化实践
淘系技术
08-02 332
本文主要介绍了千牛PC跨端框架中，我们关于组件化部分的思考、方案选择、遇到的一些问题和解法。此文为本系列文章第三篇，第一篇：跨全端SDK技术演进第二篇：跨桌面端之Web容器演进本文：跨桌面端之组件化实践背景介绍windows千牛功能很丰富，mac千牛什么时候可以把能力对齐？相信所有跨平台应用，都有遇到过这样的窘境。由于平台差异的复杂性，维护多端产品成本非常高，且常常存在多...
干货｜携程Web组件在跨端场景的实践
携程技术
06-01 2388
作者简介Iris，携程前端开发经理，专注于前端组件库和工程化领域。Abert，携程高级研发经理，关注跨端解决方案。一、背景我们在开发 H5 营销活动后，通常会将营销活动的入口投放到多端，包括 App、小程序。常见的投放形式有：Native 原生页面、React Native 页面和小程序页面的内嵌弹窗。那么此时，就需要 Native、RN、小程序端的人力投入。由此，整个流程从仅需 H5 开发演变成...
uniapp + vue3 +vite + ts + pinia 框架模板
01-31
标题 "uniapp + vue3 + vite + ts + pinia 框架模板" 提供了我们讨论的关键技术栈。这是一个基于uni-app、Vue.js 3、vite、TypeScript和Pinia的项目模板，用于构建移动端应用。让我们逐一探讨这些技术的特性与它们在...
基于TypeScript和Vue的uniapp_V3_TS设计源码
最新发布
05-28
本uniapp_V3_TS项目基于TypeScript和Vue开发，包含81个文件，其中包括22个TS源文件、22个PNG图像文件、19个Vue组件文件、9个JSON配置文件、2个SCSS样式文件、1个Editorconfig文件、1个CJS文件、1个Gitignore文件、1...
unibest最好用的uniapp开发模板，跨端快速启动模板，使用VS Code开发，具有代码提示、自动格式化、统一配置、代码片
02-03
unibest 是由 uniapp + Vue3 + Ts + Vite4 + UnoCss + UniUI 驱动的跨端快速启动模板，使用 VS Code 开发，具有代码提示、自动格式化、统一配置、代码片段等功能，同时内置了大量平时开发常用的基本组件
uniapp 圆形进度条 设配各个版本基座
03-02
在uniapp开发中，创建一个圆形进度条是一个常见的需求，特别是在构建跨平台应用时，我们需要确保组件能在不同版本的基座上正常工作。本篇将详细介绍如何在uniapp中实现圆形进度条，并讨论如何进行组件化设计以适应...
基于uniapp+ts 开发小程序的项目最佳实践模板，支持快速迭代，二次开发
06-19
uniapp+ts 开发小程序的项目最佳实践模板 配置了 vuex，使用模块化，配置了数据持久化 使用 vuex-class 里的装饰器写法来定义 state、getter、mutation 等 定义通用拦截器 内置了 vant 组件 内置了 mp-html 富...
qrcode TS版本 动态生成二维码
05-25
【标题】"qrcode TS版本 动态生成二维码"涉及的核心技术是二维码生成，特别是使用TypeScript（TS）实现的动态生成。二维码作为一种现代数据编码工具，被广泛应用在各种领域，包括游戏、移动支付、信息分享等。...
ts-video：打字稿封装视频组件
02-13
本项目"ts-video：打字稿封装视频组件"是针对视频播放功能的封装，使用TypeScript进行开发，旨在提高代码质量和模块化。下面将详细阐述这个项目涉及的知识点以及TypeScript在封装视频组件中的应用。 1. TypeScript...
vue3+ts实战项目组件工具库.zip
03-03
Vue3+TS实战项目组件工具库是一个以Vue3和TypeScript为核心技术的开发资源，旨在帮助开发者构建高效、可复用且类型安全的前端应用。这个压缩包包含了一个名为"visualization-master"的项目，可能是一个专门用于数据...
vue-ts-qrcode:Vue简单QR码组件
04-14
vue-ts-qrcode 绘制qrcode的Vue组件。 由TypeScript编写。 轻的。 用法 npm install vue-ts-qrcode 然后导入QR，并使用该组件。 或者，为vue-ts-qrcode.min.js添加脚本标签。 查看实时演示以获取更多信息。 执照 ...
Uni-app + Vue3 + TS + Vite 基础项目搭建,如何一步步搭建插件化组件npm安装，并完成使用的，完全小白
cao_tinggang的博客
02-27 474
直接看uniapp的官方文档，来的更快。
如何快速设计一套支持渲染富文本内容的跨端组件
油墨香^-^的博客
07-18 80
因为小程序是使用自己独有的标签，例如view标签,但后台配置的是html文本字符串，怎么把html变成view，往往很多人就不知道怎么做了，觉得这就是不可能完成的，是产品在提不合理的需求，看到这里，大家可以先想想，如果是你，你会怎么做？不知道大家有没有遇到过这种需求，在管理后台配置一段富文本html内容，一开始呢，只需要支持渲染到浏览器上面，但随着公司业务的变化，可能需要在小程序上使用，甚至是ios或者android等其他端上。看上图，一切都很明亮了，但是有两个致命的问题。...
编写chameleon跨端组件的正确姿势(下篇)
weixin_34218579的博客
03-07 216
下篇（直接使用cml语法实现组件）组件开发两者对比在chameleon项目中我们实现一个跨端组件一般有两种思路：使用第三方组件封装与基于chameleon语法统一实现。在上篇中， 我们介绍了如何使用第三方库封装跨端组件，但是绝大多数组件并不需要那样差异化实现，绝大多数情况下我们推荐使用chameleon语法统一实现跨端组件。本篇是编写chameleon跨端组件的正确姿势系列文章的下篇，与上篇给出的...
编写易维护跨端组件的正确姿势
weixin_33800463的博客
04-02 112
上篇（利用各端第三方库结合多态实现组件）前期准备组件开发 一些思考在chameleon项目中我们实现一个跨端组件一般有两种思路：使用各端第三方组件封装与基于chameleon语法统一实现。本篇是编写chameleon跨端组件的正确姿势系列文章的上篇，以封装一个跨端的indexlist组件为例，首先介绍如何优雅的使用第三方库封装跨端组件，然后给出编写chameleon跨端组件的建议。使用chamel...
uniapp的vue3+ts组件传参怎么写
04-28
在 Uniapp 中使用 Vue3 + TypeScript 编写组件时，可以使用 `prop` 来定义组件的属性，并在组件内部使用 `props` 接收这些属性。 例如，定义一个名为 `MyComponent` 的组件，传入一个名为 `text` 的字符串属性： ```vue <template> <div>{{ text }}</div> </template> <script lang="ts"> import { defineComponent, PropType } from 'vue' export default defineComponent({ name: 'MyComponent', props: { text: { type: String as PropType<string>, required: true } } }) </script> ``` 在使用 `MyComponent` 时，可以通过 `:text` 的方式传入文本： ```vue <template> <MyComponent :text="'Hello, world!'"/> </template> <script lang="ts"> import { defineComponent } from 'vue' import MyComponent from '@/components/MyComponent.vue' export default defineComponent({ name: 'MyPage', components: { MyComponent } }) </script> ``` 注意：在 TypeScript 中，需要使用 `PropType` 来指定属性的类型，否则会编译错误。同时，由于 Uniapp 使用了跨平台的技术，因此需要在组件名称后面添加 `.vue` 后缀。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mosowe

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值