HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

windows申请ios证书的最简方法

Apple证书

申请ios证书,苹果官方的方法是需要使用mac电脑去申请的,但是很多开发uniapp的朋友们,并没有mac电脑。

这里我分享一个在线工具,在线即可申请ios证书。

详细的使用教程如下:

https://www.yunedit.com/xueyuan/jx/ioscert017

继续阅读 »

申请ios证书,苹果官方的方法是需要使用mac电脑去申请的,但是很多开发uniapp的朋友们,并没有mac电脑。

这里我分享一个在线工具,在线即可申请ios证书。

详细的使用教程如下:

https://www.yunedit.com/xueyuan/jx/ioscert017

收起阅读 »

ios、android备案公钥、MD5等值的最简单查询方法

2023年8月后,现在上架的app都需要备案了,无论是新上架还是已上架的app都要求做备案

网上的教程要么就是要使用mac电脑去获取公钥,android则需要安装工具去获取公钥,实在是太麻烦了。

而且不同的备案平台,要求录入的公钥的格式还不一样,有的需要输入公钥16进制,有的需要输入公钥10进制。

分享一个视化工具,上传证书就可以获取app的公钥和MD5值,省去了很多时间,无需安装工具和使用mac电脑即可获取到公钥,而且这个工具的查询结果包含了各平台需要的公钥原文、公钥16进制和公钥10进制的值:

https://www.yunedit.com/androidmd5

https://www.yunedit.com/iosmd5

继续阅读 »

2023年8月后,现在上架的app都需要备案了,无论是新上架还是已上架的app都要求做备案

网上的教程要么就是要使用mac电脑去获取公钥,android则需要安装工具去获取公钥,实在是太麻烦了。

而且不同的备案平台,要求录入的公钥的格式还不一样,有的需要输入公钥16进制,有的需要输入公钥10进制。

分享一个视化工具,上传证书就可以获取app的公钥和MD5值,省去了很多时间,无需安装工具和使用mac电脑即可获取到公钥,而且这个工具的查询结果包含了各平台需要的公钥原文、公钥16进制和公钥10进制的值:

https://www.yunedit.com/androidmd5

https://www.yunedit.com/iosmd5

收起阅读 »

个人承接各类App项目,网站、小程序等,坐标武汉,其他地区也可,欢迎咨询微信:batik2020

小程序 外包接单

个人承接各类App项目,网站、小程序等,坐标武汉,其他地区也可,全栈开发,价格美丽。欢迎咨询微信:batik2020

个人承接各类App项目,网站、小程序等,坐标武汉,其他地区也可,全栈开发,价格美丽。欢迎咨询微信:batik2020

【汇总贴】深入浅出管理 uni-app 依赖的 uvm

uvm

汇总贴:深入浅出管理 uni-app 依赖的 uvm

经验分享的目标

逛论坛发现有一些问题归属于@dcloudio/uvm ,问题相似,解答也相似,这里做个汇总帖子,争取能一次性解决常见问题。

本文目标是带读 uvm 源码,熟悉和理解 uvm 设计思路和作用,并汇总常见问题,最终达到熟悉 uvm 源码能自主解决问题的目的。

uvm 全称是 uni-app version manager,可以类比 nvm - node version manager

背景介绍

uvm 作为官方的解决方案,在官网文档 https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion 有明显提及:

可以使用  @dcloudio/uvm  管理编译器的版本,此工具仅自动增加或更新 uni-app 编译器主要依赖,对于新增的编译命令(scripts)暂时不会自动处理,需手动参考新工程进行配置。

作为一个高速迭代的技术框架,uni-app 和周边生态每天都会开发编码、修复问题。出了常规的前端方案,还需要同时支持 hbuilderX,陈旧版本的依赖是没有意义的,是有最新版本对当前项目有明显的意义。

通过一种方案,实现前端依赖自动升级就显得有必要了,这个过程最好是一键升级,不需要关注当前的版本,和最新的版本具体是什么。

因此 @dcloudio/uvm 就出现了,在项目目录中执行 npx @dcloudio/uvm 就能实现 package.json 相关依赖的自动更新。

出于一些历史原因,uvm 的项目源码没有放到公网展示,但 npm 的产物没有走压缩编译,阅读产物源码和开发源码效果一致,这里简单介绍下源码和大致代码结构。

项目源码

访问 npm 仓库 @dcloudio/uvm,点击 Code 部分。可以看到最终的产物,和原始代码没什么区别。https://www.npmjs.com/package/@dcloudio/uvm?activeTab=code

首先看 package.json 识别相关依赖和注册命令。

package.json

"dependencies": {  
"cross-spawn": "^7.0.3",  
"inquirer": "^8.2.0",  
"minimist": "^1.2.5",  
"node-fetch": "^2"  
},  
"devDependencies": {  
"xmldom": "^0.6.0"  
}

依赖比较简单,跨平台执行命令,交互式 cli,请求发送。相关的,主要还是看 bin

命令注册看 bin 注册 bin/index.js,源码如下,相对比较简单和整齐。

通过阅读源码可以看到,当通过注册命令启动时候,会读取当前 argv 参数,比如不传的话默认填写 latest,也会读取当前命令行所代表的项目地址。

流程

在截图 line30 会执行 start(),会依次经历 info() find()get(),最后是 merge()

info()

info() 方法中,会读取当前目录的 package.json 去分析 devDependencies 依赖是否包含下面的依赖:

const plugins = {  
  vue2: '@dcloudio/vue-cli-plugin-uni',  
  vue3: '@dcloudio/vite-plugin-uni'  
}

最终返回对应的依赖和是否 vue3,这意味着 vue2 和 vue3 要升级的依赖是不同的。这里挖个坑,后面带读 @dcloudio/vite-plugin-uni 依赖的原理,感兴趣请评论区告诉我。

find()

定位到 /@dcloudio/uvm/lib/version.js#find

find 方法中,会读取当前的 plugin 、和 具体版本特征值或者"latest" 、是否 vue3 进行传递判断。

实际处理使用拿到当前的版本最后一段数字,去远程拉数据,不外乎 latest alpha release 三个取值。获取远程的 version 值。比如 3.96.2023110403,这里截图打个断点看看:

断点进相关历史判断。

之后继续请求 'https://registry.npmmirror.com/@dcloudio/vite-plugin-uni',还是各种特征值判断。

这里会请求远程数据,获取 hbuilderX 版本信息,和 registry 信息。这里是对网络有要求。

这里的 registry 默认是 cnpm ,这依赖 cnpm 的稳定性,有一定网络波动的风险,但起码能保证国内用户能访问通。

get()

还会继续判断 get 方法,这里以 vue3 的为例,最终回去获取 https://gitee.com/dcloud/uni-preset-vue/blob/vite/package.json 的信息,也就是以远程库为基准进行处理。

为了兼容历史版本的变更,这里逻辑基本不可读了,做了大量版本的兼容。在翻阅 ask 社区 uvm 问题时候,可以看到一些兼容的血泪史。

这里如果是 vue3 会进入 getVue3(),这里默认会读取 gitee 的远程仓库信息。如果出于某种原因,github 和 gitee 仓库没有正确同步,就会导致信息不匹配。

merge()

这一步骤是最后的执行阶段。会拿到 deps ,准备具体执行。使用 spawnAsync 去分别更新依赖和开发者依赖。

这一块使用 cross-spawn 绕过不同系统执行命令的问题。

技术总结

通过上面简单的核心逻辑带读,可以看到 uvm 执行的本质思路是跨系统执行命令,获取当前版本信息和远程 gitee 上典型仓库的 package.json,进行 复杂 判断,得出要升级的结果。

常见 QA

运行报错提示 Not find version xxx ,请提供具体版本号

这个目前已经没有类似问题了,对一些历史陈旧的版本可能存在一定问题,如果你遇到了请提供你当前的版本号。

运行报错提示 code ETARGET

可能是缓存和网络问题,尝试删除缓存和当前 node_modules ,尝试重新安装依赖。
也可能是网络同步问题,发版之后同步到国内需要一定时间,可以休息一下等一等再尝试。

继续阅读 »

汇总贴:深入浅出管理 uni-app 依赖的 uvm

经验分享的目标

逛论坛发现有一些问题归属于@dcloudio/uvm ,问题相似,解答也相似,这里做个汇总帖子,争取能一次性解决常见问题。

本文目标是带读 uvm 源码,熟悉和理解 uvm 设计思路和作用,并汇总常见问题,最终达到熟悉 uvm 源码能自主解决问题的目的。

uvm 全称是 uni-app version manager,可以类比 nvm - node version manager

背景介绍

uvm 作为官方的解决方案,在官网文档 https://uniapp.dcloud.net.cn/quickstart-cli.html#cliversion 有明显提及:

可以使用  @dcloudio/uvm  管理编译器的版本,此工具仅自动增加或更新 uni-app 编译器主要依赖,对于新增的编译命令(scripts)暂时不会自动处理,需手动参考新工程进行配置。

作为一个高速迭代的技术框架,uni-app 和周边生态每天都会开发编码、修复问题。出了常规的前端方案,还需要同时支持 hbuilderX,陈旧版本的依赖是没有意义的,是有最新版本对当前项目有明显的意义。

通过一种方案,实现前端依赖自动升级就显得有必要了,这个过程最好是一键升级,不需要关注当前的版本,和最新的版本具体是什么。

因此 @dcloudio/uvm 就出现了,在项目目录中执行 npx @dcloudio/uvm 就能实现 package.json 相关依赖的自动更新。

出于一些历史原因,uvm 的项目源码没有放到公网展示,但 npm 的产物没有走压缩编译,阅读产物源码和开发源码效果一致,这里简单介绍下源码和大致代码结构。

项目源码

访问 npm 仓库 @dcloudio/uvm,点击 Code 部分。可以看到最终的产物,和原始代码没什么区别。https://www.npmjs.com/package/@dcloudio/uvm?activeTab=code

首先看 package.json 识别相关依赖和注册命令。

package.json

"dependencies": {  
"cross-spawn": "^7.0.3",  
"inquirer": "^8.2.0",  
"minimist": "^1.2.5",  
"node-fetch": "^2"  
},  
"devDependencies": {  
"xmldom": "^0.6.0"  
}

依赖比较简单,跨平台执行命令,交互式 cli,请求发送。相关的,主要还是看 bin

命令注册看 bin 注册 bin/index.js,源码如下,相对比较简单和整齐。

通过阅读源码可以看到,当通过注册命令启动时候,会读取当前 argv 参数,比如不传的话默认填写 latest,也会读取当前命令行所代表的项目地址。

流程

在截图 line30 会执行 start(),会依次经历 info() find()get(),最后是 merge()

info()

info() 方法中,会读取当前目录的 package.json 去分析 devDependencies 依赖是否包含下面的依赖:

const plugins = {  
  vue2: '@dcloudio/vue-cli-plugin-uni',  
  vue3: '@dcloudio/vite-plugin-uni'  
}

最终返回对应的依赖和是否 vue3,这意味着 vue2 和 vue3 要升级的依赖是不同的。这里挖个坑,后面带读 @dcloudio/vite-plugin-uni 依赖的原理,感兴趣请评论区告诉我。

find()

定位到 /@dcloudio/uvm/lib/version.js#find

find 方法中,会读取当前的 plugin 、和 具体版本特征值或者"latest" 、是否 vue3 进行传递判断。

实际处理使用拿到当前的版本最后一段数字,去远程拉数据,不外乎 latest alpha release 三个取值。获取远程的 version 值。比如 3.96.2023110403,这里截图打个断点看看:

断点进相关历史判断。

之后继续请求 'https://registry.npmmirror.com/@dcloudio/vite-plugin-uni',还是各种特征值判断。

这里会请求远程数据,获取 hbuilderX 版本信息,和 registry 信息。这里是对网络有要求。

这里的 registry 默认是 cnpm ,这依赖 cnpm 的稳定性,有一定网络波动的风险,但起码能保证国内用户能访问通。

get()

还会继续判断 get 方法,这里以 vue3 的为例,最终回去获取 https://gitee.com/dcloud/uni-preset-vue/blob/vite/package.json 的信息,也就是以远程库为基准进行处理。

为了兼容历史版本的变更,这里逻辑基本不可读了,做了大量版本的兼容。在翻阅 ask 社区 uvm 问题时候,可以看到一些兼容的血泪史。

这里如果是 vue3 会进入 getVue3(),这里默认会读取 gitee 的远程仓库信息。如果出于某种原因,github 和 gitee 仓库没有正确同步,就会导致信息不匹配。

merge()

这一步骤是最后的执行阶段。会拿到 deps ,准备具体执行。使用 spawnAsync 去分别更新依赖和开发者依赖。

这一块使用 cross-spawn 绕过不同系统执行命令的问题。

技术总结

通过上面简单的核心逻辑带读,可以看到 uvm 执行的本质思路是跨系统执行命令,获取当前版本信息和远程 gitee 上典型仓库的 package.json,进行 复杂 判断,得出要升级的结果。

常见 QA

运行报错提示 Not find version xxx ,请提供具体版本号

这个目前已经没有类似问题了,对一些历史陈旧的版本可能存在一定问题,如果你遇到了请提供你当前的版本号。

运行报错提示 code ETARGET

可能是缓存和网络问题,尝试删除缓存和当前 node_modules ,尝试重新安装依赖。
也可能是网络同步问题,发版之后同步到国内需要一定时间,可以休息一下等一等再尝试。

收起阅读 »

App版本更新,跳转应用市场更新通用

类似微信关于我们 版本更新 的效果。

// #ifdef APP-PLUS  
                if (uni.getSystemInfoSync().platform == "ios") {  
                    let appleId = 12345678;  
                    plus.runtime.launchApplication({  
                        action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,  
                    })  
                } else if (uni.getSystemInfoSync().platform == "android") {  
                    // 通用应用市场  
                    // 包名 com.xxxx.xxxxx  
                    let appurl = "market://details?id=com.xxxx.xxxxx";  
                    plus.runtime.openURL(appurl);  
                }  
                // #endif

详见: App快速开发模板

继续阅读 »

类似微信关于我们 版本更新 的效果。

// #ifdef APP-PLUS  
                if (uni.getSystemInfoSync().platform == "ios") {  
                    let appleId = 12345678;  
                    plus.runtime.launchApplication({  
                        action: `itms-apps://itunes.apple.com/cn/app/id${appleId}`,  
                    })  
                } else if (uni.getSystemInfoSync().platform == "android") {  
                    // 通用应用市场  
                    // 包名 com.xxxx.xxxxx  
                    let appurl = "market://details?id=com.xxxx.xxxxx";  
                    plus.runtime.openURL(appurl);  
                }  
                // #endif

详见: App快速开发模板

收起阅读 »

uni.navigateTo 跳转外部H5链接 失败

uni_app

uni.navigateTo 跳转外部H5链接 失败回调显示"errMsg": "navigateTo:fail page `/pages/my/offer/https://miniprogram-kyc.tencentcloudapi.com
为什么会在我的链接前面自动拼接当前页面的路径 导致跳转失败

继续阅读 »

uni.navigateTo 跳转外部H5链接 失败回调显示"errMsg": "navigateTo:fail page `/pages/my/offer/https://miniprogram-kyc.tencentcloudapi.com
为什么会在我的链接前面自动拼接当前页面的路径 导致跳转失败

收起阅读 »

uniapp 企微H5 通讯录选人以及 ww-open-data 无法显示人名问题总结

uniapp

直接说

一开始按uni官网引入,但是报错不能用
https://ask.dcloud.net.cn/article/35380
说到底还是uni占用wx导致的,因为我还还要用通讯录选人和通讯录组件,所以放弃了
======================================================================
后来按企微官方cdn引入,这两个顺序不能调整
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
然后调用wx.config和wx.agentConfig也不行,想着肯定也是uni占用wx导致的,所以在调用的页面一开始做重新赋值
window.wx=null;
window.wx = window.jWeixin;
我在windows电脑上和安卓手机上可以了,但是苹果电脑又报错,提示config不是一个方法
所以特殊处理一下

const osName=uni.getSystemInfoSync().osName

if(osName != 'ios' && osName!='macos'){
window.wx=null;
window.wx = window.jWeixin;
}
然后试了一下 windows电脑 安卓 苹果电脑都能正常选择和显示人名了

最后提示一下:如果你要用ww-open-data组件,只能用window.wx 所以有的文档说用jWeixin不影响初始化和选择人员,但是通讯录组件显示不了人名

继续阅读 »

直接说

一开始按uni官网引入,但是报错不能用
https://ask.dcloud.net.cn/article/35380
说到底还是uni占用wx导致的,因为我还还要用通讯录选人和通讯录组件,所以放弃了
======================================================================
后来按企微官方cdn引入,这两个顺序不能调整
<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js" referrerpolicy="origin"></script>
<script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" referrerpolicy="origin"></script>
然后调用wx.config和wx.agentConfig也不行,想着肯定也是uni占用wx导致的,所以在调用的页面一开始做重新赋值
window.wx=null;
window.wx = window.jWeixin;
我在windows电脑上和安卓手机上可以了,但是苹果电脑又报错,提示config不是一个方法
所以特殊处理一下

const osName=uni.getSystemInfoSync().osName

if(osName != 'ios' && osName!='macos'){
window.wx=null;
window.wx = window.jWeixin;
}
然后试了一下 windows电脑 安卓 苹果电脑都能正常选择和显示人名了

最后提示一下:如果你要用ww-open-data组件,只能用window.wx 所以有的文档说用jWeixin不影响初始化和选择人员,但是通讯录组件显示不了人名

收起阅读 »

想找人做一套漫画APP

Vue uniapp

想找人做一套漫画APP,预算1000,后台是帝国cms。Vue2或Vue3都可以,能接受的来。企鹅8544#593#63(去掉#)

想找人做一套漫画APP,预算1000,后台是帝国cms。Vue2或Vue3都可以,能接受的来。企鹅8544#593#63(去掉#)

要用的来复制粘贴吧!对于 luanqing-popup-dialog 这个 nvue 气泡菜单组件的修改

要用的来复制粘贴吧!对于 luanqing-popup-dialog 这个 nvue 气泡菜单组件的修改

  • 因为插件市场上太乱了,很多组件都存在问题,这次用了一个 luanqing-popup-dialog 组件也是不能直接使用的,所以进行了魔改,现在能够直接使用了,自己用太无聊了,暂时不想发什么插件市场了,直接复制粘贴出来给大家用吧,以后有空了我再发插件市场

无论是 vue还是nvue 可以直接使用,严格遵循了 nvue 的写法,nvue写法是完全可以向下vue兼容的,所以直接放心用吧

效果图

截图url:https://upload-images.jianshu.io/upload_images/10916716-c850836fdd143e5a.png

  • 源码直接看附件吧,这里放在代码段里预览出来效果乱七八糟的

  • 效果截图图片不知为啥uniapp文章里显示不出来,直接点击链接自己看吧

  • popup-menu.vue

继续阅读 »

要用的来复制粘贴吧!对于 luanqing-popup-dialog 这个 nvue 气泡菜单组件的修改

  • 因为插件市场上太乱了,很多组件都存在问题,这次用了一个 luanqing-popup-dialog 组件也是不能直接使用的,所以进行了魔改,现在能够直接使用了,自己用太无聊了,暂时不想发什么插件市场了,直接复制粘贴出来给大家用吧,以后有空了我再发插件市场

无论是 vue还是nvue 可以直接使用,严格遵循了 nvue 的写法,nvue写法是完全可以向下vue兼容的,所以直接放心用吧

效果图

截图url:https://upload-images.jianshu.io/upload_images/10916716-c850836fdd143e5a.png

  • 源码直接看附件吧,这里放在代码段里预览出来效果乱七八糟的

  • 效果截图图片不知为啥uniapp文章里显示不出来,直接点击链接自己看吧

  • popup-menu.vue

收起阅读 »

uni加固那些事【持续更新】

加固 安全检测 Android漏洞 安全漏洞

uni加固产品自上线以来,已经被众多公司和个人开发者广泛使用。

  • uni加固能解决的中高风险

  • 非uni加固能解决的中高风险

    1. Webview绕过证书校验风险
    2. Activity 导出组件拒绝服务攻击风险
    3. Service 导出组件拒绝服务攻击风险
    4. Broadcast Receiver 组件导出风险检测
    5. WebView 远程代码执行漏洞
    6. 密钥硬编码漏洞
    7. Strandhogg漏洞
      (1-7 解决方案: https://uniapp.dcloud.net.cn/tutorial/app-sec-android.html)
    8. 剪切板敏感信息泄露风险
      (解决方案: https://ask.dcloud.net.cn/question/129784)

以上可能不能解决大家所有问题,所以有遇到安全加固和隐私合规检测相关问题 麻烦进uni-im反馈

继续阅读 »

uni加固产品自上线以来,已经被众多公司和个人开发者广泛使用。

  • uni加固能解决的中高风险

  • 非uni加固能解决的中高风险

    1. Webview绕过证书校验风险
    2. Activity 导出组件拒绝服务攻击风险
    3. Service 导出组件拒绝服务攻击风险
    4. Broadcast Receiver 组件导出风险检测
    5. WebView 远程代码执行漏洞
    6. 密钥硬编码漏洞
    7. Strandhogg漏洞
      (1-7 解决方案: https://uniapp.dcloud.net.cn/tutorial/app-sec-android.html)
    8. 剪切板敏感信息泄露风险
      (解决方案: https://ask.dcloud.net.cn/question/129784)

以上可能不能解决大家所有问题,所以有遇到安全加固和隐私合规检测相关问题 麻烦进uni-im反馈

收起阅读 »

Vue3组件库Wot Design Uni 增加 Fab 悬浮动作按钮 ,赶快进来看看效果吧!

uniapp 组件

Fab 悬浮动作按钮

悬浮动作按钮组件,按下可显示一组动作按钮。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基本用法

通过type设置悬浮按钮触发器的类型,position设置悬浮按钮触发器的位置,direction设置动作按钮的打开方向,disabled设置悬浮按钮是否禁用。

<wd-fab :disabled="disabled" :type="type" :position="position" :direction="direction">  
  <wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>  
    <wd-icon name="github-filled" size="22px"></wd-icon>  
  </wd-button>  
  <wd-button @click="showToast('我要收藏')" :disabled="disabled" custom-class="custom-button" type="success" round>  
    <wd-icon name="star" size="22px"></wd-icon>  
  </wd-button>  

  <wd-button @click="showToast('我要投币')" :disabled="disabled" custom-class="custom-button" type="error" round>  
    <wd-icon name="money-circle" size="22px"></wd-icon>  
  </wd-button>  
  <wd-button @click="showToast('我要点赞')" :disabled="disabled" custom-class="custom-button" type="warning" round>  
    <wd-icon name="thumb-up" size="22px"></wd-icon>  
  </wd-button>  
</wd-fab>
import { useToast } from '@/uni_modules/wot-design-uni'  
const { show: showToast } = useToast()  
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')  
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')  
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')  
const disabled = ref<boolean>(false)
  :deep(.custom-button) {  
    min-width: auto !important;  
    box-sizing: border-box;  
    width: 32px !important;  
    height: 32px !important;  
    border-radius: 16px !important;  
    margin: 8rpx;  
  }  

  :deep(.custom-radio) {  
    height: 32px !important;  
    line-height: 32px !important;  
  }

动作菜单展开/收起

通过v-model:active控制动作按钮菜单的展开/收起

<wd-fab v-model:active="active">
const active = ref<boolean>(false)  

Attributes

参数 说明 类型 可选值 默认值 最低版本
v-model:active 是否激活 boolean - false 0.1.57
type 类型 FabType 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' 'primary' 0.1.57
position 悬浮按钮位置 FabPosition 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' 'right-bottom' 0.1.57
direction 悬浮按钮菜单弹出方向 FabDirection 'top' | 'right' | 'bottom' | 'left' 'top' 0.1.57
disabled 是否禁用 boolean - false 0.1.57
inactiveIcon 悬浮按钮未展开时的图标 string - 'add' 0.1.57
activeIcon 悬浮按钮展开时的图标 string - 'close' 0.1.57
zIndex 自定义悬浮按钮层级 number - 99 0.1.57
customStyle 自定义样式 string - '' 0.1.57

外部样式类

类名 说明 最低版本
custom-class 自定义样式类 0.1.57

地址

Github
文档网站
插件市场
QQ群

继续阅读 »

Fab 悬浮动作按钮

悬浮动作按钮组件,按下可显示一组动作按钮。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基本用法

通过type设置悬浮按钮触发器的类型,position设置悬浮按钮触发器的位置,direction设置动作按钮的打开方向,disabled设置悬浮按钮是否禁用。

<wd-fab :disabled="disabled" :type="type" :position="position" :direction="direction">  
  <wd-button @click="showToast('一键三连')" :disabled="disabled" custom-class="custom-button" type="primary" round>  
    <wd-icon name="github-filled" size="22px"></wd-icon>  
  </wd-button>  
  <wd-button @click="showToast('我要收藏')" :disabled="disabled" custom-class="custom-button" type="success" round>  
    <wd-icon name="star" size="22px"></wd-icon>  
  </wd-button>  

  <wd-button @click="showToast('我要投币')" :disabled="disabled" custom-class="custom-button" type="error" round>  
    <wd-icon name="money-circle" size="22px"></wd-icon>  
  </wd-button>  
  <wd-button @click="showToast('我要点赞')" :disabled="disabled" custom-class="custom-button" type="warning" round>  
    <wd-icon name="thumb-up" size="22px"></wd-icon>  
  </wd-button>  
</wd-fab>
import { useToast } from '@/uni_modules/wot-design-uni'  
const { show: showToast } = useToast()  
const type = ref<'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'>('primary')  
const position = ref<'left-top' | 'right-top' | 'left-bottom' | 'right-bottom'>('left-bottom')  
const direction = ref<'top' | 'right' | 'bottom' | 'left'>('top')  
const disabled = ref<boolean>(false)
  :deep(.custom-button) {  
    min-width: auto !important;  
    box-sizing: border-box;  
    width: 32px !important;  
    height: 32px !important;  
    border-radius: 16px !important;  
    margin: 8rpx;  
  }  

  :deep(.custom-radio) {  
    height: 32px !important;  
    line-height: 32px !important;  
  }

动作菜单展开/收起

通过v-model:active控制动作按钮菜单的展开/收起

<wd-fab v-model:active="active">
const active = ref<boolean>(false)  

Attributes

参数 说明 类型 可选值 默认值 最低版本
v-model:active 是否激活 boolean - false 0.1.57
type 类型 FabType 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' 'primary' 0.1.57
position 悬浮按钮位置 FabPosition 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' 'right-bottom' 0.1.57
direction 悬浮按钮菜单弹出方向 FabDirection 'top' | 'right' | 'bottom' | 'left' 'top' 0.1.57
disabled 是否禁用 boolean - false 0.1.57
inactiveIcon 悬浮按钮未展开时的图标 string - 'add' 0.1.57
activeIcon 悬浮按钮展开时的图标 string - 'close' 0.1.57
zIndex 自定义悬浮按钮层级 number - 99 0.1.57
customStyle 自定义样式 string - '' 0.1.57

外部样式类

类名 说明 最低版本
custom-class 自定义样式类 0.1.57

地址

Github
文档网站
插件市场
QQ群

收起阅读 »