又年~-CSDN博客

原创企业微信网页开发本地调试方式

企业微信网页应用开发中，怎么在客户端内调试和关联打开本地服务。

2023-08-31 10:23:03 5644 1

在企业级项目开发中，一般使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题，比如接口请求地址，不同环境的请求路径前缀都是不同的。变量对象中添加的是需要根据不同环境配置的变量，比如后端服务请求地址，小程序。但在很多企业中，可能就2个环境并不能满足实际场景，同时在开发微信小程序时，测试和生产都是不同的。一般小程序也就测试和生产两个环境，环境太多都要重新申请账号也麻烦。扩展节点，实现自定义条件编译平台，让每种编译具有不同环境标识。再扩展vite.config.js配置文件，用环境标识判断重写。

2023-08-17 11:24:57 8361 2

原创微信小程序中的SM2加密

微信小程序等保测试中，防止部分接口通过修改接口参数可以获取到敏感信息，使用国密SM2对参数进行统一加密。

2023-05-24 13:52:14 2977 2

原创高德地图自定义标记点marker缩放偏移问题

在使用高德地图点标记功能，自定义图标或内容时，如果对地图进行缩放，可以发现会此时图标会存在偏移，定位不准现象，如下图造成这种现象的原因其实是对标记点的偏移量offset属性理解不准确导致，通过查阅官方文档可知，offset默认值是[0,0]，意思就是定位中心点是在图标的左上角，带着此种思维再去看刚才的效果就可以发现，其实是没有偏移的，只是图标定位点在底部，缩放时造成的视觉上错觉，如下图我们可以看到，如果把视觉焦点聚焦在左上角[0,0]的位置，其实定位一直是准确的。造成这种误导还有个原因就是当我们使用高德默认

2022-06-13 11:50:31 6671 1

原创基于indexDB的web离线方案，APP断网也能用

需求背景公司一个涉及到公路巡检的移动端项目，客户提出在有些情况下，比如隧道附近巡检时网络很差，甚至完全没网，客户之前选择的是拍照巡查完后补录相关信息，但还是希望这种情况也能够使用我们软件进行实时上报。虽然一直在吐槽产品为啥接了这个需求，但身为一个工具人还是只能老老实实寻求解决方案。技术选型要实现弱网能使用，其实就是做离线使用功能，如果时缓存本地，有网时上传到服务器。那么现在就是要考虑怎么做本地缓存。前端本地缓存有4种方式：cookie、localStorage、sessionStorage、Inde

2022-04-26 11:25:09 1685

原创微信公众号网页开发，登录授权和微信支付

微信公众号的网页开发基本和H5移动端开发一致，主要是涉及到网页授权获取用户信息和使用js-sdk获取微信原生能力支持。开发前准备申请一个测试号：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login用自己微信扫码登录，然后扫码关注当前测试号，这里注意js接口安全域名和网页授权回调域名，需要配置为当前项目地址。使用测试号时用ip即可，但是线上必须是域名。网页授权类似把系统自己的登录体系移除，通过微信授权方式获取微信用户信息。

2021-12-27 14:45:27 1125

原创 element-ui动态表单和验证

在使用element-ui开发中，经常会用到对动态创建的表单进行字段验证，比如新增多个类似卡片的表单，里面的字段需要做验证，此时就要使用到动态表单验证，官方文档写的有示例，但是不够清晰。除了官方示例，还可以使用循环生成多个form实现该需求。第一种官方示例：一个Form多项下面以实际项目中的代码为例：<el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" style="width: 90%

2021-10-19 13:58:38 5750 1

原创 js上传图片时添加水印

前言在实际业务开发中，经常会遇到上传图片时要添加上自己网站水印，这个水印各种类型都有，这里主要讲下我在开发中，客户的需要在上传图片时添加上当前录入表单的一些信息，方便后期直接查看图片追溯信息。先放下最终实现的上传成功后缩略图和预览图：实现该功能主要有2种：原生的canvas实现和使用html2canvas库。当前项目是基于element-ui的一个vue项目，提供思路，代码仅供参考。原生的canvas其思路就是File对象–>img DOM元素–>转为canvas–>画水印图

2021-08-18 20:07:46 1902

原创高德地图使用vue组件自定义infoWindow信息窗口

项目背景在使用高德地图做地图相关开发时，经常会使用到标记点marker功能，如果业务较复杂，标记点需要增加自定义的信息窗口infoWindow，自定义信息窗口支持传入content参数，content 可以是 dom 对象，也可以是 html 识别的字符串。自定义最大的问题就是事件不好处理，比如关闭信息窗的点击事件。在官方的示例中，自定义使用的原生dom节点创建并添加事件，对于复杂场景，这样操作就显得较为复杂，可读性和拓展性都很差。这里可以使用es6的模板语法做html字符串拼接，把需要绑定事件的元素设

2021-03-10 15:17:00 7378 8

原创微信小程序中的位置授权，位置授权完整流程

在微信小程序开发中，很多时候要用到定位信息，特别是某些基于位置提供服务的小程序，没有定位就无法提供相应功能。再实际业务中，主要要考虑下面两点：1、在小程序中，如果用户首次拒绝了位置授权，那么再通过wx.getLocation获取位置信息时，是会直接走fail回调的。此时如果还想弹出授权，需要通过wx.openSetting调用设置位置授权功能。2、当手机没有开启GPS定位服务时，这时候也应该给用户友好的提示，如果继续使用需要打开手机GPS定位功能。下面代码是基于uniapp写的，如果使用小程序原生开发

2020-12-11 16:35:17 16457 3

原创前端API交互AES与RSA混合加密及在微信小程序中的使用

前端API交互AES与RSA混合加密及在微信小程序中的使用为了保证前端调用API的数据安全性，团队参考一些技术文档，选择使用AES和RSA对数据进行混合加密，保证数据安全性。主要思路如下：前后端分别生成各自的RSA秘钥对（公钥、私钥），然后互相交换公钥。前端发出请求时，在统一拦截器中做请求拦截，首先生成一个随机key（这里用的16位），然后用这个明文key对参数做AES加密，再用后端的公钥对这个key加密，此时可以得到一个加密的key和加密的参数，根据实际情况确定key是放在header还是也作为参数

2020-09-30 11:49:21 1662 5

原创 git常见异常处理

文章目录前言提交到缓存区之前（一）本地工作区文件恢复提交到缓存区之后，还未提交到本地仓库（二）撤销缓存区操作提交到本地仓库，还未提交到远程仓库（三）修改本地仓库提交信息（四）撤回本地仓库的提交（五）撤回本地仓库和缓存区的提交（六）撤回提交的错误文件（强烈建议别用）分支相关（七）修改分支名，实现无缝衔接（八）本地分支关联远程仓库分支（九）远程分支删除后，删除本地分支及关联（十）恢复误删除的本地分支Git 工具vim 常用命令前言Git 在工作中用的很多了，但是很多小伙伴都是会一些基本的提交流程，当使用过程

2020-07-28 09:35:55 598

原创 vue-element-admin头部快捷导航keep-alive缓存无效

公司的一个项目是基于vue-element-admin开发的，头部的快捷导航利用keep-alive可以做缓存处理，但是前提是路由的name和组件的name完全一致才能生效，还有就是该功能只能缓存到第二级，如果还有router-view则无法缓存这个组件，多层级的缓存需要把父和子组件的name都添加到include上，中间涉及边界太复杂就没有花时间尝试。虽然没有完美的方案，但有一个折中全局缓存方案：在AppMain.vue中把<keep-alive :include="cachedViews"&gt

2020-07-24 19:29:39 1715 4

原创 element-ui表格组件el-table二次简单封装，基本满足后台管理项目使用

背景在日常中后台管理系统开发中，表格是使用频率最高的组件之一，当系统或者里面的页面很多时，封装一个表格组件很有必要。本文基于element-ui的table组件进行二次封装，让组件进一步解耦，达到精简代码，提高可读性。如果要在项目中使用，建议直接使用文末测试过的的优化版本。封装目标api尽量和el-table一致，减少学习使用成本传入一个表头的配置项，通过该配置项动态生成el-table-columns标签支持自定义复杂表头具体步骤创建名为table的父组件，名为BaseTable的子组件

2020-07-21 18:58:59 4860 3

原创 element-ui中使用动态form表单验证

使用背景在使用element-ui开发中，经常会用到对动态创建的表单进行字段验证，比如新增多个类似卡片的表单，里面的字段需要做验证，此时就要使用到动态表单验证，官方文档写的有示例，但是不够清晰。部分代码演示下面以实际项目中的代码为例，里面为了自适应el-col代码可以忽略：<el-form ref="form" :model="form" :rules="rules" label-width="110px" size="small" style="width: 90%;">

2020-07-20 15:53:28 1776

原创 JavaScript中的垃圾回收

内存管理为什么需要内存管理在我们写代码过程中，如果不够了解内存管理机制，就会无意中写出不易察觉的内存问题性代码，这种代码多了以后，对我们的程序可能就会带来意想不到的bug。所以掌握内存管理还是很有必要的。内存由可读写单元组成，表示一片可操作空间。管理人为的去操作一片空间的申请、使用和释放。内存管理：开发者主动申请空间、使用空间、释放空间。在JavaScript中，内存管理比较特殊，是无法像别的语言一样有自己的api调用内存空间。但是依然可以通过脚本演示JS中内存管理的整个生命周期：//

2020-06-30 11:59:33 406

原创 vscode默认格式化和配置保存后格式化不一致，缩进4个字符无效问题

最近在使用vscode中开发vue项目时，只是配置了一个保存后自动格式化功能，但是保存格式化和手动一键格式化竟然规则还不一样，配置了缩进4个字符也是无效，html和css只缩进了2个字符，js缩进了4个，非常恼火。最后网上查询多次终于找到问题。在首选项设置中找到下面几个配置，取消勾选，再设置4个空格即可，如果还是无效，记得看下用户和工作区是否同步修改了。...

2020-06-07 14:53:30 5051

原创纯CSS做hover离开后的平滑过渡动画

背景实际项目中，很多时候会用hover做鼠标进入目标元素动画，此时如果想让动画有过渡效果，可以使用css3属性trasition。但是离开之后动画就立即停止了，体验效果并不好。有些同学就想到用onmouseover和onmouseout事件来处理动画过渡，虽然可行，但是太麻烦，我们要秉承着能用css解决的问题绝对不用js解决。解决方案其实这里把hover的过渡css也在原来样式里写一份即可。这里要特别注意一点，transition的第一个变换属性如果要写，一定要写all，或者省略默认是all。比如下面

2020-05-22 14:31:13 9800

weixin_43180359的博客