web16888-CSDN博客

原创 css sticky定位失效原因

3.sticky定位的层的父级或者上级div的overflow不能为hidden；1.必须 top/left/right/bottom 值设置一个。html 等高度不能为100vh屏幕高度。

2024-02-18 17:44:27 720

原创 react：ffcreator中FFCreatorCenter视频队例

nextjs中怎样用ffcreator上一章有讲到过，这里不再详细说了，考虑多端口用，并发和处理视频合成等一系列对服务器压力过大的情况，这时候队列就有必要了。最近项目要求，一键生成房子的推荐视频，选几张图，加上联系人的方式就是一个简单的视频，因为有web端、小程序端，为了多端口用，决定放在服务器端生成。1.制作预设视频动画模板，意思是合成视频的模板提前预设好的，比如静态内容都提前准备好。2.用户选择想要的视频模板，然后根据视频模板添加动态内容，排队生成视频。目前用的是react中的nextjs来开发项目。

2024-01-06 13:56:22 802

原创 nodejs中ffcreator启动

【代码】nodejs中ffcreator启动。

2024-01-02 09:31:20 706

原创 FFCreator nextjs中制作方法

其中特别注意的是，文件路径为绝对路径，且不允许中文名称。api 中 video/create.js。

2023-12-21 12:09:12 513

原创 FFmpeg 版本gyan.dev和BtbN区别

当您使用以GPL许可证发布的FFmpeg版本时，您的应用程序也必须使用GPL或类似的兼容开源许可证发布。如果您使用GPL版本的FFmpeg，您不能将其包含在专有软件中，因为这将违反GPL的条款。是一种修改过的GPL版本，它允许FFmpeg以共享库的形式使用，而不要求使用FFmpeg的应用程序必须使用GPL许可证。Full-Shared版仅包含共享库和工具，不包含可执行文件和静态库，这使得开发者可以使用FFmpeg的功能实现自己的应用程序或集成FFmpeg到自己的项目中。

2023-12-21 10:18:21 1624 1

原创微信小程序 slider双向滑动，价格范围选择

有需求要做价格的范围选择，结果一看slider组件是单向的，不能用于范围选择，在网上一统找，找到了好几个组件，无一例外都是自己写的范围选择组件，其中有一个组件zyslider勉强可用，但是有可多问题，然后修修补补改成需求的样子：

2023-12-13 13:15:31 815

原创 js中css压缩方法

最近一直在做邮件html发送。其中邮件排版中，很多邮箱对css大小有要求，必需要有压缩css的办法，以前的做法是去各大在线压缩工具中压缩好后，再加入邮件html中。随着邮件html模板越做越多后，这个压缩就很繁琐，为了解决这类问题，就开始寻找css压缩的办法。纯js写的css压缩。

2023-07-31 13:26:32 717

原创 nextjs中组件事件绑定，父组件点击执行子组件函数，子组件点击执行父组件函数的方法

1.父组件点击按钮执行子组件函数的方法。2.子组件点击执行父组件函数的方法。

2023-07-26 11:45:57 888 1

原创 js中hexToRgba和rgbaToHex的方法

【代码】js中hexToRgba和rgbaToHex的方法。

2023-07-12 17:45:18 164

原创 next body exceeded 1mb limit

用nextjs写了一个发送邮件的接口api，邮件内容比较多，结构body post提交后，报“body exceeded 1mb limit”

2023-06-14 10:43:58 180

原创 nextjs 错误日志收集

最近用nextjs开发一款房产渠道管理的系统，从开始的项目管理，到价格单管理、订单管理、团队管理、中介管理、个人信息管理...等等功能越来越多的时候，前端偶现的问题不容易发现，造成了不必要的麻烦，就想搞个错误日志收集的，比较好奇收集的方法，最近chatgpt比较火后，随着问问ai方法，提供思路。通过重写这个页面，可以自定义错误处理逻辑，例如记录错误到日志系统、发送电子邮件或向用户显示友好的错误消息。在 Next.js 中，可以使用多种方式来收集错误日志，具体取决于您的需求和偏好。：如果您在页面中使用。

2023-04-26 15:47:41 946 1

原创微信小程序下载pdf更改名称并打开

【代码】微信小程序下载pdf更改名称并打开。

2023-04-25 18:01:17 473

原创微信小程序怎样在地图上投射不规则图形和圆形的方法

这其中有2篇文章讲解打卡功能，在地图上投射电子围栏或者范围，以不规则图形或圆形等，然后计算距离，超出范围不能打卡。这期讲解，在微信小程序中，怎样在地图上投射不规则图形和圆形的方法。geojson工具，很好用，可以手动可视化的在地图上画图形，并生成对应的geojson。

2023-04-24 17:55:20 332

原创 react ReactDOM.createPortal document is not defined

最近在写一个下拉框的组件，在pc是select，在移动端又变成Picker，在nextjs中怎么实现呢？pc端select，有特点就是按钮在哪里，就在哪里下拉，而Picker是点击按钮，在底层弹出全屏。这样写报document is not defined错误！实现这个功能就需要了解react在body中添加全局组件，让Picker放在最外层。

2023-04-21 11:09:22 348

原创 nextjs自己写ui中input框效果

【代码】nextjs自己写ui中input框效果。

2023-04-12 10:19:31 205

原创 gmail 邮件html的支持情况总结

3.gmail 不支持flex，display: flex支持，其他都不支持，grid也一样（建议用float）6.gmail对style里面的css质量大小有限制，建议压缩css放入html中。1.svg中都不支持，不能友好的显示在邮件中，会把viewbox的内容都过滤掉。邮件html代码需要兼容国外比较常见的邮箱，gmail，outlook等。其中gmail有很多不支持的css，不支持会直接过滤掉。7.邮件中的链接，样式要加!important覆盖样式。8.html中基本都能支持媒体查询，响应式布局。

2023-04-10 17:54:40 857

原创 openai文本补全chatgpt，用nextjs以流输出结果的方法二

上一篇讲到openai文本补全功能，nextjs给出参考的例子，但是这个例子有很多弊端，不好用，所以又查找大量资料后，用axios可以实现流的输出。openai生成文本过程比较慢，等待时间长，用流输出可以快速输出内容（经测试这个速度是可以接受的）。

2023-04-10 16:32:48 442

原创 ChatGPT文本补全Text completion API中nextjs中stream输出的方法

chatGPT的强大已经火起来了，其中的文本补全Text completion API在nextjs中已流的方式，像打字的效果，官方api告诉我们需要将请求参数stream:true。

2023-04-10 15:39:04 509

原创 css3 上下两端对齐和左右两端对齐

css3 上下两端对齐和左右两端对齐，经常用到，记录一下。

2023-03-29 14:57:11 591

原创 openAI文本补全Text completion

因有openai的npm包，本着npm运行快的原则，nextjs上直接用的openai npm方法进行讲解。OpenAI其主要目标，包括制造“通用”机器人和使用自然语言的聊天机器人。今天主要讲解react中的nextjs，怎样使用文本补全。这两种方法在nextjs中都是有效的。

2023-02-28 14:42:46 424

原创 GPS定位，判断坐标是否在geojson里面

计算地图中一个点是否在某一区域范围之内

2022-12-27 13:13:07 588

原创 GPS定位：计算2个坐标的距离

制作打卡的功能，从GPS获取到坐标，公司的坐标，计算中间的距离的方法，不仅计算距离，还要求用geojson的格式画一个圆，展示在地图上

2022-12-27 12:16:29 763

原创 Navigator.geolocation GPS定位

Navigator.geolocation GPS定位

2022-12-27 11:52:53 398

原创 ‘create-next-app‘ 不是内部或外部命令，也不是可运行的程序或批处理文件。

'create-next-app' 不是内部或外部命令，也不是可运行的程序或批处理文件。

2022-10-10 13:15:07 1645

原创 npm install npm ERR ERESOLVE

npm install

2022-05-11 10:40:51 280 1

原创 A component is changing an uncontrolled input to be controlled. This is likely caused by the value

A component is changing an uncontrolled input to be controlled. This is likely caused by the value

2022-04-02 15:07:52 3078

原创微信小程序 hover-class=“none“无效

hover-class="none"

2022-03-01 10:46:23 576

原创微信小程序禁止遮罩层滚动

catchtouchmove="true"

2022-03-01 10:17:43 286

原创微信小程序下载pdf更改名称并打开

//url=https://xxxx.pdf wx.request({ url: url, data:data, responseType:"arraybuffer", success (res) { if(res.header["Content-Type"].indexOf("application/pdf")!=-1){ var save = wx.getFileSystemManager(.

2022-02-25 12:17:34 1253

原创 `node-pre-gyp install --fallback-to-build`的解决办法

npm install -g node-gyp //windowssudo npm install -g node-gyp //linux

2021-11-19 10:49:42 13980 3

原创微信小程序 base64的图片保存到相册

var imgsrc="base64图片内容" var save = wx.getFileSystemManager(); var number = Math.random(); let filePath = wx.env.USER_DATA_PATH + '/pic' + number + '.png' save.writeFile({ filePath: filePath, .

2021-05-13 16:49:36 497

原创 js 正则匹配，px转rpx的程序

经常制作小程序页，并可能要制作和小程序页一样的h5页面，所以所有编写以px为主，但是小程序是rpx，（px转rpx，1px=1.8rpx）；所以就自己写了一个程序，批量替换并计算成rpx的程序，自己写的不喜勿喷哦！欢迎和我分享交流更多好用的工具和程序var css=`.project_li_h2{ font-size: 16px; font-weight: bold; margin-bottom: 5px;}.project_li_type{ display:

2021-05-11 09:37:31 914 2

原创微信公众号跳转App-开放标签，基于next.js

微信开放标签是微信公众平台面向网页开发者提供的扩展标签集合。通过使用微信开放标签，网页开发者可安全便捷地使用微信或系统的能力，为微信用户提供更优质的网页体验。说白了就是公众号跳转APP官方文档：开放标签https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22《微信内网页跳转APP功能》https://developers.weixin.qq.com/doc/oplatform/M..

2021-04-02 09:46:42 3366 1

原创微信小程序6位验证码输入框、隐藏光标、letter-spacing失效

微信小程序6位验证码输入框、隐藏光标、letter-spacing失效有需求要做6位验证码框如下图：开始分别用6个输入框做这个6个数字，发现在手机上有延时不快速，而且删除部分数字会出问题。之后想到一个办法：用一个透明input和假的6个框叠起来。1.透明input用于用户输入数字2.6个假的框用于展示数字。这其中遇到一个棘手的问题，iPhoto手机上如图：输入的字是隐藏了，光标没法隐藏。为了解决此问题想了以下办法：1.更改光标颜色，设置透明（没用）input

2021-03-31 17:43:29 2528

原创 css写法批量更改css-module模式，vscode 正则匹配批量替换

采用next.js开放网站，之前一直用官方插件next-css来开发，突然在next版本10.0.6以上版本的Webpack大的变动以外，把next-css给弃用，真是头大啊。然后想将网站更换css-module模式。就要求将className="project_headerbox_left"//更换为className={styles.project_headerbox_left}的样式一个一个的改，工作量巨大。所以找到了，vscode里面正则匹配批量替换的功能：clas

2021-03-25 14:06:49 675

原创微信小程序：子组件给父组件传值

子组件中加入：this.triggerEvent('loginStep', 2)父组件中：index.json中引入{ "usingComponents": { "login":"/component/login/login" }, "navigationBarTitleText": "个人中心"}index.wxml中绑定组件（在组件标签上，用“bind:子组件的事件名=父组件事件名”）<login wx:if="{{isauthSetting!=

2021-03-25 09:18:48 1074 1

原创 es6 对数据的搜索、排序、分页

1.分页：根据page取当前页的内容。//分页function pagination(page, pageSize, array) { var pageCount = page * pageSize; var pagepev = (page - 1) * pageSize; let data= array.filter((item, index) => { // ////console.log(item,index); return i.

2021-03-24 16:35:17 919

原创 next-pwa 用法

1.什么是pwa？PWA全称Progressive Web App，即渐进式WEB应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能2.说一下有用的资料：Google Workbox 组件：https://developers.google.com/web/tools/workboxpwa之 Workbox学习：https://segmentf..

2021-03-24 16:23:37 1026 1

原创通过package.json来安装node_modules第三方包

通过package.json来安装node_modules第三方包将package.json文件拷贝到项目，在当前目录打开命令行安装： npm install --productionnpm install --productionnext.js项目中有.gitignore，也记得上传至github中

2021-03-18 10:37:43 1746

原创 next.js监听键盘事件监听键盘按下事件

1、监听全局键盘按下事件，例如监听全局回车事件function home(){ function handleKeydown(e){ console.log("bbbbbbbbbbbbbb",e.keyCode); if(e.keyCode == 27){//esc } } useEffect(() => { document.body.addEventListener('keydow

2021-03-09 10:21:17 632