Swiper 轮播图

用于创建轮播图，它支持水平和垂直方向的滑动，可以自定义样式和指示器位置。

地址

Github
文档网站
插件市场
QQ群

先看交互效果

基础用法

通过设置 autoplay 属性控制轮播图是否自动播放，设置 current 属性初始化轮播图展示的滑块，监听滑块 click 来处理点击事件，而每一页轮播结束后，会触发 change 事件。通过

<wd-swiper :list="swiperList" autoplay :current="0" @click="handleClick" @change="onChange"></wd-swiper>

const swiperList = ref([  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/redpanda.jpg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/capybara.jpg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/panda.jpg',  
  'https://img.yzcdn.cn/vant/cat.jpeg',  
  'https://cdn.jsdelivr.net/npm/wot-design-uni-assets/meng.jpg'  
])  
function handleClick(e) {  
  console.log(e)  
}  
function onChange(e) {  
  console.log(e)  
}

点条状指示器

<wd-swiper :list="swiperList" autoplay :current="1" :indicator="{ type: 'dots-bar' }" @click="handleClick" @change="onChange"></wd-swiper>

数字指示器

<wd-swiper  
  :list="swiperList"  
  autoplay  
  :current="2"  
  :indicator="{ type: 'fraction' }"  
  indicatorPosition="bottom-right"  
  @click="handleClick"  
  @change="onChange"  
></wd-swiper>

手动切换

<wd-swiper  
  :list="swiperList"  
  :autoplay="false"  
  :current="3"  
  :indicator="{ showControls: true }"  
  :loop="false"  
  @click="handleClick"  
  @change="onChange"  
></wd-swiper>

卡片样式

设置 previousMargin 和 nextMargin 实现卡片轮播的样式。

<view class="card-swiper">  
  <wd-swiper  
    autoplay  
    :current="4"  
    custom-indicator-class="custom-indicator-class"  
    custom-image-class="custom-image"  
    custom-next-image-class="custom-image-prev"  
    custom-prev-image-class="custom-image-prev"  
    :indicator="{ type: 'dots' }"  
    :list="swiperList"  
    previousMargin="24px"  
    nextMargin="24px"  
  ></wd-swiper>  
</view>

.card-swiper {  
  --wot-swiper-radius: 0;  
  --wot-swiper-item-padding: 0 24rpx;  
  --wot-swiper-nav-dot-color: #e7e7e7;  
  --wot-swiper-nav-dot-active-color: #4d80f0;  
  padding-bottom: 24rpx;  
  :deep(.custom-indicator-class) {  
    bottom: -16px;  
  }  
  :deep(.custom-image) {  
    border-radius: 12rpx;  
  }  
  :deep(.custom-image-prev) {  
    height: 168px !important;  
  }  
}

同时展示 2 个滑块

设置 display-multiple-items 属性，控制同时展示的滑块数量。

<view class="card-swiper">  
  <wd-swiper  
    autoplay  
    :current="4"  
    :display-multiple-items="2"  
    custom-indicator-class="custom-indicator-class"  
    custom-image-class="custom-image"  
    custom-next-image-class="custom-image-prev"  
    custom-prev-image-class="custom-image-prev"  
    :indicator="{ type: 'dots' }"  
    :list="swiperList"  
    previousMargin="24px"  
    nextMargin="24px"  
  ></wd-swiper>  
</view>

.card-swiper {  
  --wot-swiper-radius: 0;  
  --wot-swiper-item-padding: 0 24rpx;  
  --wot-swiper-nav-dot-color: #e7e7e7;  
  --wot-swiper-nav-dot-active-color: #4d80f0;  
  padding-bottom: 24rpx;  
  :deep(.custom-indicator-class) {  
    bottom: -16px;  
  }  
  :deep(.custom-image) {  
    border-radius: 12rpx;  
  }  
  :deep(.custom-image-prev) {  
    height: 168px !important;  
  }  
}

垂直方向

direction 设置为 vertical 后滑块会纵向排列。

<wd-swiper  
  :list="swiperList"  
  direction="vertical"  
  indicatorPosition="right"  
  autoplay  
  :current="1"  
  :indicator="{ type: 'dots-bar' }"  
  @click="handleClick"  
  @change="onChange"  
></wd-swiper>

自定义指示器

通过 indicator 插槽可以自定义指示器的样式。

<wd-swiper :list="swiperList" direction="vertical" indicatorPosition="right" autoplay :current="1" @click="handleClick" @change="onChange">  
  <template #indicator="{ current, total }">  
    <view class="custom-indicator" style="position: absolute; bottom: 24rpx; right: 24rpx">{{ current + 1 }}/{{ total }}</view>  
  </template>  
</wd-swiper>

.custom-indicator {  
  padding: 0 12rpx;  
  height: 48rpx;  
  line-height: 48rpx;  
  border-radius: 45%;  
  background: rgba(0, 0, 0, 0.6);  
  color: #ffffff;  
  font-size: 24rpx;  
}

Attributes

DirectionType

轮播滑动方向，可选值为 'horizontal' 和 'vertical'。

EasingType

切换缓动动画类型，可选值为 'default'、'linear'、'easeInCubic'、'easeOutCubic' 和 'easeInOutCubic'。

IndicatorPositionType

页码信息展示位置，可选值为 'left'、'top-left'、'top'、'top-right'、'bottom-left'、'bottom'、'bottom-right' 和 'right'。

SwiperList

轮播图项的列表配置，包括 value 和 ariaLabel 属性。

SwiperIndicatorProps

Events

Slot

外部样式类

地址

Github
文档网站
插件市场
QQ群

需求-TreeSelect 树形选择

1. 选择任意级别,任何节点都可以被选择
2. 可筛选,模糊搜索，可递归搜索

1. mumu模拟器下载与安装

进入mumu浏览器官方网站下载安装，官方下载连接

2.mumu模拟器设置

a.MuMu模拟器ADB端口信息规则

模拟器端口为动态端口，一般模拟器本体（即多开器内序号0）的端口为16384，多开的模拟器会在此基础上加32，如：

0号16384，1号16416，2号16448，以此类推；

如果模拟器端口被占用了，会在原端口加1，如：

16384被占用，加1，即16385；

另，多开的端口不受占用后的端口影响，依旧在16384的基础上加32。

b.找到自己安装的模拟器的ADB端口
很重要：

c.MuMu模拟器12如何连接adb

执行adb连接命令：

第一步，打开adb安装路径，参考下图，点击地址栏输入CMD，再点击回车键呼出命令提示符窗口；

第二步，在命令提示符窗口内输入adb.exe connect 127.0.0.1:XXXXX，之后点击回车。

注：XXXXX为你安装的模拟器端口号，请参考打开的模拟器问题诊断内展示端口号或MuMu多开器12内的ADB端口信息后再输入。

【自动脚本】
将下段代码另存为.bat文件，双击即可执行。主要更换自己的adb路径和端口

start cmd /k "cd/d D:\Program Files\Netease\MuMuPlayer-12.0\shell && adb connect 127.0.0.1:16384"

3.uni-app 运行设置

打开HBuilder X 依次找到 工具 -->设置 -->运行设置 ，找到ADB路径和Android模拟器端口，

注意：此处的adb路径
（1）可以使用mumu模拟器的路径 \Netease\MuMuPlayer-12.0\shell，
（2）可以使用AndroidSDK的 \android-sdk\platform-tools
（3）可以使用HBuilder 的默认路径

4.运行uni-app项目-运行到手机或模拟器

常规操作，运行到模拟器即可看到Android设备，选中即可运行。

总结，我先安装的Android studio，但是辜负我一腔热忱，调试半天属实不好用，转而使用mumu模拟器，轻快好省，推荐。

common/appInit.js内新建拦截器

uni.addInterceptor('navigateTo', {  
        invoke(args) {  
            let redirectUrl = ''  
            if (uni.getStorageSync('uniIdRedirectUrl2')) {  
                redirectUrl = '?uniIdRedirectUrl=' + decodeURIComponent(uni.getStorageSync(  
                    'uniIdRedirectUrl2'))  
                console.log("缓存页 1->" + uni.getStorageSync('uniIdRedirectUrl2'))  
            } else {  
                console.log("uniIdRedirectUrl不存在")  
            }  

            let pages = getCurrentPages() //获取加载的页面  
            let newPages = pages.map(item => item.route)  
            let nowUrl = args.url //这个是当前页面  
            let lastPage = newPages.length && newPages[newPages.length - 1] //这个是上一个页面  

            //当 当前页面不是登录页时，缓存当前页    当 当前页是登录页，上一页不是登录页时，缓存上一页  
            if (!nowUrl.includes("/login")) {  
                uni.setStorageSync('uniIdRedirectUrl2', '/' + nowUrl);  
            } else if (!lastPage.includes("/login")) {  
                uni.setStorageSync('uniIdRedirectUrl2', '/' + lastPage);  
            }  

            console.log("缓存页 2->" + uni.getStorageSync('uniIdRedirectUrl2'))  

            //当 当前页是登录页 且页面不含上页信息时 加上返回页地址  
            if (nowUrl.includes("/login") && !nowUrl.includes("?uniIdRedirectUrl=")) {  
                console.log("遇到login拼接新地址->" + uni.getStorageSync('uniIdRedirectUrl2'))  
                args.url = nowUrl + redirectUrl  
            }  
        },  
        success(args) {  
            console.log("success", args)  
        },  
        fail(err) {  
            console.log('interceptor-fail', err)  
        },  
        complete(res) {  
            console.log('interceptor-complete', res)  
        }  
    })

此方法用户名密码登录时有效，微信登录还没找到问题出在哪?有路过的高手请指教一下，免得我们新人苦苦摸索，谢谢啦

经反复测试
1.使用传统打包方式（上传代码及证书）打包的安装包在所有手机管家都会报中等病毒感染
2.使用快速安心打包则绿色安全

报中等病毒，风险名称
Android.Virus.Gray.Mixopteroidea

具体原因不详，分享经验，仅供参考

这个问题好久了，找了好多资料没有解决，准备想着等项目结束了要是还搞不定就抛弃离线打包了。

今天偶然在文档里发现了一个关键的信息，貌似跟安装不了有关系。

首先我的SDK版本是3.8.7，是从旧版本升级上来的，这个版本很关键，按照之前的旧文档配置的离线打包环境，升级3.8.7后，只替换了已经存在的 aar，导致缺少了 3.8.7 版本中一个关键的 install-apk-release.aar 包，然后死活安装不了，也没有具体的报错信息。

https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html#%E5%BC%80%E5%8F%91%E7%8E%AF%E5%A2%83

说起来我还真是碰巧，正好赶上了这个版本差。

TC-tabBar

请观看

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbargif.gif" width="300" height="570"></img>

使用教程

第一步

引入组件

<template>  
    <TC-tabBar :zhi="zhi"></TC-tabBar>  
</template>  

第二步

将给zhi赋值进行传送给组件

备注：zhi按照底部按钮对应的页面中填写该按钮的索引（从0开始）

<script>  

    export default {  

        data() {  
            return {  
            zhi:1    //填写对应按钮的索引  
            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

第三步

在uni_modules/TC-tabBar/components/TC-tabBar/TC-tabBar中自行修改自己对应的页面路径

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/1.png"></img>

部分代码

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbar1.png"></img>
<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/截图/tabbar2.png"></img>

V：ANKR6699

<img src="https://mp-5833fa1d-07f4-49f6-b120-c94019485776.cdn.bspapp.com/techuang.jpg"></img>

链接：https://ext.dcloud.net.cn/plugin?id=14784

使用教程
可以将组件拷贝到components内引用组件即可，也可以复制代码进行使用。
部分代码

链接：点击跳转

重启app,会杀掉所有进程以及服务后重启软件；plus.runtime.restart()只能重新加载，并非彻底重启，导致之前的服务进程无法退出

   const main = plus.android.runtimeMainActivity();  
   const Intent = plus.android.importClass("android.content.Intent");  
   const Process = plus.android.importClass("android.os.Process");  
   const intentMainActivity = new Intent(Intent.ACTION_MAIN);  
   const packageName = main.getPackageName();  
   intentMainActivity.setClassName(packageName, "io.dcloud.PandoraEntry");  
   intentMainActivity.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
   main.startActivity(intentMainActivity);  
   Process.killProcess(Process.myPid());

体验地址：

使用教程：
进入微信小程序之后点击“点我生成”按钮，之后，滑动头像框

最后点击保存头像即可

2023微信国庆节头像来了，太漂亮，赶紧设置

每年都会给大家分享国庆节头像，今年同样给大家找了一些精美的模板，但是样式要比之前增加很多，可选择种类也多了很多。

制作方法：

1、工具地址：扫描下方小程序二维码，快来体验吧！

2、使用教程：
扫码上方小程序二维码，点击“点我生成按钮”，授权生成，滚动上方热门头像并点击头像框选择喜欢的头像框

3、最后点击保存头像即可
快来试试吧，给你的头像增添一抹中国红！

Circle 环形进度条

圆环形的进度条组件，支持进度渐变动画。

地址

Github
文档网站
插件市场

基础用法

通过v-model表示进度条的当前进度，text属性控制进度条中间文字内容。

<wd-circle v-model="current" :text="`进度：${current}%`"></wd-circle>

const current = ref<number>(10)

宽度控制

通过strokeWidth属性来控制进度条宽度，默认10px。

<wd-circle v-model="current" :strokeWidth="15"></wd-circle>

颜色定制

通过color属性控制进度条颜色，默认#1C64FD，通过layerColor属性控制进度条轨道颜色，默认#EBEEF5。

<wd-circle v-model="current" color="#1C64FD" layer-color="#EBEEF5"></wd-circle>

渐变色

color属性支持传入对象格式来定义渐变色。

<wd-circle v-model="current" :color="gradientColor"></wd-circle>

const gradientColor = {  
  '0%': '#ffd01e',  
  '100%': '#ee0a24'  
}

进度条展开方向

通过clockwise属性控制进度条展开方向，clockwise为false时，进度会从逆时针方向开始。

<wd-circle v-model="current" :clockwise="false"></wd-circle>

大小定制

通过size属性控制进度条圆环直径，默认100px。

<wd-circle v-model="current" :size="300"></wd-circle>

组件效果

Attributes

结语

目前Wot Design Uni组件库还在完善中，同时也期待有兴趣的小伙伴参与到组件库的建设中，近期的计划可见【重点】接下来要做的事 .