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组件库还在完善中，同时也期待有兴趣的小伙伴参与到组件库的建设中，近期的计划可见【重点】接下来要做的事 .

场景: c页面写了苹果支付的逻辑,在onshow里写了plus.payment.getChannels类似于获取apple支付权限,然后在成功的回调里一直报错Error: Not Found:Page[6][-1;-1;-1,27,28,29][WARN] : at newSDK/uniapp-sdk-4.1
刚开始以为是苹果支付的配置之类的地方出错了, 但检查了一圈发现没问题, 然后把报错放到百度上搜, 网上的意思是组件的加载方面出错了,然后猜测是进入页面过快, onshow里的逻辑没走完, 但尝试后发现也不是.
因为c页面原本调试时,是从a页面跳转过来的, 逻辑本来是好的. 但后来需求改变, 现在从b页面跳过来. 因为只改了跳转相关的逻辑,所以写好了没测试.
结论, 因为b页面用的u-button组件跳转,同时设置了:ripple="true" ripple-bg-color="rgba(255,255,255,0.1)" ,这是设置按钮点击样式的属性, 只要把这两个属性删了就可以了.
虽然报错解决,但其实很不能理解, 只是点击样式, 居然会影响到跳转页面的逻辑.

在uniapp开发过程中遇到需要跳转其他小程序并携带参数的需求
uniapp的官方API为：

uni.navigateToMiniProgram({  
    appId: appId,  
    path: 'pages/index',  
    extraData: {  
      token: token  
    },  
    fail(res) {  
      uni.showToast({  
        title: '跳转失败:' + res,  
        icon: 'none'  
      })  
    }  
  })

但是该API在飞书平台IOS系统中跳转失败并报错：navigateToMiniProgram:fail feature is not supported in app.
查阅飞书文档，利用uniapp差异性编译特性编写飞书跳转js

const uriPath = 'pages/index?token=' + token  
      tt.openSchema({  
        schema:  
          'https://applink.feishu.cn/client/mini_program/open?appId=' +  
          appId +  
          '&relaunch=true&path=' +  
          encodeURIComponent(uriPath), //path需要encode编译  
        external: true,  
        success(res) {  
          console.log(JSON.stringify(res))  
        },  
        fail(res) {  
          uni.showToast({  
            title: '跳转失败:' + res,  
            icon: 'none'  
          })  
        }  
      })

参考文档：https://open.feishu.cn/document/common-capabilities/applink-protocol/supported-protocol/open-a-gadget#7d956a09

现有项目二次开发，需要熟悉腾讯IM实时通信 v:13237976832

Wot Design Uni 组件库提供了一个基于Canvas实现的水印组件：支持文本和图像水印

实现方案

H5端

在H5端，我们使用document.createElement创建Canvas元素。这是标准的HTML5方法，可以在浏览器中创建一个Canvas元素。

支付宝小程序和微信小程序端

在支付宝小程序和微信小程序端，我们分别使用createOffscreenCanvas来创建Canvas元素。这是小程序中的标准方法，可以在小程序中创建Canvas。

// 支付宝小程序端  
const canvas = my.createOffscreenCanvas();  

// 微信小程序端  
const canvas = wx.createOffscreenCanvas();

其他平台

对于其他平台，我们使用Uni-App的createCanvasContext方法来创建Canvas元素。这个方法是Uni-App提供的跨平台接口。

const canvasContext = uni.createCanvasContext('myCanvas', this);

效果演示

结语

基于Canvas实现的Uni-App水印组件可以在不同平台上轻松添加水印效果，无论是文本水印还是图像水印。通过创建通用的Canvas，你可以在Uni-App项目中重复使用这个功能，提高开发效率，同时实现跨平台的兼容性。

组件库地址

wot-design-uni 高颜值组件库

安装教程
第一步
将路径为uni_modules/components/components/TC-uview-ui 复制到总的 uni_modules内

第二步
直接在您需要的页面进行引用即可

<template>  
    <view>  
        <TC-fwb-editor></TC-fwb-editor>  
    </view>  
</template>  

注意
测试过，应该没有多大的问题，如果导入插件有问题，可以直接下载插件ZIP包进行查看修改或者直接导入实例项目也行。 只支持uview, 如果您想多端使用可以将H5页面在各大应用内的web-view即可。 VVXX：ANKR6699

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

连续点播放10+以上就没有声音了，原来是创建的实例没有销毁的问题
var innerAudioContext = uni.createInnerAudioContext();
innerAudioContext.autoplay = true;
innerAudioContext.src = '..//souds/waitpay.mp3';

innerAudioContext.onPlay(() => {
console.log('开始播放');
});

innerAudioContext.onError((res) => {
console.log('播放出错');
console.log(res.errMsg);
console.log(res.errCode);
innerAudioContext.destroy();
});

innerAudioContext.onPause((res) => {
console.log('播放完成');
innerAudioContext.destroy();//这句话
innerAudioContext.src = '';
});