找到
3
篇与
UTS
相关的结果
-
移植 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参考 消息摘要计算介绍及算法规格 - 鸿蒙开发指南
-
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中的示例，个人觉得比文档中的示例详细和有用
