HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

iOS打包服务器临时停服通知

云打包

由于机房临时停电检修,我们的iOS打包服务器将在2023年11月11日12时至16时期间暂停服务。在此期间,Android平台的打包服务将不受影响,可以正常进行。如果您需要提交iOS打包任务,请耐心等待我们的通知。我们将在服务恢复后尽快为您处理您的请求。

对于此次给您带来的不便,我们深感抱歉。如有任何疑问或需要进一步的帮助,请随时与我们联系。感谢您的理解与支持!

更新,iOS打包已经恢复。

继续阅读 »

由于机房临时停电检修,我们的iOS打包服务器将在2023年11月11日12时至16时期间暂停服务。在此期间,Android平台的打包服务将不受影响,可以正常进行。如果您需要提交iOS打包任务,请耐心等待我们的通知。我们将在服务恢复后尽快为您处理您的请求。

对于此次给您带来的不便,我们深感抱歉。如有任何疑问或需要进一步的帮助,请随时与我们联系。感谢您的理解与支持!

更新,iOS打包已经恢复。

收起阅读 »

Uniapp 基于若依框架 实现照片上传与 数据处理

1.照片通过上传到服务器后;返回照片地址信息;无法实现统一管理;

  1. 基于若依 uniapp版本;其没有自带的上传插件;需要自己改造
  2. 可以自行封装相应的上传组件;

1.照片通过上传到服务器后;返回照片地址信息;无法实现统一管理;

  1. 基于若依 uniapp版本;其没有自带的上传插件;需要自己改造
  2. 可以自行封装相应的上传组件;

uniCloud 上线支付宝云开发了,新用户 0 元购,双11狂欢!

支付宝小程序云 uniCloud

支付宝云开发产品

是一款蚂蚁集团独立自研的 Serverless小程序一站式开发平台,当前已经在 uniCloud 中开放使用。


支付云开发完全兼容 uniCloud 开发生态,只需开通选择支付宝云开发,后续遵循已有开发方式。

新老用户回馈,新用户 0 元购,双11狂欢

好消息!云开发首次大促正在火爆进行中,详见下方活动参与方式。

uniCloud 支付宝云开发产品为广大用户提供了免费版、基础版、标准版、专业版、企业版和旗舰版等不同版本的套餐,也提供了不同超低折扣套餐:

新用户0元购活动:每个新用户首个环境 300元及以下套餐 0 元购 3 个月
2023年6月1日~2024年12月31日注册为新用户
注意:0元购套餐到期后用户可以选择续费,降配或者停服处理,不会自动扣费哦

小程序云双11大促活动:每个用户可享受 4.5折全量套餐优惠!此外还有欢乐抽奖,最高赢 iPhone 15 Pro!
活动时间:2023年11月1日~2023年11月30日

(悄悄地说,如果您购买云开发企业版及以下的套餐,可参与 0 元购活动。如果想购买旗舰版,可以使用小程序云双11大促活动的4.5折优惠券呦~)


本次抽奖活动限时1个月(11月1日-11月30日),抽奖池实物奖品占比高达75%哦

活动参与方式及抽奖规则

uniCloud控制台注册并购买支付宝小程序云服务空间,具体抽奖规则如下:
1、新用户注册并累计账单金额(含优惠金额)满100元即可获得抽奖机会1次;
2、新老用户通过邀请码邀请新用户,累计账单金额(含优惠金额)满100元即可获得抽奖机会1次;

如何累计账单金额(含优惠金额)满100元?

  • 购买云开发基础版4.5元/月套餐包,按量计费余额超过95.5 元;
  • 购买云开发标准版22元/月套餐包5个月及以上;
  • 购买云开发专业版76元/月套餐包1个月及以上;
  • 购买云开发企业版300元/月套餐包;
  • 购买云开发旗舰版652元/月套餐包

支付宝云开发提供更加优惠的套餐价格《价格列表》,支持套餐和按需付费混合使用,CDN 流量包多种灵活付费方式,最大程度上降低用户使用成本,让我们一起连接未来,创造无限!快来体验uniCloud支付宝小程序云版,享受无门槛试用和更多抽奖福利。

点击直通活动页面:https://unicloud.dcloud.net.cn/uni_modules/uni-trade/pages/create-order/create-order?buy_type=1

一键领取优惠大礼包:https://cloud.alipay.com/main/doubleElevenMarket?channel=318

继续阅读 »

支付宝云开发产品

是一款蚂蚁集团独立自研的 Serverless小程序一站式开发平台,当前已经在 uniCloud 中开放使用。


支付云开发完全兼容 uniCloud 开发生态,只需开通选择支付宝云开发,后续遵循已有开发方式。

新老用户回馈,新用户 0 元购,双11狂欢

好消息!云开发首次大促正在火爆进行中,详见下方活动参与方式。

uniCloud 支付宝云开发产品为广大用户提供了免费版、基础版、标准版、专业版、企业版和旗舰版等不同版本的套餐,也提供了不同超低折扣套餐:

新用户0元购活动:每个新用户首个环境 300元及以下套餐 0 元购 3 个月
2023年6月1日~2024年12月31日注册为新用户
注意:0元购套餐到期后用户可以选择续费,降配或者停服处理,不会自动扣费哦

小程序云双11大促活动:每个用户可享受 4.5折全量套餐优惠!此外还有欢乐抽奖,最高赢 iPhone 15 Pro!
活动时间:2023年11月1日~2023年11月30日

(悄悄地说,如果您购买云开发企业版及以下的套餐,可参与 0 元购活动。如果想购买旗舰版,可以使用小程序云双11大促活动的4.5折优惠券呦~)


本次抽奖活动限时1个月(11月1日-11月30日),抽奖池实物奖品占比高达75%哦

活动参与方式及抽奖规则

uniCloud控制台注册并购买支付宝小程序云服务空间,具体抽奖规则如下:
1、新用户注册并累计账单金额(含优惠金额)满100元即可获得抽奖机会1次;
2、新老用户通过邀请码邀请新用户,累计账单金额(含优惠金额)满100元即可获得抽奖机会1次;

如何累计账单金额(含优惠金额)满100元?

  • 购买云开发基础版4.5元/月套餐包,按量计费余额超过95.5 元;
  • 购买云开发标准版22元/月套餐包5个月及以上;
  • 购买云开发专业版76元/月套餐包1个月及以上;
  • 购买云开发企业版300元/月套餐包;
  • 购买云开发旗舰版652元/月套餐包

支付宝云开发提供更加优惠的套餐价格《价格列表》,支持套餐和按需付费混合使用,CDN 流量包多种灵活付费方式,最大程度上降低用户使用成本,让我们一起连接未来,创造无限!快来体验uniCloud支付宝小程序云版,享受无门槛试用和更多抽奖福利。

点击直通活动页面:https://unicloud.dcloud.net.cn/uni_modules/uni-trade/pages/create-order/create-order?buy_type=1

一键领取优惠大礼包:https://cloud.alipay.com/main/doubleElevenMarket?channel=318

收起阅读 »

uni.downloadFile url 中域名不能带下划线,否则会返回statusCode: 400

uniapp

例如:

uni.downloadFile({  
    url: test_xxx.domain.com  
})

这种会返回

{  
    "tempFilePath": "_doc/uniapp_temp_1699502244652/download/",  
    "statusCode": 400,  
    "errMsg": "downloadFile:ok"  
}

并且onProgressUpdate监听不到

继续阅读 »

例如:

uni.downloadFile({  
    url: test_xxx.domain.com  
})

这种会返回

{  
    "tempFilePath": "_doc/uniapp_temp_1699502244652/download/",  
    "statusCode": 400,  
    "errMsg": "downloadFile:ok"  
}

并且onProgressUpdate监听不到

收起阅读 »

在 HbuilderX 中使用 GitHub Copilot 辅助编程

chat 助手 ai viscose HBuilderX Copilot GitHub
     
GitHub Copilot & HBuilderX

链接

关于

GitHub Copilot for HBuilderX

Your AI pair programmer

GitHub Copilot 使用 OpenAI Codex 从你的编辑器实时建议代码和整个函数。经过数十亿行公共代码的训练,GitHub Copilot 会启用自然语言提示,GitHub Copilot 可以将自然语言提示(包括注释和方法名)转换为数十种语言的编码建议。

HBuilderX 插件基于 GitHub Copilot 官方项目 Copilot.vim 开发。代码建议参考开源项目 CopilotForXcode、代码聊天参考开源项目 CopilotChat.nvim、插件配置参考 Visual Studio Code 官方插件 GitHub Copilot

要了解更多 GitHub Copilot 信息,请访问 https://github.com/features/copilot.

订阅

GitHub Copilot 需要订阅。它对经过认证的学生和 GitHub 上流行的开源项目的维护者是免费的。

GitHub Copilot 受 GitHub 附加产品条款的约束。

使用方式

点击右下角 GitHub Copilot 图标进行登录,登录后在编辑代码时 GitHub Copilot 会自动给出建议。

  • 接受建议: Tab 键
  • 拒绝建议: Esc 键
  • 主动触发编码建议:Ctrl/Command 键 + Alt 键 + \ 键
  • 开始代码聊天:
    • Ctrl/Command 键 + I 键
    • 点击右下角 GitHub Copilot 图标 -> 开始代码聊天
    • 编辑区选中代码右键,选择菜单 GitHub Copilot -> 开始代码聊天

注意事项

  • 首次安装后,如使用出现异常,可以尝试重启 HBuilderX。
  • 卸载或者升级失败,可以尝试重启 HBuilderX。
  • 部分地区访问 GitHub Copilot 较慢,可以尝试在编辑器设置中配置 GitHub Copilot 插件代理。
  • GitHub Copilot Chat 为实验性功能,交互方式有待优化。

交流

继续阅读 »
     
GitHub Copilot & HBuilderX

链接

关于

GitHub Copilot for HBuilderX

Your AI pair programmer

GitHub Copilot 使用 OpenAI Codex 从你的编辑器实时建议代码和整个函数。经过数十亿行公共代码的训练,GitHub Copilot 会启用自然语言提示,GitHub Copilot 可以将自然语言提示(包括注释和方法名)转换为数十种语言的编码建议。

HBuilderX 插件基于 GitHub Copilot 官方项目 Copilot.vim 开发。代码建议参考开源项目 CopilotForXcode、代码聊天参考开源项目 CopilotChat.nvim、插件配置参考 Visual Studio Code 官方插件 GitHub Copilot

要了解更多 GitHub Copilot 信息,请访问 https://github.com/features/copilot.

订阅

GitHub Copilot 需要订阅。它对经过认证的学生和 GitHub 上流行的开源项目的维护者是免费的。

GitHub Copilot 受 GitHub 附加产品条款的约束。

使用方式

点击右下角 GitHub Copilot 图标进行登录,登录后在编辑代码时 GitHub Copilot 会自动给出建议。

  • 接受建议: Tab 键
  • 拒绝建议: Esc 键
  • 主动触发编码建议:Ctrl/Command 键 + Alt 键 + \ 键
  • 开始代码聊天:
    • Ctrl/Command 键 + I 键
    • 点击右下角 GitHub Copilot 图标 -> 开始代码聊天
    • 编辑区选中代码右键,选择菜单 GitHub Copilot -> 开始代码聊天

注意事项

  • 首次安装后,如使用出现异常,可以尝试重启 HBuilderX。
  • 卸载或者升级失败,可以尝试重启 HBuilderX。
  • 部分地区访问 GitHub Copilot 较慢,可以尝试在编辑器设置中配置 GitHub Copilot 插件代理。
  • GitHub Copilot Chat 为实验性功能,交互方式有待优化。

交流

收起阅读 »

uniapp 内嵌 unity(安卓离线打包)

uniapp

unity 项目导出

图片
图片
file —— build settings,将平台切换为 android 平台,导出即可。

图片

导出的工程目录结构如上,unityLibrary 目录下的工程可以 build 出一个 aar 的包。
launcher 目录下的工程依赖 unityLibrary 工程,可以用来 build 出来一个 apk 应用。

此后需要按照导出为含有源代码的 Android 项目工程方式将其导入 android studio 中,之后需要开展如下几个步骤的模块配置:

按照 Unity3d 官方例子,在安卓项目同级创建文件夹 UnityProject->androidBuild

将 Unity3d 导出的项目拷入 androidBuild 文件夹下。

安卓中嵌入该 Unity3d 项目,作为一个 module 进行调用

图片
以上为项目目录

1)setting.gradle 文件添加 unityLibrary module(:HBuilder-Integrate-AS)

include ':unityLibrary'  

project(':unityLibrary').projectDir=new File('..\\UnityProject\\androidBuild\\unityLibrary')

2)选择 build.gradle 添加 dependencies(:simpleDemo)

dependencies {  
  implementation project(':unityLibrary')  
  implementation fileTree(dir: project(':unityLibrary').getProjectDir().toString() + ('\\libs'), include: ['*.jar'])  
}

3)选择 build.gradle(:HBuilder-Integrate-AS)


allprojects {  
    repositories {  
        google()  
        jcenter()  
        // Add Code  
        flatDir {  
            dirs "${project(':unityLibrary').projectDir}/libs"  
        }  
    }  

}

4)选择 src main res strings.xml 增加,点击 AS 的 sync project,可以看到已经多了一个 module (:simpleDemo)。

// 选择 NativeAndroidApp 的 strings.xml 添加,点击 AS 的 sync project,可以看到已经多了一个 module  
<resources>  
    <string name="app_name">NativeAndroidApp</string>  
    // Add Code  
    <string name="game_view_content_description">Game view</string>  
    // End  
</resources>

5)在主运行程序的 app(simpleDemo) 下的 main->assets->dcloud_uniplugin.json 添加依赖,其中 name 为插件名(:simpleDemo)

"plugins": [  
   {  
     "type": "module",  
     "name": "Unity",  
     "class": "com.unity3d.player.UnityPlayerActivity"  
  }

1)将 AndroidManifest.xml 中 intent-filter 节点注释掉(:unityLibrary)
图片

2).将除了 unity-classes.jar 包以外的包拷入 app 下的 lib 中,用于项目的引用包(这里的app就是我项目的simpleDemo)
图片
3)将 build.gradle(unityLibrary)中相关包引用注释掉。
图片
3.uniapp-Unity3d 应用在 android 中的交互

通过 uni-app 中点击按钮事件对 Unity3d 界面进行调用,另一方面 Unity3d 中设置返回按钮,进行 Unity3d 界面退出,返回安卓界面,最终实现 uniapp-Unity3d 在安卓中的交互。具体实现方法如下:

(1)uni-app 对 Unity3d 的调用:


    goActivity(){  
        var main = plus.android.runtimeMainActivity();  
        var Intent = plus.android.importClass("android.content.Intent");  
        var intent = new Intent(main.getIntent());  
        intent.setClassName(main, "com.unity3d.player.UnityPlayerActivity");  
        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
        main.startActivity(intent);  
    },

(2)Unity3d 中返回按钮调用安卓端的实现

 AndroidJavaClass jc = new AndroidJavaClass("com.unity3d.player.UnityPlayer");  
 AndroidJavaObject jo = jc.GetStatic<AndroidJavaObject>("currentActivity");  
 jo.Call("onBackPressed");

(3)安卓端对 Unity3d 信息的接收,退出 Unity3d,返回安卓界面。


@Override  
    public void onBackPressed() {  
        runOnUiThread(new Runnable() {  
            @Override  
            public void run() {  
                mUnityPlayer.quit();  
            }  
        });  
        super.onBackPressed();  
    }

参考 1
参考 2

继续阅读 »

unity 项目导出

图片
图片
file —— build settings,将平台切换为 android 平台,导出即可。

图片

导出的工程目录结构如上,unityLibrary 目录下的工程可以 build 出一个 aar 的包。
launcher 目录下的工程依赖 unityLibrary 工程,可以用来 build 出来一个 apk 应用。

此后需要按照导出为含有源代码的 Android 项目工程方式将其导入 android studio 中,之后需要开展如下几个步骤的模块配置:

按照 Unity3d 官方例子,在安卓项目同级创建文件夹 UnityProject->androidBuild

将 Unity3d 导出的项目拷入 androidBuild 文件夹下。

安卓中嵌入该 Unity3d 项目,作为一个 module 进行调用

图片
以上为项目目录

1)setting.gradle 文件添加 unityLibrary module(:HBuilder-Integrate-AS)

include ':unityLibrary'  

project(':unityLibrary').projectDir=new File('..\\UnityProject\\androidBuild\\unityLibrary')

2)选择 build.gradle 添加 dependencies(:simpleDemo)

dependencies {  
  implementation project(':unityLibrary')  
  implementation fileTree(dir: project(':unityLibrary').getProjectDir().toString() + ('\\libs'), include: ['*.jar'])  
}

3)选择 build.gradle(:HBuilder-Integrate-AS)


allprojects {  
    repositories {  
        google()  
        jcenter()  
        // Add Code  
        flatDir {  
            dirs "${project(':unityLibrary').projectDir}/libs"  
        }  
    }  

}

4)选择 src main res strings.xml 增加,点击 AS 的 sync project,可以看到已经多了一个 module (:simpleDemo)。

// 选择 NativeAndroidApp 的 strings.xml 添加,点击 AS 的 sync project,可以看到已经多了一个 module  
<resources>  
    <string name="app_name">NativeAndroidApp</string>  
    // Add Code  
    <string name="game_view_content_description">Game view</string>  
    // End  
</resources>

5)在主运行程序的 app(simpleDemo) 下的 main->assets->dcloud_uniplugin.json 添加依赖,其中 name 为插件名(:simpleDemo)

"plugins": [  
   {  
     "type": "module",  
     "name": "Unity",  
     "class": "com.unity3d.player.UnityPlayerActivity"  
  }

1)将 AndroidManifest.xml 中 intent-filter 节点注释掉(:unityLibrary)
图片

2).将除了 unity-classes.jar 包以外的包拷入 app 下的 lib 中,用于项目的引用包(这里的app就是我项目的simpleDemo)
图片
3)将 build.gradle(unityLibrary)中相关包引用注释掉。
图片
3.uniapp-Unity3d 应用在 android 中的交互

通过 uni-app 中点击按钮事件对 Unity3d 界面进行调用,另一方面 Unity3d 中设置返回按钮,进行 Unity3d 界面退出,返回安卓界面,最终实现 uniapp-Unity3d 在安卓中的交互。具体实现方法如下:

(1)uni-app 对 Unity3d 的调用:


    goActivity(){  
        var main = plus.android.runtimeMainActivity();  
        var Intent = plus.android.importClass("android.content.Intent");  
        var intent = new Intent(main.getIntent());  
        intent.setClassName(main, "com.unity3d.player.UnityPlayerActivity");  
        intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);  
        main.startActivity(intent);  
    },

(2)Unity3d 中返回按钮调用安卓端的实现

 AndroidJavaClass jc = new AndroidJavaClass("com.unity3d.player.UnityPlayer");  
 AndroidJavaObject jo = jc.GetStatic<AndroidJavaObject>("currentActivity");  
 jo.Call("onBackPressed");

(3)安卓端对 Unity3d 信息的接收,退出 Unity3d,返回安卓界面。


@Override  
    public void onBackPressed() {  
        runOnUiThread(new Runnable() {  
            @Override  
            public void run() {  
                mUnityPlayer.quit();  
            }  
        });  
        super.onBackPressed();  
    }

参考 1
参考 2

收起阅读 »

拦截器uni.addInterceptor会拦截带参数的URL的BUG

拦截器 addInterceptor

拦截器uni.addInterceptor会拦截带参数的URL 。
在白名单设置了通行:/page/index/detail ,如果在跳转在URL中有参数,如/page/index/detail?id=12,则会被拦截器拦截。
不过可加两行代码即可解决这个问题:
在uni.addInterceptor 代码段中,把
if(!hasPermission(e.url)){
修改为:
const url = e.url.split('?')[0]
if(!hasPermission(url)){
即可。

继续阅读 »

拦截器uni.addInterceptor会拦截带参数的URL 。
在白名单设置了通行:/page/index/detail ,如果在跳转在URL中有参数,如/page/index/detail?id=12,则会被拦截器拦截。
不过可加两行代码即可解决这个问题:
在uni.addInterceptor 代码段中,把
if(!hasPermission(e.url)){
修改为:
const url = e.url.split('?')[0]
if(!hasPermission(url)){
即可。

收起阅读 »

【解决】APP(ios端)没有Promise.allSettled

uniapp iOS
if (!Promise.allSettled) {  
    const rejectHandler = reason => ({ status: 'rejected', reason });  
    const resolveHandler = value => ({ status: 'fulfilled', value });  
    Promise.allSettled = function (promises) {  
    const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));  
        return Promise.all(convertedPromises);  
    };  
}

来源:有点久远,百度的

↓↓↓ 各位大佬点点赞

继续阅读 »
if (!Promise.allSettled) {  
    const rejectHandler = reason => ({ status: 'rejected', reason });  
    const resolveHandler = value => ({ status: 'fulfilled', value });  
    Promise.allSettled = function (promises) {  
    const convertedPromises = promises.map(p => Promise.resolve(p).then(resolveHandler, rejectHandler));  
        return Promise.all(convertedPromises);  
    };  
}

来源:有点久远,百度的

↓↓↓ 各位大佬点点赞

收起阅读 »

3.96 这个搜索是不是有问题

HBuilderX

3.96 这个搜索是不是有问题

3.96 这个搜索是不是有问题

Wot Design Uni 增加 Sidebar 侧边栏组件 ,赶快进来看看效果吧!

uniapp

Sidebar 侧边栏

垂直展示的导航栏,用于在不同的内容区域之间进行切换。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

通过 v-model 绑定当前选中项的索引。

<wd-sidebar v-model="active">  
  <wd-sidebar-item :value="0" label="标签名称" />  
  <wd-sidebar-item :value="1" label="标签名称" />  
  <wd-sidebar-item :value="2" label="标签名称" />  
</wd-sidebar>
const active = ref(0)

徽标提示

设置 is-dot 属性后,会在右上角展示一个小红点;设置 badge 属性后,会在右上角展示相应的徽标。

<wd-sidebar v-model="active">  
  <wd-sidebar-item :value="0" label="标签名称" is-dot />  
  <wd-sidebar-item :value="1" label="标签名称" badge="5" />  
  <wd-sidebar-item :value="2" label="标签名称" />  
</wd-sidebar>

禁用选项

通过 disabled 属性禁用选项。

<wd-sidebar v-model="active">  
  <wd-sidebar-item :value="0" label="标签名称" />  
  <wd-sidebar-item :value="1" label="标签名称" disabled />  
  <wd-sidebar-item :value="2" label="标签名称" />  
</wd-sidebar>

监听切换事件

设置 change 方法来监听切换导航项时的事件。

<wd-sidebar v-model="active" @change="handleChange">  
  <wd-sidebar-item :value="0" label="标签名称 1" />  
  <wd-sidebar-item :value="1" label="标签名称 2" />  
  <wd-sidebar-item :value="2" label="标签名称 3" />  
</wd-sidebar>
import { useToast } from '@/uni_modules/wot-design-uni'  

const toast = useToast()  
const active = ref<number>(1)  

function handleChange({ value, label }) {  
  toast.show(`当前标签名 ${label}`)  
}

锚点用法示例

sidebar组件的锚点用法可以帮助用户在长页面上快速导航到特定的部分。
见文档

切换页面用法示例

sidebar组件在每次切换激活项时,跳转到指定的页面,且无法通过滚动导航到下一个sidebar项。

见文档

Attributes

参数 说明 类型 可选值 默认值 最低版本
modelValue/v-model 当前导航项的索引 string | number - 0 0.1.49

Events

事件名称 说明 参数 最低版本
change 选项切换时触发 (value: number \| string, label: string) 0.1.49

Slots

name 说明 参数 最低版本
default 自定义展示 - 0.1.49

外部样式类

类名 说明 最低版本
customStyle 自定义样式 0.1.49
customClass 自定义样式类 0.1.49

SidebarItem Attributes

参数 说明 类型 可选值 默认值 最低版本
label 当前选项标题 string - - 0.1.49
value 当前选项的值,唯一标识 number \| string - - 0.1.49
badge 徽标显示值 number \| string \| null - - 0.1.49
icon 图标 string - - 0.1.49
isDot 是否点状徽标 boolean - false 0.1.49
max 徽标最大值 number - 99 0.1.49
disabled 是否禁用 boolean - false 0.1.49

SidebarItem Slots

name 说明 参数 最低版本
icon 自定义图标 - 0.1.49

SidebarItem 外部样式类

类名 说明 最低版本
customStyle 自定义样式 0.1.49
customClass 自定义样式类 0.1.49

地址

Github
文档网站
插件市场
QQ群

继续阅读 »

Sidebar 侧边栏

垂直展示的导航栏,用于在不同的内容区域之间进行切换。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

通过 v-model 绑定当前选中项的索引。

<wd-sidebar v-model="active">  
  <wd-sidebar-item :value="0" label="标签名称" />  
  <wd-sidebar-item :value="1" label="标签名称" />  
  <wd-sidebar-item :value="2" label="标签名称" />  
</wd-sidebar>
const active = ref(0)

徽标提示

设置 is-dot 属性后,会在右上角展示一个小红点;设置 badge 属性后,会在右上角展示相应的徽标。

<wd-sidebar v-model="active">  
  <wd-sidebar-item :value="0" label="标签名称" is-dot />  
  <wd-sidebar-item :value="1" label="标签名称" badge="5" />  
  <wd-sidebar-item :value="2" label="标签名称" />  
</wd-sidebar>

禁用选项

通过 disabled 属性禁用选项。

<wd-sidebar v-model="active">  
  <wd-sidebar-item :value="0" label="标签名称" />  
  <wd-sidebar-item :value="1" label="标签名称" disabled />  
  <wd-sidebar-item :value="2" label="标签名称" />  
</wd-sidebar>

监听切换事件

设置 change 方法来监听切换导航项时的事件。

<wd-sidebar v-model="active" @change="handleChange">  
  <wd-sidebar-item :value="0" label="标签名称 1" />  
  <wd-sidebar-item :value="1" label="标签名称 2" />  
  <wd-sidebar-item :value="2" label="标签名称 3" />  
</wd-sidebar>
import { useToast } from '@/uni_modules/wot-design-uni'  

const toast = useToast()  
const active = ref<number>(1)  

function handleChange({ value, label }) {  
  toast.show(`当前标签名 ${label}`)  
}

锚点用法示例

sidebar组件的锚点用法可以帮助用户在长页面上快速导航到特定的部分。
见文档

切换页面用法示例

sidebar组件在每次切换激活项时,跳转到指定的页面,且无法通过滚动导航到下一个sidebar项。

见文档

Attributes

参数 说明 类型 可选值 默认值 最低版本
modelValue/v-model 当前导航项的索引 string | number - 0 0.1.49

Events

事件名称 说明 参数 最低版本
change 选项切换时触发 (value: number \| string, label: string) 0.1.49

Slots

name 说明 参数 最低版本
default 自定义展示 - 0.1.49

外部样式类

类名 说明 最低版本
customStyle 自定义样式 0.1.49
customClass 自定义样式类 0.1.49

SidebarItem Attributes

参数 说明 类型 可选值 默认值 最低版本
label 当前选项标题 string - - 0.1.49
value 当前选项的值,唯一标识 number \| string - - 0.1.49
badge 徽标显示值 number \| string \| null - - 0.1.49
icon 图标 string - - 0.1.49
isDot 是否点状徽标 boolean - false 0.1.49
max 徽标最大值 number - 99 0.1.49
disabled 是否禁用 boolean - false 0.1.49

SidebarItem Slots

name 说明 参数 最低版本
icon 自定义图标 - 0.1.49

SidebarItem 外部样式类

类名 说明 最低版本
customStyle 自定义样式 0.1.49
customClass 自定义样式类 0.1.49

地址

Github
文档网站
插件市场
QQ群

收起阅读 »

记录一个神奇的reportJSException问题,希望以后可以帮到有缘人

直接上图,区别很明显,一个图多了一个空行然后就报错了

看报错

直接上图,区别很明显,一个图多了一个空行然后就报错了

看报错