weixin_58129544的博客

原创 vue3+ts纯前端校验身份证号码是否真实+必填校验

u-input v-model="form.certificateNumber" placeholder="请输入身份证号" />certificateNo: [{ required: true, message: '请输入身份证号码', trigger: ['blur'] }, {<u-form-item label="身份证件号码:" required prop="certificateNumber">//区域数组中不包含需验证的身份证前两位。23: '黑龙江 ',15: '内蒙古',

原创 前端vue自定义鼠标指针的图标并且单击鼠标时点击的地方会出现烟花特效

/ 设置Y的偏移量。// 设置x的偏移量。//实现在某一个div内鼠标的指针形状呈自定义的图标。//自定义图标的路径。

原创 移动端uniapp下载文件并保存到手机，下载准考证保存到手机

console.log('文件下载失败，状态码：', downloadRes.statusCode);console.log('文件保存成功', saveRes.savedFilePath);url: 'http://example.com/file_url', // 要下载的文件的URL。url: 'http://example.com/file_url', // 要下载的文件的URL。console.log('文件下载失败', err);console.log('文件下载失败', err);

原创 微信小程序的支付功能，纯前端步骤，超级详细

步骤：项目的根目录下有个manifest.json文件，打开并在左侧目录找到APP SDK配置，找到支付模块，勾选微信支付appID填第一步从微信开放朋友获取的AppID。开通支付功能后可获取支付业务服务器配置数据：PARTNER（财付通商户号）、PARTNER_KEY（财付通密钥）、PAYSIGNKEY（支付签名密钥）4、将要下单的数据发送给后端（商品id、数量、单价加个、总价格等，具体和后端协商），然后后端会返回parnerid，prepayId和sign。2、在前端项目中的配置参数中打开支付功能。

原创 前端项目在本地localhost可以调取到拍照或麦克风等设备，但是在局域网内IP+端口号访问项目时访问不到设备

启用 chrome://flags/#unsafely-treat-insecure-origin-as-secure 这个设置后，Chrome 浏览器将不再显示与混合内容相关的警告，而是将所有不安全的来源都视为安全的来源。【chrome://flags/#unsafely-treat-insecure-origin-as-secure 是 Chrome 浏览器中的一个设置选项，它的作用是将不安全的来源（HTTP）视为安全的来源（HTTPS），从而避免浏览器的安全性警告，为文件访问file:///

原创 vue3子组件给父组件传参，父组件给子组件传参，在父组件中直接调用子组件中的某个方法

vue3子组件给父组件传参，父组件给子组件传参，在父组件中直接调用子组件中的某个方法

原创 npx react-native run-android下载很慢

在 Settings 窗口中，选择 "Apperance & Behavior"（外观和行为） -> "System Settings"（系统设置） -> "Android SDK"。通过上述步骤，您可以设置 Android SDK 的镜像源，从而加快 Android 开发中的下载速度。打开 Android Studio，并点击顶部菜单中的 "File"（文件） -> "Settings"（设置）。返回到 Android SDK 设置窗口，勾选您添加的镜像源，然后点击 "Apply"。

原创 Exception in thread “main“ java.io.IOException: Downloading from https://services.gradle.org/distrib

React Native 启动项目>npx react-native run-android时报错。\.gradle\wrapper\dists线面替换下载的gradel-xxx.zip包。下载 Gradle 分发文件时发生了超时，即下载过程耗时超过了预期而最终失败。在重新执行npx react-native run-android就好了。) 手动下载 Gradle 分发文件，然后在C:\Users\。手动下载：如果自动下载失败，您可以尝试从官方网站 (XXX:自己电脑的路径，一般都在c盘下。

原创 调取本地摄像头图拍照，并可对照片裁剪预览

button @click="cropImage">裁剪并预览

原创 vuecropper上传照片并可裁剪、预览插件

裁剪图片的地址（url、base64、blob）裁剪生成的图片格式（jpeg\png\webp）裁剪边框的大小信息（true、false）true->为了展示真实输出图片宽高。是否按照设备的dpr输出等比例图片。false->展示看到的截图框高度。裁剪生成的图片质量（0.1-1）截图框的宽高比 [宽，高]图片根据截图框输出的比例倍数。是否开启截图框宽高固定比例。截图框是否被限制在图片里面。默认生成截图框宽度（%）默认生成截图框高度（%）是否输出原图比例的截图。r：导出时背景颜色填充。

原创 基于vue3.0的开源项目

这是一些github上一些基于vue3.0的优秀的开源项目，非常赞。

原创 移动端富文本编辑器

1、在uniapp项目中安装所选库，例如通过npm安装Quill：npm install vue-quill-editor --save。2、在需要使用富文本编辑器的页面或组件中引入所选库，例如在script标签中添加以下代码：import VueQuillEditor from 'vue-quill-editor'export default {components: { VueQuillEditor}}3、在template标签中添加以下代码来渲染富文本编辑器：

原创 封装pc端富文本编辑器

// richTextEditorPlugin.js // main.js 最后，在组件中使用插件提供的富文本编辑器功能：

原创 什么是https加密协议？https和httpd的区别，一文搞懂

https加密协议(https用途、用法示例)、https和httpd的区别。HTTPS（Hypertext Transfer Protocol Secure）是HTTP的安全版本，它使用加密协议（SSL/TLS）来保护数据在浏览器和服务器之间的传输。举例： 当您在浏览器中输入https://www.baidu.com网址时，浏览器首先连接远程服务器并与之进行一系列加密握手协商，如果双方都认为安全加密通道已建立，浏览器和服务器才开始加密数据的传输。

原创 前端节流函数

一文搞懂节流，节流示例，时间戳实现方式，定时器实现方式

原创 上传图片视频组件，可以删除、全屏播放、画中画播放、倍速播放、下载，设置最大数量限制

上传图片视频组件，可以删除、全屏播放、画中画播放、倍速播放、下载，设置最大数量限制const maxMediaCount = ref(9); //最大数量const showaddFile = ref(true);const handleFileChange = (event) => { if (mediaList.value.length === maxMediaCount.value) { showaddFile.value = false;}

原创 封装可以上传照片和视频（都可回显可删除，视频可播放）的插件

原创 页面全屏（适应多个浏览器）

const toggleFullScreen = ()=> { const doc = window.document; const docEl = doc.documentElement; const requestFullScreen =

原创 websocket封装及在父组件中的详细用法实例

const getWSmsg= (msg: string) => {console.log（"websocket推送的消息：",msg）};

原创 封装一个判断身份证号码是否真实存在的方法

function isValidChineseID(id) { // 身份证号码为18位 if (id.length !== 18) { return false; } // 前17位必须全为数字，最后一位可以是数字或X if (!/^\d{17}(\d|X)$/i.test(id)) { return false; } // 加权因子 const weights = [7, 9, 10, 5, 8,

原创 手写签名并保存为base64格式

this.canvas.addEventListener("touchstart", function (e) { var touch = e.targetTouches[0]; var point = { x: touch.pageX || touch.clientX, y: touch.pageY || touch.clientY, };