全局字体替换 添加自定义字体 首先，你需要将自定义字体文件（如.ttf, .woff, .woff2等格式）添加到项目的静态资源目录，通常是src/assets下。 链接字体文件 接下来，在项目的主入口文件（通常是src/main.js）或者在public/index.html头部添加CSS链接，以加载字体文件。如果是在Vue CLI项目中，你可能需要在public目录下的index.html中添加： <link rel="stylesheet" href="<path-to-your-fonts-css>"> 或 import '@/assets/css/index.css' 这里的应该指向你创建的CSS文件，该文件包含了字体的@font-face规则。 编写@font-face规则 在你的CSS文件中，编写@font-face规则来定义自定义字体： @font-face { font-family: 'YourFontName'; src: url('<path-to-your-font-file>.woff2') format('woff2'), url('<path-to-your-font-file>.woff') format('woff'); font-weight: normal; font-style: normal; } 确保路径正确指向字体文件。 如： @font-face { font-family: 'NotoSans-SC'; /* 定义一个新的字体名称 */ src: url('/src/assets/font/NotoSans-SC.ttf'); /* 指定字体文件的URL和格式 */ font-weight: normal; /* 设置字体的粗细 */ font-style: normal; /* 设置字体的样式（如斜体） */ } 设置全局font-family 在Vue项目中，你可以通过在src/App.vue或全局样式文件（如src/styles/global.css）中设置font-family属性来全局应用自定义字体： body { font-family: 'YourFontName', sans-serif; } 这样，整个应用将使用YourFontName字体，如果该字体不可用，则回退到默认的无衬线字体。 使用自定义字体图标 引入字体图标库 对于字体图标，如Font Awesome或Iconfont，你同样需要将图标库的字体文件添加到项目中，并在CSS中定义使用规则。 在组件中使用字体图标 在Vue组件中使用字体图标时，可以像使用普通HTML元素一样使用标签，并添加相应的类名： <i class="fa fa-windows"></i> 确保你的CSS中包含了对字体图标的定义，如： .fa-windows:before { content: "\f1eb"; } 其中\f1eb是该图标在字体库中的Unicode字符编码。 字体格式比较 OTF (OpenType Font)： 特点：支持高级排版特性，如连字、替代字符。 优点：兼容性好，适用于复杂排版需求。 选择原因：适合需要高质量排版的项目。 TTF (TrueType Font)： 特点：广泛使用，支持大多数操作系统。 优点：良好的可读性，适合屏幕显示。 缺点：文件相对较大，不支持部分高级排版特性。 WOFF/WOFF2 (Web Open Font Format)： 特点：专为网页设计，基于压缩的 TTF/OTF。 优点：文件小，加载快，支持现代浏览器。 缺点：不兼容较旧的浏览器。 EOT (Embedded OpenType)： 特点：微软开发，主要用于旧版 IE 浏览器。 优点：支持 IE 浏览器。 缺点：逐渐被淘汰，不支持其他浏览器。

创建目标组件并添加目标元素 假设我们想在 About.vue 组件中滚动到某个特定的位置。我们可以在 About.vue 中添加一个具有唯一 id属性的元素 <div id="service" class="service"> <div class="service-text" > <div class="service-text1">24H在线</div> <div class="service-text2">真人客服，永不失联</div> <div class="service-text3">我们的真人客服7x24小时在线，随时响应您的需求。无论问题大小，迅速解决，确保您的使用体验无忧，永不失联。</div> </div> </div> 添加滚动到指定位置的代码 <script> export default { methods: { scrollToElement(refID) { let time=setTimeout(()=>{ this.$nextTick(()=>{ let top=0; let targetElement=document.getElementById(refID); if(targetElement){ // 获取元素距离顶部的距离 top=targetElement.offsetTop; } if(top>0){ // 滚动到指定位置 window.scrollTo({ top: top, behavior: 'smooth' }); } clearTimeout(time); time=null; }) },300); }, } } </script> 最后，在你的 Home.vue 或其他组件中触发路由导航： <li><a href="javascript:void(0)" @click="scrollToElement('service')">联系我们</a></li>

如果图片资源不是来自于服务器，而是本地资源，那么就会遇到动态加载图片的问题。 在vue项目中，v-for显示的图片，导出时发现图片路径不对 在vue项目中，构建工具使用webpack，想要动态加载图片路径，只要用require()即可，但是如果工具是基于vite的话，vite是直接根据ES Modules的，它是没有require的，那怎么办呢？ <template v-for="(item, index) in tabbarData" :key="index"> <div class="tab-bar-item"> <img :src="require(item.image)"> <div class="text">{{ item.text }}</div> </div> </template> 这个时候需要用到new URL()，它会返回一个url对象，这个对象中有href属性，包含完整的URL。 <div class="price-feature-item" v-for="(v,i) in priceFeatureList" :key="i" > <div class="price-feature-item-content"> <div class="price-feature-item-img"> <img :src="getAssetsImg(`${v.img}`)" /> </div> <div>{{v.desc}}</div> </div> </div> 具体的URL详情可以查阅mdn文档，这里只解释一下怎么解决动态图片问题。 URL - Web API 接口参考 | MDN New URL（）：这里是传两个参数，参数一是相对路径（相对于当前文件），也就是我们要动态加载的图片的路径；参数二传的是当前文件的地址，使用import.meta.url获取。 简单来说就是根据第二个参数的当前文件路径来找到第一个参数的相对文件路径。 为了方便使用，封装到工具函数中，记得注意一下相对路径的改变： export const getAssetsImg = (image) => { return new URL(`../assets/img/${image}`,import.meta.url).href } 在外部引入即可 import { getAssetsImg } from '../../utils/load_assets';

一、php方面 1.需要开启openssl扩展 2.注：php 的 mcrypt_ 函数簇在 7.1.0 版本中开始 deprecated，并在 7.2.0 版本中彻底废弃。其实在 2015 就已经开始建议大家使用 openssl_encrypt/openssl_decrypt 来代替 mcrypt_encrypt/mcrypt_decrypt，缓冲了 N 久，这一天终于在 7.2.0 版本上到来了。 openssl_decrypt 的 OPENSSL_ZERO_PADDING默认会补零到16位 aes-128-cbc: 表示16位的 method 长度的问题，密码学方式我们用的最多的有两种，AES-128-CBC 与 AES-256-CBC 字符串的长度问题 1 bit 位 = 1 二进制数据 1 byte 字节 = 8 bit 1 字母 = 1 byte = 8 bit 128位/8=16字节=16字符 192位/8=24字节=24字符 256位/8=32字节=32字符 也就是说KEY 的长度是根据AES-128-CBC 与 AES-256-CBC 变换的。使用 AES-128-CBC 时，key的长度应该为16位，使用 AES-256-CBC时，key的长度应该为32位。 <?php // 需要加密的字符串 $plaintext = "hello"; // 加密密钥（必须是16、24或32个字符长，对应AES-128、AES-192、AES-256） $key = "examplekey123456"; // 请确保密钥的安全性 // 初始化向量（IV），必须是16个字符长 $iv = openssl_random_pseudo_bytes(openssl_cipher_iv_length('aes-128-cbc')); // 加密字符串 $encrypted = openssl_encrypt($plaintext, 'aes-128-cbc', $key, 0, $iv); // 如果需要，可以将IV和密文一起存储或传输（通常使用base64编码以便于存储和传输） $encrypted_with_iv = base64_encode($iv.$encrypted); echo "加密后的字符串（包含IV）: " . $encrypted_with_iv . ""; // 将加密字符串（包含IV）解码为原始二进制数据 $decoded = base64_decode($encrypted_with_iv); // 提取IV（前16个字符）和密文（剩余部分） $iv = substr($decoded, 0, 16); $encrypted = substr($decoded, 16); // 解密字符串 $decrypted = openssl_decrypt($encrypted, 'aes-128-cbc', $key, 0, $iv); echo "解密后的字符串: " . $decrypted; ?> 二、js方面 cryptojs：下载地址 https://code.google.com/archive/p/crypto-js/downloads cryptojs：文档说明 CryptoJS - CryptoJS cryptojs：在线调试工具 在线加密解密 <!-- 加密js--> <script src="__STATIC__/common/js/crypto/rollups/aes.js"></script> <script src="__STATIC__/common/js/crypto/components/pad-zeropadding.js"></script> /** * 加密 */ function doEncrypt(data) { if (data == '' || data == undefined) { return data; } let key = CryptoJS.enc.Latin1.parse('F79JF2tNdHLW4bid'); let iv = CryptoJS.enc.Latin1.parse('bk4h1mv84RCOdyn2'); //加密 return CryptoJS.AES.encrypt(data, key, {iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.ZeroPadding}); } 转自：https://blog.csdn.net/qq_25275355/article/details/116918996

上一个文章，在cocos creator中加载解压zip包没问题，但是在输出到微信小游戏后，在小游戏工具中运行后提示找不到这个插件。 折腾了好久，后来算了，不能用插件，我就不插了，直接用 在js文件头加上 const JSZip = require('jszip'); 下面的代码照常使用就行。 我的小游戏希望大家批平指正

jszip的实际项目应用 游戏中有大量配置的情况下，文件会变得非常大，所以有些游戏会采用zip包压缩解压 例如我的这个成语填空游戏，配置文件加一起都有3m了，将游戏配置json文件一起压缩成zip包，加载后进行解压使用 在cocos中使用jszip 首先，在github上下载jszip库 下载地址 将下载的jszip.min.js放在项目assets/libs下，将jszip.js放在项目根目录的libs下。 (jszip.js在dist中) 然后将游戏的配置文件，多个json，压缩成zip包，放在resources/config下 代码中加载zip文件，并解析获取其中的游戏物品配置idiom.json loadZip() { let self = this; let url = cc.url.raw('resources/config/config.zip'); cc.loader.load({ url: url, type: "binary" }, (err, zipData) => { //2.1.3在安卓平台下会出现load不到资源的情况 if (err) { let httpUrl = `资源服务地址${url}`; console.log('loadConfigZip httpUrl: ', httpUrl); let oReq = new XMLHttpRequest(); oReq.open("GET", httpUrl, true); oReq.responseType = "arraybuffer"; oReq.onload = function (oEvent) { let arrayBuffer = oReq.response; // 注意:不是oReq.responseText if (arrayBuffer) { console.log('LoadConfig::unzip 0'); self.unzip(arrayBuffer); } }; oReq.send(null); } else { console.log("unzip unzip"); this.unzip(zipData); } }); }, unzip(zipData) { let self = this; let newZip = new JSZip(); // 因为将jszip导入为插件，所以可以全局直接访问 newZip.loadAsync(zipData).then(zip=>{ // console.log(zip); let fileList = zip.files; for(let filename in fileList){ zip.file(filename).async('string').then(data=>{ let json = JSON.parse(data); // console.log(JSON.stringify(json)); console.log(filename,json); if( filename == "idiom.json" ){ self.idiomDatas = json; self.readyGame(); } }); } }); }, 下面是我的微信小游戏，希望大家批评指正