找到
6
篇与
uniapp
相关的结果
-
移植 Material Design 3 色彩系统的 UTS 插件(uniapp/uniappx) Material Design 3（简称 M3）是 Google 推出的最新设计语言，它提供了更加动态和个性化的色彩系统，帮助开发者构建美观且一致的用户界面。kh-material-color专为 uniapp UTS 插件开发的 Material Design 3 色彩系统移植版本。支持 uniapp、uniappx。 官方 Material Design 3 色彩系统文档：https://m3.material.io/styles/color/ 插件功能 在跨平台开发中，保持设计一致性是一项挑战。Uniapp 作为流行的跨端框架，结合 UTS 插件系统，为开发者提供了强大的原生扩展能力。kh-material-color 功能为将 Material Design 3 的色彩系统无缝集成到 uniapp 项目中，让你能够轻松应用 M3 的动态色彩方案，无论是浅色模式还是深色模式。 主要特性 完整的 M3 色彩支持：基于官方规范，提供所有核心色彩角色。 动态色彩生成：通过种子颜色自动生成协调的色彩方案。 深色/浅色模式支持：一键切换，适配不同主题需求。 简单易用的 API：几行代码即可集成到现有项目。 类型安全：使用 TypeScript 定义，提供完整的类型提示。 支持的颜色方案 kh-material-color 插件导出了 MaterialScheme 类型，包含了 Material Design 3 中的所有关键色彩角色。以下是完整的色彩映射： export type MaterialScheme = { primary: string onPrimary: string primaryContainer: string onPrimaryContainer: string secondary: string onSecondary: string secondaryContainer: string onSecondaryContainer: string tertiary: string onTertiary: string tertiaryContainer: string onTertiaryContainer: string error: string onError: string errorContainer: string onErrorContainer: string background: string onBackground: string surface: string onSurface: string surfaceVariant: string onSurfaceVariant: string surfaceContainerHighest: string surfaceContainerHigh: string surfaceContainer: string surfaceContainerLow: string surfaceContainerLowest: string inverseSurface: string inverseOnSurface: string surfaceTint: string surfaceTintColor: string outline: string outlineVariant: string }这些色彩角色覆盖了界面中的所有元素，从主要按钮到背景、表面和轮廓，确保设计的一致性。 颜色演示 浅色模式深色模式颜色演示1图片颜色演示2图片快速开始 步骤 1：安装插件 kh-material-color 点击链接，进入插件市场直接导入安装。 步骤 2：引入插件 在需要使用色彩方案的页面或组件中，导入 generateMaterialScheme 函数： import { generateMaterialScheme } from '@/uni_modules/kh-material'步骤 3：设置种子颜色和主题模式 定义种子颜色和主题模式（浅色或深色）。种子颜色是生成整个色彩方案的基础： // 设置 Material Design 颜色方案的种子颜色 const seedColor = ref('#6750A4') // 默认 Material Design 紫色 // 是否为暗色模式 const isDark = ref(false) // 默认浅色模式步骤 4：生成色彩方案 使用 generateMaterialScheme 函数生成色彩方案。你可以将其包装在计算属性中以实现响应式更新： // 生成 Material Design 颜色方案 const materialScheme = generateMaterialScheme({ seedColor: seedColor.value, isDark: isDark.value }) // 或者，动态计算 Material Design 颜色方案 const scheme = computed(() => { return generateMaterialScheme({ seedColor: seedColor.value, isDark: isDark.value }) })参数说明 参数可空说明seedColor是种子颜色，用于生成整个色彩方案。默认值为 #6750A4（Material Design 标准紫色）。isDark是是否为暗色模式。默认值为 false（浅色模式）。步骤 5：在模板中使用色彩方案 在模板中，你可以直接通过点操作符或下标访问色彩角色： <template> <view class="container"> <!-- 使用点操作符访问 --> <view class="surface-box" :style="{ backgroundColor: scheme.surface }" > <text :style="{ color: scheme.onSurface }"> 这是一个表面容器 </text> </view> <!-- 或者使用下标访问 --> <view class="primary-box" :style="{ backgroundColor: scheme['primaryContainer'] }" > <text :style="{ color: scheme['onPrimaryContainer'] }"> 主要内容 </text> </view> <!-- 动态切换深色/浅色模式示例 --> <button @click="toggleTheme">切换主题</button> </view> </template>脚本部分： <script setup> import { ref, computed } from 'vue' import { generateMaterialScheme } from '@/uni_modules/kh-material' const seedColor = ref('#6750A4') const isDark = ref(false) const scheme = computed(() => { return generateMaterialScheme({ seedColor: seedColor.value, isDark: isDark.value }) }) const toggleTheme = () => { isDark.value = !isDark.value } </script>总结 kh-material-color 插件为 uniapp/uniappx 开发者提供了一个强大而灵活的工具，以遵循 Material Design 3 规范的方式管理应用色彩。通过简单的 API，你可以快速生成动态色彩方案，并轻松适应深色和浅色模式。 无论你是构建全新的应用，还是希望将现有项目升级到 Material Design 3，这个插件都能节省大量时间，并确保设计的一致性。 如果你有任何问题或反馈，欢迎在博客或插件市场留言。 支持与赞赏 如果你觉得本插件解决了你的问题，可以考虑支持作者： 支付宝赞助微信赞助支付宝赞助图片微信赞助图片相关链接 Material Design 3 官方文档 Uniapp 官网 UTS 插件开发文档
-
UTS编写字符串编解码/加密插件（安卓及鸿蒙端） 全局说明 编写说明 uts在安卓端编译为kotlin，所以，使用可以使用安卓自带库+kotlin的方法来实现 uts在鸿蒙端编译为ArkTs，ArkTs和UTS很相似，包括一些方法都一样，所以可以直接从ArkTs的文档里复制代码，稍微修改即可使用。 使用的库 安卓端 import MessageDigest from 'java.security.MessageDigest'; import BigInteger from 'java.math.BigInteger'; import Base64 from 'java.util.Base64'; 鸿蒙端 import util from '@ohos.util'; import { cryptoFramework } from '@kit.CryptoArchitectureKit';插件接口定义 /** * interface.uts * uts插件接口定义文件，按规范定义接口文件可以在HBuilderX中更好的做到语法提示 */ /** * 哈希算法枚举 */ export type HashAlgorithm = | "MD5" | "SHA1" | "SHA224" | "SHA256" | "SHA384" | "SHA512" /** * 哈希加密返回结果 */ export type HashResult = { hash: string } /** * 哈希加密函数定义 */ export type HashFunction = (input: string, algorithm: HashAlgorithm) => string1. Base64编解码 安卓端 /** * BASE64编码方法 * * @param input 输入字符串 * @return BASE64加密后的字符串 */ export const Base64Encode = function (input: string) : string { try { // 将字符串转换为字节数组 // toByteArray()为kotlin的方法 const inputBytes = input.toByteArray(); // 使用Base64编码器进行编码 const encodedBytes = Base64.getEncoder().encodeToString(inputBytes); // 将编码后的字节数组转换为字符串 return encodedBytes; } catch (e) { console.error("BASE64加密错误:", e); return ""; } } /** * BASE64解码方法 * * @param input 输入字符串 * @return BASE64解密后的字符串 */ export const Base64Decode = function (input: string) : string { try { // 将Base64字符串转换为字节数组 const decodedBytes = Base64.getDecoder().decode(input); // 将Java字节数组转换为UTS字符串 return new String(decodedBytes); } catch (e) { console.error("BASE64解密错误:", e); return ""; } } 鸿蒙端 /** * BASE64编码方法 * * @param input 输入字符串 * @return BASE64加密后的字符串 */ export const Base64Encode = function (input: string) : string { let textEncoder = new util.TextEncoder("utf-8"); let uint8Array = textEncoder.encodeInto(input); let base64Helper = new util.Base64Helper(); return base64Helper.encodeToStringSync(uint8Array); } /** * BASE64解码方法 * * @param input 输入字符串 * @return BASE64解密后的字符串 */ export const Base64Decode = function (input: string) : string { let Base64Helper = new util.Base64Helper(); let arr = Base64Helper.decodeSync(input) let textDecoder = util.TextDecoder.create('utf-8'); return textDecoder.decodeToString(arr); } 消息摘要计算 HASH加密使用统一方法，包含MD5、SHA1、SHA224、SHA256、SHA384、SHA512 安卓端 /** * 统一哈希加密方法 * * @param input 输入字符串 * @param algorithm 哈希算法枚举 * @return 哈希加密后的十六进制字符串 */ export const hash : HashFunction = function (input : string, algorithm: HashAlgorithm) : string { try { // 创建MessageDigest实例 const md = MessageDigest.getInstance(algorithm); // 输入数据转化为字节数组 const dataArray = input.toByteArray() // 计算哈希值 const hashBytes = md.digest(dataArray); // 转换为十六进制字符串 const result = BigInteger(1, hashBytes).toString(16) return result; } catch (e) { // 方法出错时返回空字符串 console.error(`${algorithm}加密错误:`, e); return ""; } }鸿蒙端 /** * 统一哈希加密方法 * * @param input 输入字符串 * @param algorithm 哈希算法枚举 * @return 哈希加密后的十六进制字符串 */ export const hash : HashFunction = function (input : string, algorithm: HashAlgorithm) : string { try { // 创建哈希实例 let md = cryptoFramework.createMd(algorithm); // 使用同步方法更新数据 let textEncoder = util.TextEncoder.create('utf-8'); let dataBlob : cryptoFramework.DataBlob = { data: textEncoder.encodeInto(input); }; md.updateSync(dataBlob); // 使用同步方法计算摘要 let mdResult : cryptoFramework.DataBlob = md.digestSync(); // 转换为十六进制字符串 let result = Array.from(mdResult.data).map(byte => byte.toString(16).padStart(2, '0')).join(''); return result; } catch (e) { // 方法出错时返回空字符串 // console.error(`${algorithm}加密错误:`, e); return ""; } }规范调用方法 这里安卓端和鸿蒙端相同 // MD5加密 export const MD5 = function (input: string) : string { return hash(input, 'MD5') } // SHA1加密 export const SHA1 = function (input: string) : string { return hash(input, 'SHA1') } // SHA224加密 export const SHA224 = function (input: string) : string { return hash(input, 'SHA224') } // SHA256加密 export const SHA256 = function (input: string) : string { return hash(input, 'SHA256') } // SHA384加密 export const SHA384 = function (input: string) : string { return hash(input, 'SHA384') } // SHA512加密 export const SHA512 = function (input: string) : string { return hash(input, 'SHA512') }使用方法 import * as KhCrypto from '@/uni_modules/kh-crypto' const input = ref<string>('待加密字符串'); const output = ref<string>('') // base64编码 output.value = KhCrypto.Base64Encode(inputText.value) // base64解码 output.value = KhCrypto.Base64Decode(inputText.value) // MD5加密 output.value = KhCrypto.MD5(inputText.value) // SHA1加密 output.value = KhCrypto.SHA1(inputText.value) // SHA224加密 output.value = KhCrypto.SHA224(inputText.value) // SHA256加密 output.value = KhCrypto.SHA256(inputText.value) // SHA384加密 output.value = KhCrypto.SHA384(inputText.value) // SHA512加密 output.value = KhCrypto.SHA512(inputText.value)插件源码 kh-crypto - DCloud插件市场 参考文档 在uts中如何将字符串转换为ByteArray Base64Helper - 鸿蒙开发API参考 消息摘要计算介绍及算法规格 - 鸿蒙开发指南
-
全新任务管理平台（流量主变现系统）开源 项目简介 项目结构 接口管理：PHP + Mysql 后台管理系统：Vue3 + ts + TDesign 任务单页：Vue3 小程序：uniapp + Vue2 变现说明 基础流程： 后台创建任务 复制任务链接 分享到社群或私域 用户打开任务页面 跳转到小程序观看广告 观看广告 下发奖励 收入说明 微信小程序官方广告收入 其他推广/广告收入 支持的奖励类型 链接奖励(适用于下载链接、付费文章等) 文本奖励(适用于通用卡密、密钥等) 卡密奖励(适用于一次性卡密) 系统演示 演示站点 空痕任务管理系统 后台数据为静态演示数据，无法更改 演示图片 管理后台 控制台图片 任务单页 任务单页图片 小程序 小程序图片 安装教程 管理后台 安装依赖 npm install 构建项目 npm run build 新建站网站及数据库 推荐：PHP 8.0 推荐：Mysql 5.7 开启SSL(必须) 配置伪静态 location / { try_files $uri $uri/ /index.html; } location /api/ { if (!-e $request_filename) { rewrite ^/(.*)$ /$1.php last; } } 配置跨域 配置跨域教程 请参考第1种解决方法 导入数据库 导入/后台/数据库/task_dev_xma_run.sql到Mysql数据库 修改/后台/api/config.php 管理账户密码 JWT配置(密钥、过期时间) 数据库配置 上传后台代码 上传/后台/dist目录中的全部文件到网站根目录 上传/后台/api目录到网站根目录 任务单页 安装依赖 npm install 修改/任务单页/src/App.vue中的接口信息 修改后台地址 修改视频教程地址 构建项目 npm run build 新建网站 静态网站 开启SSL(必须) 上传任务单页代码 上传/任务单页/dist目录中的全部文件到网站根目录 小程序 使用HbuildX打开小程序 在manifest.json中获取新AppID 修改/pages/user/view中的后台地址 修改/pages/user/work中的二维码 发行到微信小程序 在微信开发者工具中上传代码 登录微信小程序后台配置 配置request合法域名 https://task.dev.xma.run（更改为自己的后台地址） https://www.duitang.com 配置downloadFile合法域名 https://c-ssl.duitang.com 配置明文scheme拉起此小程序 pages/user/view;pages/user/work 代搭建/教学 请联系微信：KongHen02 项目地址 GitHub
-
修复RuleApp在微信环境不能设置头像问题 问题说明： 问题：RuleApp在微信内无法获取用户头像，且用户无法设置 产生原因：微信修改用户信息获取规则 修复方法： 新增微信环境设置头像按钮 <!-- #ifdef MP-WEIXIN --> <button class="cu-btn bg-gradual-blue radius" open-type="chooseAvatar" @chooseavatar="avatarUpload"></button> <!-- #endif -->修改演示图片 修改avatarUpload函数，并新增uploadAvatarToSever函数 uploadAvatarToSever(path) { const uploadTask = uni.uploadFile({ url: that.$API.upload(), filePath: path, // header: { // "Content-Type": "multipart/form-data", // }, name: 'file', formData: { 'token': token }, success: function(uploadFileRes) { setTimeout(function() { uni.hideLoading(); }, 1000); var data = JSON.parse(uploadFileRes.data); //var data = uploadFileRes.data; if (data.code == 1) { // uni.showToast({ // title: data.msg, // icon: 'none' // }) that.avatar = data.data.url; that.avatarNew = data.data.url; localStorage.removeItem('toAvatar'); that.userEdit(); //console.log(that.avatar) } else { uni.showToast({ title: "头像上传失败，请检查接口", icon: 'none' }) } }, fail: function() { setTimeout(function() { uni.hideLoading(); }, 1000); } }) }, avatarUpload(data) { var that = this; var token = ""; if (localStorage.getItem('userinfo')) { var userInfo = JSON.parse(localStorage.getItem('userinfo')); token = userInfo.token; token = userInfo.token; } // #ifdef APP-PLUS || H5 base64ToPath(data) .then(path => { that.uploadAvatarToSever(path) }) .catch(error => { console.error("失败" + error) }) // #endif // #ifdef MP-WEIXIN const path = data.detail.avatarUrl that.uploadAvatarToSever(path) // #endif },修复结果： 修复后，在微信内编辑用户信息页面会有设置头像按钮，点击按钮会调用微信官方获取头像接口，选择微信头像或者设置其他头像接口，返回用户选择的头像临时路径，使用data.detail.avatarUrl获取临时路径，调用uploadAvatarToSever函数上传到服务器。 完整代码： GitHub - RuleApp（KongHen） 原项目地址： GitHub - RuleApp（buxia97）
-
UTS引用原生jar包进行原生插件开发 也是踩了很多坑。主要的坑有两个，一个是引入jar包的问题，另一个就是jar包的使用问题(这个还得看包的文档 :@(吐血倒地) ) 下载jar包 我要用的是jaudiotagger包，引来实现对音乐标签信息的修改，包下载地址：https://central.sonatype.com/artifact/net.jthink/jaudiotagger/versions 我用的是最新的3.0.1版本，下载图中这个 lvkwkzpv.png图片 创建插件 下面是步骤： 创建插件参考官方教程步骤，这个很详细 地址： https://doc.dcloud.net.cn/uni-app-x/plugin/uts-plugin.html#%E5%88%9B%E5%BB%BAuts%E6%8F%92%E4%BB%B6 引入jar包 将你下载的jar包移动到libs目录下，如图 lvkwqa8k.png图片 导入包中的方法 java导入的方法 import org.jaudiotagger.audio.flac.FlacFile; import org.jaudiotagger.audio.generic.AudioFile; import org.jaudiotagger.audio.generic.AudioFileIO; import org.jaudiotagger.tag.FieldKey; import org.jaudiotagger.tag.Tag; import org.jaudiotagger.tag.images.Artwork;ts导入的方法 import FlacFile from "org.jaudiotagger.audio.flac.FlacFile"; import AudioFile from "org.jaudiotagger.audio.generic.AudioFile"; import AudioFileIO from "org.jaudiotagger.audio.generic.AudioFileIO"; import FieldKey from "org.jaudiotagger.tag.FieldKey"; import Tag from "org.jaudiotagger.tag.Tag"; import Artwork from "org.jaudiotagger.tag.images.Artwork";就这样导入就可以了，在Hbuilderx中，有代码提示，也可以不自己导入，写完代码，点击代码提示，又自动修复功能，当然，自动修复导入的不完全正确。 使用方法 测试的时候要打包自定义基座进行测试 使用的话，导入后就当ts方法写就行 有些报错是编译器bug不用管 // 引入java文件类 import File from "java.io.File"; import Files from "java.nio.file.Files"; // 引入jaudiotagger包 import AudioFile from "org.jaudiotagger.audio.AudioFile"; import AudioFileIO from "org.jaudiotagger.audio.AudioFileIO"; // import { Tag, FieldKey } from "org.jaudiotagger.tag"; import Tag from "org.jaudiotagger.tag.Tag"; import FieldKey from "org.jaudiotagger.tag.FieldKey"; // mp3封面相关 import StandardArtwork from "org.jaudiotagger.tag.images.StandardArtwork"; // falc封面相关 import FlacTag from "org.jaudiotagger.tag.flac.FlacTag"; import FileInputStream from "java.io.FileInputStream"; import PictureTypes from "org.jaudiotagger.tag.reference.PictureTypes"; /** * MusicInfo * 音乐信息类型 * */ type Tags = { audio: string; title: string; artist: string; album: string; cover: string; } export class KhMusicTag { /** * 私有变量 * tags { Tags } 标签信息 * action { boolean[] } 封面图片路径 * */ /** * writeMp3Tag * 写入mp3的封面图 * @param { string } cover 封面图路径 * * @returns { Boolean} 返回写入结果 */ public writeMp3Tag(info: Tags): boolean { try { // 读取音频文件 const audioFile = AudioFileIO.read(new File(info.audio)); const mp3Tag: Tag = audioFile.getTagOrCreateAndSetDefault(); // 设置歌曲名，歌手名，专辑名 mp3Tag.setField(FieldKey.TITLE, info.title); mp3Tag.setField(FieldKey.ARTIST, info.artist); mp3Tag.setField(FieldKey.ALBUM, info.album); // 创建封面图实例 const coverImage: File = new File(info.cover); // 创建Artwork对象 const artwork: StandardArtwork = new StandardArtwork(); artwork.setBinaryData(Files.readAllBytes(coverImage.toPath())); artwork.setMimeType("image/jpg"); // 根据实际封面图片类型设置 artwork.setPictureType(3); // 删除旧的封面图 mp3Tag.deleteArtworkField(); // 写入封面图 mp3Tag.setField(artwork); // 写回文件 audioFile.commit(); return true; } catch(e) { return false; } } /** * writeFlacCover * 写入flac的封面图 * @param { Tags } info 标签信息 * * @returns { Boolean} 返回写入结果 */ public writeFlacTag(info: Tags): boolean { try { // 读取flac文件，并强制申明为FlacTag类型 const audioFile = AudioFileIO.read(new File(info.audio)); const flacTag = audioFile.getTag() as FlacTag; // 设置歌曲名，歌flac手名，专辑名 flacTag.setField(FieldKey.TITLE, info.title); flacTag.setField(FieldKey.ARTIST, info.artist); flacTag.setField(FieldKey.ALBUM, info.album); // 读取封面图为字节流 const imageFile: FileInputStream = new FileInputStream(info.cover); const imagedata: ByteArray = new ByteArray(imageFile.available()); imageFile.read(imagedata); // 写入封面图 flacTag.setField(flacTag.createArtworkField(imagedata, PictureTypes.DEFAULT_ID, "image/jpg", "KHMD", 200, 200, 24, 0)); // 写回文件 audioFile.commit(); return true; } catch (e) { return false; } } }参考文献： 依据于开源的java库jaudiotagger 地址：https://bitbucket.org/ijabz/jaudiotagger/src/master/ 文档：http://jthink.net/jaudiotagger/index.jsp 成品jar包下载地址：https://central.sonatype.com/artifact/net.jthink/jaudiotagger/versions 说明：建议查看源码中的testsrc中的示例，个人觉得比文档中的示例详细和有用
