找到
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封装uni.request请求拦截器 UTS封装请求拦截器主要就是数据类型的问题 简单封装示例：每次请求在请求头中携带设备信息 export type RequestParams = { url: string; method: RequestMethod; data?: string; header?: UTSJSONObject; timeout?: number; sslVerify?: boolean; withCredentials?: boolean; firstIpv4?: boolean; } export type RequestRoot = { code: number; msg: string; data?: any } export type RequestRes = { data?: any; error?: string; } // 获取系统信息 export const getSystemInfo = (): string => { const system = uni.getSystemInfoSync() // 返回app信息，依次为appid，系统名称，系统版本，app版本，设备id，使用____分割 return system.appId + "____" + system.osName + "____" + system.osVersion + "____" + system.appVersionCode + "____" + system.deviceId } // 发送请求并携带设备信息 export const sendRequest = (options: RequestParams): Promise<RequestRes> => { let info = getSystemInfo(); let header = {} if (options.header != null) { header = UTSJSONObject.assign(options.header as UTSJSONObject, { app: info }) }else { header = UTSJSONObject.assign(header, { app: info }) } // 返回一个Promise return new Promise((resolve, reject) => { uni.request<RequestRoot>({ // ...options, // 展开其他请求配置 url: options.url, method: options.method, data: options.data ?? "", header: header, timeout: options.timeout ?? 6000, sslVerify: options.sslVerify ?? true, withCredentials: options.withCredentials ?? false, firstIpv4: options.firstIpv4 ?? false, success: (res) => { const data = res.data as RequestRoot if(data.code == 200) { // 在请求成功时解析Promise resolve({ data: data.data } as RequestRes) }else { uni.showToast({ title: data.msg, icon: "error" }) reject({ error: data['msg'] as string } as RequestRes) } }, fail: (err) => { uni.showToast({ title: err.errMsg, icon: "error" }) // 在请求失败时拒绝Promise reject({ error: err.errMsg as string } as RequestRes) } } as RequestOptions<any>); }); } 使用示例 // 导入封装的函数 import { sendRequest } from "@/common/request.uts" // 定义存储的变量 // 1. 数组 const list = ref<UTSJSONObject[]>([]) // 2. 对象 // const list = ref<UTSJSONObject>({}) // 请求示例：使用Promise的方式调用sendRequest函数 sendRequest({ url: 'https://api.example.com/data', method: 'GET' }).then(res => { // 处理请求成功的结果 list.value = res.data as UTSJSONObject[] // 数组，对应的存储数组的变量 // list.value = res.data as UTSJSONObject // 对象，对应的存储对象的变量 console.log('处理结果:', data.value); }).catch(err => { // 处理请求失败的情况 console.error('请求失败:', err); }) 在模板中使用示例 注意使用变量中数据的方法只能为下标[""]方法，.操作符不可以，会报错 <view v-for="item in noticeList" :key="item['id']"> <image mode="widthFix" :src="item['image']"></image> <view> <text>{{ item['title'] }}</text> <text>{{ item['sort'] }}</text> </view> </view>说明： 因为书写习惯原因，我自己的所有后端返回数据均为json，返回对象参数如下 参数描述示例code错误码200: 成功, 400: 失败, 或其他msg请求结果说明请求成功/请求失败等data请求返回的结果json数组/对象示例如下： data为数组 { code: 200, msg: "请求成功", data: [] } data为对象 { code: 200, msg: "请求成功", data: {} } 对应封装的请求中的自定义类型RootRes(request.uts文件中)
