HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

Wot Design Uni 组件库新增了 WaterMark 基于Canvas实现的水印组件

uni_app 组件

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 高颜值组件库

继续阅读 »

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 高颜值组件库

收起阅读 »

Uniapp 多功能富文本编辑组件 可多端使用 H5插入

插件 组件 uniapp插件 富文本

安装教程
第一步
将路径为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

继续阅读 »

安装教程
第一步
将路径为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

收起阅读 »

音频组件uni.createInnerAudioContext(),android播放声音,来回切换10+次就没有声音了

连续点播放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 = '';
});

继续阅读 »

连续点播放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 = '';
});

收起阅读 »

野火im插件,请问该插件支持vue3中使用吗

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

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

.hbuilderx/launch.json中provider字段取值问题()

一个项目同时关联两个服务空间时,本地调试云函数需要在.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)中写明

继续阅读 »

一个项目同时关联两个服务空间时,本地调试云函数需要在.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)中写明

收起阅读 »

2023国庆头像,史上最全国庆头像微信小程序分享

微信app 微信小程序

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


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


最后点击保存头像即可


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

继续阅读 »

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


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


最后点击保存头像即可


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

收起阅读 »

建议:希望ui和功能往vscode方向上发展

HBuilder

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

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

【经验分享】如何在多个云函数/云对象中共享本地公共模块代码(for Windows)

经验分享 技术分享

在 HX 开发的云服务项目中,可能存在多个云函数/云对象用到相同的代码模块。

如果这些模块来自于公共仓库的开源代码,那很简单,但如果是自己写的代码,在项目开发过程中随时还要修改,
那可能就需要在多个云函数/云对象中复制粘贴了,不仅繁琐,而且很可能出错。

解决的办法就是创建一个单独的目录用来存放这种本地公共代码模块,把公共代码模块放置在这个目录中,
然后在它们原本应该出现的地方用mklink 创建 JUNCTION 指向这里,那么只要在一处发生修改,
其它处也会随着变动,从而避免了手工维护的代码复制。

比如下面这种典型的目录结构:

<project root>  
├── uniCloud-aliyun  
│ ├── cloudfunctions  
│ │ ├── co-1  
│ │ │ ├── utils [JUNCTION]  
│ │ │ │ └── ...  
│ │ │ └── index.obj.js  
│ │ └── co-2  
│ │   ├── utils [JUNCTION]  
│ │   │ └── ...  
│ │   └── index.obj.js  
│ ...  
│   
└── local-shared  
    └── utils [JUNCTION TARGET]  
      └── ...

在上述目录结构下,创建两个 JUNCTION 的方法是在 co-1co-2 目录下分别执行下面的命令:

mklink /J utils ..\..\..\local-shared\utils

需注意的是,在把源代码提交到 git 仓库的时候,local-shared 目录下的 utils 目录不需要提交,
而要把每个云函数/云对象目录下的 JUNCTION 形式的 utils 目录都提交到 git,就像它们是那里的真实目录一样。

这样虽然在源代码仓库里面有重复的内容,但好处是别人在 checkout 代码之后会得到一个完整的项目目录,
而不用再去手工创建 JUNCTION。

当然如果他们也需要对项目做进一步开发,他们可以自己用同样的方法,把这些重复的目录搬到 local-shared
目录下,再手工创建 JUNCTION。

另外还有一点需要注意,如果 utils 模块依赖于另外一个本地模块,比如 const other = require('../other-util')
那么这个 other-util 模块也需要放置在 local-shared 目录下,并创建 JUNCTION,否则在 HX 里面
【运行-本地云对象】时会报错,因为它用相对路径加载被依赖模块时是以当前文件的真实位置开始算的。
不过,既然 utils 本身是一个公共模块,那它依赖的模块本来也就应该是一个公共模块,所以一起搬到 local-shared
目录下本来也是顺理成章的事了。

继续阅读 »

在 HX 开发的云服务项目中,可能存在多个云函数/云对象用到相同的代码模块。

如果这些模块来自于公共仓库的开源代码,那很简单,但如果是自己写的代码,在项目开发过程中随时还要修改,
那可能就需要在多个云函数/云对象中复制粘贴了,不仅繁琐,而且很可能出错。

解决的办法就是创建一个单独的目录用来存放这种本地公共代码模块,把公共代码模块放置在这个目录中,
然后在它们原本应该出现的地方用mklink 创建 JUNCTION 指向这里,那么只要在一处发生修改,
其它处也会随着变动,从而避免了手工维护的代码复制。

比如下面这种典型的目录结构:

<project root>  
├── uniCloud-aliyun  
│ ├── cloudfunctions  
│ │ ├── co-1  
│ │ │ ├── utils [JUNCTION]  
│ │ │ │ └── ...  
│ │ │ └── index.obj.js  
│ │ └── co-2  
│ │   ├── utils [JUNCTION]  
│ │   │ └── ...  
│ │   └── index.obj.js  
│ ...  
│   
└── local-shared  
    └── utils [JUNCTION TARGET]  
      └── ...

在上述目录结构下,创建两个 JUNCTION 的方法是在 co-1co-2 目录下分别执行下面的命令:

mklink /J utils ..\..\..\local-shared\utils

需注意的是,在把源代码提交到 git 仓库的时候,local-shared 目录下的 utils 目录不需要提交,
而要把每个云函数/云对象目录下的 JUNCTION 形式的 utils 目录都提交到 git,就像它们是那里的真实目录一样。

这样虽然在源代码仓库里面有重复的内容,但好处是别人在 checkout 代码之后会得到一个完整的项目目录,
而不用再去手工创建 JUNCTION。

当然如果他们也需要对项目做进一步开发,他们可以自己用同样的方法,把这些重复的目录搬到 local-shared
目录下,再手工创建 JUNCTION。

另外还有一点需要注意,如果 utils 模块依赖于另外一个本地模块,比如 const other = require('../other-util')
那么这个 other-util 模块也需要放置在 local-shared 目录下,并创建 JUNCTION,否则在 HX 里面
【运行-本地云对象】时会报错,因为它用相对路径加载被依赖模块时是以当前文件的真实位置开始算的。
不过,既然 utils 本身是一个公共模块,那它依赖的模块本来也就应该是一个公共模块,所以一起搬到 local-shared
目录下本来也是顺理成章的事了。

收起阅读 »

【B-ui】uni-app生态专用的移动端UI框架

ui库 ui组件 UI

B-ui

介绍

一款非组件化设计的uni-app生态专用的移动端UI框架,一款适合广大开发者轻易上手且能在新老项目中无负担使用的框架。

示例体验

平台 链接 二维码
H5 预览链接 <img width="200" src="https://mydarling.gitee.io/b-ui/_/h5.png">

框架文档

<font color="red">文档还在编写中,请先下载示例项目后参考示例项目使用</font>

框架下载&安装

下载:

  1. 前往 uni-app 下载市场:https://ext.dcloud.net.cn/plugin?id=10582
  2. 选择 使用 HBuilderX 导入插件 或 下载插件ZIP
  3. 如果是选择 HBuilderX 导入插件 则会自动安装,如果是选择 下载插件ZIP 把解压后的文件移入到 根目录/uni_modules/b-ui 目录中

安装:

  1. 安装CSS: App.vue 文件中添加如下代码
<style lang="scss">  
    /*每个页面公共css */  
    @import "@/uni_modules/b-ui/css/main.bundle.scss";  
</style>
  1. 安装JS: main.js 文件中添加如下代码
// 在 main.js 的最后面添加如下文件  
require("@/uni_modules/b-ui/js/main.bundle.js");

兼容说明

Vue版本兼容

Vue2 Vue3
未测试

平台兼容

H5 APP-Vue 微信小程序 APP-NVue 其他小程序 快应用 PC
× 理论兼容 懒得测试 不推荐使用

依赖说明

  • scss/sass,使用 HBuilder X 通过 菜单 “工具” > “插件安装” > “scss/sass编译” 进行安装

B-ui 名字的由来

  • 【Best 合适的】,这款UI是一个适合广大开发者轻易上手的。
  • 【Basic 基础的】,这款UI只提供基础的CSS布局和常用的轻型组件封装,对新老项目都能无负担的使用。
  • 【Beautiful 美丽的】,这款UI是美丽且符合大众审美的。

关于作者

  • 河浪
  • helang.love@qq.com
继续阅读 »

B-ui

介绍

一款非组件化设计的uni-app生态专用的移动端UI框架,一款适合广大开发者轻易上手且能在新老项目中无负担使用的框架。

示例体验

平台 链接 二维码
H5 预览链接 <img width="200" src="https://mydarling.gitee.io/b-ui/_/h5.png">

框架文档

<font color="red">文档还在编写中,请先下载示例项目后参考示例项目使用</font>

框架下载&安装

下载:

  1. 前往 uni-app 下载市场:https://ext.dcloud.net.cn/plugin?id=10582
  2. 选择 使用 HBuilderX 导入插件 或 下载插件ZIP
  3. 如果是选择 HBuilderX 导入插件 则会自动安装,如果是选择 下载插件ZIP 把解压后的文件移入到 根目录/uni_modules/b-ui 目录中

安装:

  1. 安装CSS: App.vue 文件中添加如下代码
<style lang="scss">  
    /*每个页面公共css */  
    @import "@/uni_modules/b-ui/css/main.bundle.scss";  
</style>
  1. 安装JS: main.js 文件中添加如下代码
// 在 main.js 的最后面添加如下文件  
require("@/uni_modules/b-ui/js/main.bundle.js");

兼容说明

Vue版本兼容

Vue2 Vue3
未测试

平台兼容

H5 APP-Vue 微信小程序 APP-NVue 其他小程序 快应用 PC
× 理论兼容 懒得测试 不推荐使用

依赖说明

  • scss/sass,使用 HBuilder X 通过 菜单 “工具” > “插件安装” > “scss/sass编译” 进行安装

B-ui 名字的由来

  • 【Best 合适的】,这款UI是一个适合广大开发者轻易上手的。
  • 【Basic 基础的】,这款UI只提供基础的CSS布局和常用的轻型组件封装,对新老项目都能无负担的使用。
  • 【Beautiful 美丽的】,这款UI是美丽且符合大众审美的。

关于作者

  • 河浪
  • helang.love@qq.com
收起阅读 »

2023年09月14日微信隐私协议政策再次调整【重大利好了属于是】

隐私 uniapp 微信小程序 隐私协议 隐私弹窗

背景

2023 年 09 月 14 日,微信团队再次更新了关于微信小程序隐私保护指引设置的公告:

2023.09.14更新:  

1. 隐私相关功能启用时间延期至 2023年10月17日。在 2023年10月17日之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。在 2023年10月17日之后,不论 app.json 中是否有配置 __usePrivacyCheck__,隐私相关功能都会启用。  

2. 新增官方隐私授权弹窗功能,相关功能参考下方官方隐私弹窗功能说明。此功能目前仍在开发阶段,开发者目前可以先阅读本指南文档和接口文档进行理解,平台将会尽快正式上线相关能力,上线后会在本指南文档中进行说明。

文中提到了,推迟隐私相关功能的启用时间到2023年10月17日,并且提供了兜底的组件,即使开发者不做隐私协议弹出框也无需担心小程序的使用问题。不过隐私保护指引还是要完善的。这对一些没有来得及开发相关功能的开发者来讲是重大利好,可以免去开发隐私弹框的麻烦了。以下是相关的链接

微信官方文档及公告地址

关于小程序隐私保护指引设置的公告

隐私相关接口

微信小程序隐私协议开发指南

更新用户隐私保护指引

小程序管理员或开发者可以根据具体小程序涉及到的隐私相关接口来更新微信小程序后台的用户隐私保护指引,更新并审核通过后就可以进行相关的开发调试工作。

如果还是想要自己定制弹出框的样式的话还是可以使用组件来实现的。

这里就推荐一下我提供的组件 ws-wx-privacy 微信隐私保护弹出框,支持vue2和vue3

上一篇文章

uni-app 微信小程序隐私协议开发实践

Vue3高颜值组件库

Wot Design Uni | 一个参照Wot-design打造的uni-app组件库

继续阅读 »

背景

2023 年 09 月 14 日,微信团队再次更新了关于微信小程序隐私保护指引设置的公告:

2023.09.14更新:  

1. 隐私相关功能启用时间延期至 2023年10月17日。在 2023年10月17日之前,在 app.json 中配置 __usePrivacyCheck__: true 后,会启用隐私相关功能,如果不配置或者配置为 false 则不会启用。在 2023年10月17日之后,不论 app.json 中是否有配置 __usePrivacyCheck__,隐私相关功能都会启用。  

2. 新增官方隐私授权弹窗功能,相关功能参考下方官方隐私弹窗功能说明。此功能目前仍在开发阶段,开发者目前可以先阅读本指南文档和接口文档进行理解,平台将会尽快正式上线相关能力,上线后会在本指南文档中进行说明。

文中提到了,推迟隐私相关功能的启用时间到2023年10月17日,并且提供了兜底的组件,即使开发者不做隐私协议弹出框也无需担心小程序的使用问题。不过隐私保护指引还是要完善的。这对一些没有来得及开发相关功能的开发者来讲是重大利好,可以免去开发隐私弹框的麻烦了。以下是相关的链接

微信官方文档及公告地址

关于小程序隐私保护指引设置的公告

隐私相关接口

微信小程序隐私协议开发指南

更新用户隐私保护指引

小程序管理员或开发者可以根据具体小程序涉及到的隐私相关接口来更新微信小程序后台的用户隐私保护指引,更新并审核通过后就可以进行相关的开发调试工作。

如果还是想要自己定制弹出框的样式的话还是可以使用组件来实现的。

这里就推荐一下我提供的组件 ws-wx-privacy 微信隐私保护弹出框,支持vue2和vue3

上一篇文章

uni-app 微信小程序隐私协议开发实践

Vue3高颜值组件库

Wot Design Uni | 一个参照Wot-design打造的uni-app组件库

收起阅读 »

苹果xs 使用 open-type="chooseAvatar" 报错

微信小程序 uniapp

[Component] <button>: chooseAvatar:fail errcode:-207 cronet_error_code:-207 error_msg:net::ERR_CERT_INVALID

第一次获取可以获取到微信头像,然后关闭小程序再打开就报这个错,而且从相册选择图片也无法选择

继续阅读 »

[Component] <button>: chooseAvatar:fail errcode:-207 cronet_error_code:-207 error_msg:net::ERR_CERT_INVALID

第一次获取可以获取到微信头像,然后关闭小程序再打开就报这个错,而且从相册选择图片也无法选择

收起阅读 »