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 = '';
});

我在vue3中使用会报错，在vue2中使用没有问题

一个项目同时关联两个服务空间时，本地调试云函数需要在.hbuilderx/launch.json中指定provider，
因为uniCloud.init()的参数provider取值为aliyun或tencent，一开始误以为在launch.json也填写tencent，编辑器报错无法启动本地调试
经过测试，launch.json中provider取值为aliyun或tcb

建议官方文档（https://uniapp.dcloud.net.cn/uniCloud/rundebug.html#%E5%85%B6%E4%BB%96%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9）中写明

国庆节马上就要到了，大家换个喜庆的头像庆祝祖国诞辰蛮好的！献上我们的祝福，好好学习，努力工作，认真生活，让我们一起为祖国的明天而努力。你们的节日头像换好了吗？去年的“渐变国旗头像”火了，还记得吗？今天就为大家分享一下制作工具吧！
1、工具地址：扫描下方小程序二维码，快来体验吧！

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

最后点击保存头像即可

几十款国庆头像，任君选择，总有一款适合你
快来试试吧，给你的头像增添一抹中国红！

我现在都是hbuilder运行，vscode编辑。。。常用的搜索和替换还是vscode比较方便，插件模式搞成vscode那种更好