lizhenqiu blog

浏览模式: 标准 | 列表

@意见反馈/技术支持/伊网/安企网

发布时间：2017-05-15, 09:07:44 分类：默认分类

1.感谢你的宝贵意见
2.技术支持Email: winwin@lizhenqiu.com
3.或在下方评论留下内容

webman上传文件到非public目录

发布时间：2025-05-06, 15:00:22 | 评论：19 | 分类：PHP

webman上传文件到非publi
在Webman框架中，在上传文件到非public目录时，通常需要确保文件的安全性、访问控制和适当的权限设置。下面是一些步骤和考虑因素，帮助你在Webman中实现这一点：

1. 配置文件存储位置
首先，确保你在配置文件中指定了文件上传的目录。在Webman中，你可以在config/filesystems.php文件中配置文件系统，包括上传文件的目录。例如：

return [
'default' => 'local',
'disks' => [
'local' => [
'driver' => 'local',
'root' => storage_path('app'), // 或者其他非public目录
],
],
];
2. 文件上传逻辑
在控制器中处理文件上传时，使用配置的磁盘来存储文件。例如：

use Illuminate\Support\Facades\Storage;
use Webman\Http\Request;

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$filename = time() . '_' . $file->getClientOriginalName();
$path = 'path/to/non-public/directory'; // 使用非public目录的路径
Storage::disk('local')->put($path . '/' . $filename, file_get_contents($file->getRealPath()));
return 'File uploaded successfully.';
}
return 'No file uploaded.';
}
3. 访问控制
由于文件存放在非public目录，你需要通过路由来控制文件的访问。例如，你可以创建一个中间件来检查权限，或者简单地通过路由来限制访问：

Route::get('/download/{filename}', function ($filename) {
$path = storage_path('app/path/to/non-public/directory/' . $filename); // 确保路径正确
if (file_exists($path)) {
return response()->download($path);
} else {
return response('File not found.', 404);
}
});
4. 安全性考虑
验证和授权：确保上传文件的请求经过了适当的验证和授权，防止恶意文件上传。

文件类型和大小限制：在上传前检查文件类型和大小，避免上传可执行文件或其他潜在危险的文件。

日志记录：记录所有上传的文件信息，包括来源、时间等，以便于审计和追踪。

清理机制：定期检查和清理非public目录中的旧文件，避免存储空间过度占用。

5. 测试和调试
在部署前，确保充分测试文件上传和下载功能，检查各种边界情况和错误处理是否正确。使用开发者工具和网络监控工具来调试可能的问题。

通过上述步骤，你可以在Webman框架中安全地上传文件到非public目录，并控制对这些文件的访问。

HTML5获取地理位置腾讯地图API接口平台定位

发布时间：2025-04-16, 22:58:10 | 评论：1 | 分类：HTML

<!DOCTYPE html>
<html><meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <head><script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.8.0/proj4.js"></script>
    <title>地理定位示例</title>
    <!-- <a href="weixin://profile/gh_be8239e7bb8d">点击查看微信公众号</a> -->

    <script>
      function getLocation() {

        // const result = [22.763269,108.311295];//convertToCGCS2000(longitude, latitude);
        // // alert("您的位置坐标为：" + result[1] + ", " + result[0]);
        // return gggs(result[1], result[0]);

        // let url='https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' +result[0]+ ',' +result[1]+ ';title:111111111;addr:22222222&key=P4CQI&referer=myapp';

        // location.href = url;

        // return showPosition(22.766076958488213);
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
        } else {
          alert("浏览器不支持地理定位功能。");
        }
      }

      function showPosition(position) {
        console.log(position)
        // var latitude = position.coords.latitude;
        // var longitude = position.coords.longitude;

        return gggs(position.coords.longitude, position.coords.latitude,(result) => {

            let url='https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' +result.lat+ ',' +result.lng+ ';title:111111111;addr:22222222&key=P4CLBQI&referer=myapp';

            location.href = url;

            // console.log("回调函数中的数据:", position.coords.latitude, position.coords.longitude);
            // 在这里处理回调函数中的数据
        });

        // const result = [22.763269,108.311295];//convertToCGCS2000(longitude, latitude);
        // alert("您的位置坐标为：" + result[1] + ", " + result[0]);
        // return gggs(result[1], result[0]);

        let url='https://apis.map.qq.com/tools/poimarker?type=0&marker=coord:' +result[1]+ ',' +result[0]+ ';title:111111111;addr:22222222&key=P4QI&referer=myapp';

        location.href = url;
        // window.open(url, '_blank');
        // alert("您的位置坐标为：" + latitude + ", " + longitude);
      }


        // 定义坐标系
        // proj4.defs("EPSG:4326", "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs");
        // proj4.defs("EPSG:4490", "+proj=longlat +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +no_defs");

        // 转换函数
        // function convertToCGCS2000(longitude, latitude) {
        //     const wgs84 = proj4.defs("EPSG:4326");
        //     const cgcs2000 = proj4.defs("EPSG:4490");
        //     return proj4(wgs84, cgcs2000, [longitude, latitude]);
        // }

        // 示例
        // const result = convertToCGCS2000(116.3975, 39.9087);
        // console.log("CGCS2000 坐标:", result);
        function gggs(longitude, latitude,callback) {
            const url = "https://api.ttxsm.com/mpweb/common/index/test_";
            const headers = {
                "Content-Type": "application/json"
            };
            const data = {
                longitude: longitude,
                latitude: latitude
            };

            const request = new XMLHttpRequest();
            request.open("POST", url, true);
            request.setRequestHeader("Content-Type", "application/json");

            request.onreadystatechange = () => {
                if (request.readyState === 4) {
                    if (request.status === 200) {
                        const response = JSON.parse(request.responseText);
                        console.log("响应数据:", response.data);
                        callback(response.data);
                        // 在这里处理响应数据
                    } else {
                        console.error("请求失败:", request.status, request.statusText);
                        // 在这里处理请求失败的情况
                    }
                }
            };

            request.send(JSON.stringify(data));
        }



    </script>
  </head>
  <body>
    <button onclick="getLocation()">获取位置信息</button>
  </body>
</html>

Run code

Cut to clipboard

查看uniapp云端证书公钥和Md5值

发布时间：2025-04-16, 22:53:54 | 评论：0 | 分类：Linux

查看uniapp云端证书如何查看公钥和Md5值

uniapp使用云端证书如何查看公钥和Md5值
1.登录DCloud后台，将 Android 云端证书（.keystore 结尾）下载到本地
登录 DCloud 后台
依次点击应用管理 -> 我的应用 -> 点击应用名称进入详情 -> 查看 Android 云端证书
点击下载证书，将云端证书下载到本地
此外，点击证书详情可以获取到别名、证书指纹、密码…，后边需要用到

2.打开cmd，进入到证书所在目录
执行命令(需要java环境)

 // your_alias 换成 证书详情中的别名，your_keystore.keystore 改成自己的证书文件名
keytool -export -alias your_alias -file certificate.cer -keystore your_keystore.keystore

Run code

Cut to clipboard

回车，输入密码，就可以将 certificate.cer 的证书导出

3.window 系统中双击 certificate.cer，将证书打开，切换到详细信息，然后就可以找到公钥啦
注意：别名、密码的获取都可以在 DCloud 的 Android 云端证书的证书详情中找到

通过xxxx.keystore文件获取MD5，签名信息
cmd中执行，并输入密码，就可以看到证书的信息了（包括MD5值）

keytool -list -v -keystore xxxx.keystore

Run code

Cut to clipboard

注意这里可能获取不到MD5值，用以下方法

证书详情，证书指纹：
MD5:
把冒号去掉，阿里云app备案

vue项目部署后刷新页面404

发布时间：2025-03-05, 22:16:40 | 评论：0 | 分类：Vue

vue项目部署后刷新页面404的原因和解决方案
vue项目打包部署上线后发现项目是可以正常运行，
但是使用F5或者浏览器的刷新按钮直接变成404页面

mode: 'history' 和 mode: 'hash' 的问题可能与 Vue Router 的版本有关。在 Vue Router 4.x 中，mode 选项已经被废弃，取而代之的是直接使用 history 选项来指定路由模式。

vue路由两种模式的区别

new Router({
    mode: 'hash', // history
    routes: [],
    ...
})

Run code

Cut to clipboard

1.hash 模式（默认）的访问URL中有 # 字符，history模式的URL没有带#，外观上history模式比hash模式好看些；

2.hash模式通过监听浏览器的onhashchange()事件变化，查找对应的路由规则；history模式是利用h5的history中新增的两个API pushState() 和 replaceState() 和一个事件onpopstate监听其URL变化；

3. hash模式能兼容到IE8，history模式只能兼容到 IE10；

4.由于 hash 值变化不会导致浏览器向服务器发出请求，而且 hash 改变会触发 hashchange 事件（hashchange只能改变 # 后面的url片段）；
虽然hash路径出现在URL中，但是不会出现在HTTP请求中，对服务器完全没有影响，因此改变hash值不会重新加载页面，基本都是使用 hash 来实现前端路由的。

重点：hash模式在每次刷新页面时是直接更改“#”后的路径，history模式每次刷新会重新像服务器重新请求资源，但是服务器会把vue的路由地址当成文件路径访问（如: /pages/index），服务器又没有这个文件路径，且服务端没有配置相应的路由重定向，就会访问404，
也就是本文开头提到的问题；history模式的好处是可以进行修改历史记录，并且不会立刻像后端发起请求。不过如果对于项目没有硬性标准要求，我们可以直接使用hash模式开发。

解决404问题

1.直接使用hash模式无404问题；

new Router({
    mode: 'hash',
    ...
})

Run code

Cut to clipboard

2.使用history模式需服务器进行配置，以下是服务器配置；

new Router({
    mode: 'history',
    ...
})

Run code

Cut to clipboard

Nginx：

location / {
    try_files $uri $uri/ /index.html; #解决页面刷新404问题
}

Run code

Cut to clipboard

Apache:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Run code

Cut to clipboard

当项目部署到服务器子文件路径时资源404问题
1.如比我们将项目部署到了h5文件夹中，这时候的访问路径应该是http://127.0.0.1:8080/h5/，访问后会出现js和css资源404，
因为配置默认是指向到绝对路径'/',也就是根目录，但是根目录没有这些资源文件，就会让项目访问失败。

2.如何解决，以下从vue2.0和vue3.0分别修改配置。
vue2.0：

// vue.config.js
module.exports = {
    publicPath: '/h5/',
    ...
}

Run code

Cut to clipboard

// router
const createRouter = () => new Router({
  mode: 'history',
  base: '/h5',
  ...
})

Run code

Cut to clipboard

vue3.0：

// vite.config.ts
export default defineConfig({
    base:'/h5/',
    ...
})

Run code

Cut to clipboard

// router
const router = createRouter({
    history: createWebHistory('/h5'),
    routes: []
});

Run code

Cut to clipboard

src\router\index.js

import HomeView from '../views/HomeView.vue'

import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  // history: createWebHashHistory(import.meta.env.BASE_URL),
  history: createWebHistory(import.meta.env.BASE_URL),

  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    {
      path: '/rouacc',
      name: 'rouacc',
      component: () => import('@/views/rouacc.vue'),
    },
    {
      path: '/menu',
      name: 'menu',
      component: () => import('@/views/menu.vue'),
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue'),
    },
  ],
})

export default router

Run code

Cut to clipboard

使用 history 模式

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    // 其他路由
  ],
});

Run code

Cut to clipboard

使用 hash 模式

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
    },
    // 其他路由
  ],
});

Run code

Cut to clipboard

关键点
createWebHistory：用于创建基于 history 模式的路由。
createWebHashHistory：用于创建基于 hash 模式的路由。
import.meta.env.BASE_URL：这是 Vite 提供的环境变量，表示项目的基础 URL。

问题排查
如果你发现 mode: 'hash' 无效，可能是因为你在 Vue Router 4.x 中仍然使用了旧版的配置方式。确保你使用的是 createWebHashHistory 来启用 hash 模式。

小度百度小爱音箱连接电脑蓝牙后无声（电脑连接小爱音箱播放不出来声音）

发布时间：2025-03-03, 14:30:54 | 评论：0 | 分类：默认分类

修改注册表
同时按WIN+R打开运行，输入

regedit

Run code

Cut to clipboard

进入注册表编辑器，依次打开

\HKEY_LOCAL_MACHINE\SYSTEM\ControlSet001\Control\Bluetooth\Audio\AVRCP\CT

Run code

Cut to clipboard

当然也可以直接复制上面的路径一步到位，也可以搜索

DisableAbsoluteVolume

Run code

Cut to clipboard

将右侧的DisableAbsoluteVolume的值改为1，然后重启电脑即可。

切换音箱为音频输出设备
电脑重启后，重复蓝牙连接步骤，把电脑与音箱重新连接；回到蓝牙设置界面，点击右侧的声音设置。

win11连接蓝牙耳机音频输出选择不了
为啥window11的声音属性里蓝牙耳机按不了允许应用和windows将此设备用于音频选项？

在耳机服务里面，把可以免提电话服务那个√取消就行了
点蓝牙与其他设备再点设备滑到最下面有一个更多设备与打印机设置，点开找到你耳机对应的图标，右键选择属性，把那个勾选点掉就行了

右键》属性》服务

在iOS Safari/Android Chrome禁止手势缩放、阻止下拉刷新、阻止滑动前进后退

发布时间：2025-02-25, 18:44:27 | 评论：1 | 分类：HTML

阻止下拉刷新

/* prevent pull-to-refresh for Safari 16+ */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (overscroll-behavior-y: none)  {
    html {
      min-height: 100.3%;
      overscroll-behavior-y: none;
    }
  }
}
/* prevent pull-to-refresh for Safari 9~15 */
@media screen and (pointer: coarse) {
  @supports (-webkit-backdrop-filter: blur(1px)) and (not (overscroll-behavior-y: none))  {
    html {
      height: 100%;
      overflow: hidden;
    }
    body {
      margin: 0px;
      max-height: 100%; /* or `height: calc(100% - 16px);` if body has default margin */
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    /* in this case to disable pinch-zoom, set `touch-action: pan-x pan-y;` on `body` instead of `html` */
  }
}
/* prevent pull-to-refresh for Chrome 63+ */
body{
  overscroll-behavior-y: none;
}

Run code

Cut to clipboard

阻止前进后退手势

/* currently there is NO SIMPLE WAY to prevent BackForwardNavigationGestures for Safari */

/* prevent "overscroll history navigation" for Chrome 63+ */
body{
  overscroll-behavior-x: none;
}

Run code

Cut to clipboard

禁止手势缩放

/* prevent pinch-zoom for Chrome 36+, Safari 13+ */
html {
  touch-action: pan-x pan-y;
  min-height: 100%; /* for Safari */
}

Run code

Cut to clipboard

// prevent pinch-zoom for iOS Safari 9~12
if (window.GestureEvent && !('touchAction' in document.documentElement.style)) {
  document.documentElement.addEventListener('gesturestart', (e)=>{e.preventDefault()}, {passive: false, capture:true});
}

Run code

Cut to clipboard

<!-- prevent pinch-zoom for Chrome, old Safari -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Run code

Cut to clipboard

禁止双击缩放

if (window.GestureEvent || (navigator.maxTouchPoints & 0xFF) > 0) {
  document.body.addEventListener('click', (e) => {
    if (!isInteractiveElement(e.target))
      e.preventDefault();
  });
}

function isInteractiveElement(e) {
  let {nodeName} = e;
  if (nodeName === 'A' && e.hasAttribute('href') ||
    ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA'].includes(nodeName) && !e.disabled ||
    nodeName === 'LABEL' && (e.htmlFor || e.querySelector('input,select,textarea') !== null) ||
    ['IMG', 'OBJECT'].includes(nodeName) && e.useMap ||
    ['AUDIO', 'VIDEO'].includes(nodeName) && e.controls ||
    ['SUMMARY', 'IFRAME', 'EMBED'].includes(nodeName)) {
    return true;
  }
  return e.hasAttribute('tabindex') && e.tabIndex > -1;
}

Run code

Cut to clipboard

禁止iOS Safari其他默认行为
禁止长按选中文本

-webkit-user-select: none;

Run code

Cut to clipboard

禁止长按弹出上下文菜单

-webkit-touch-callout: none;

Run code

Cut to clipboard

禁止按钮/链接点击特效

-webkit-tap-highlight-color: transparent;

Run code

Cut to clipboard

禁止长按弹出上下文菜单

-webkit-touch-callout: none;

Run code

Cut to clipboard

禁止视频弹出悬浮窗口

<video playsinline></video>

Run code

Cut to clipboard

tauri 在window平台打包遇到的问题

发布时间：2025-02-25, 18:36:21 | 评论：1 | 分类：Linux

wix314等问题
解决思路
类似如下这种错误，可以直接根据提示的链接下载对应的包

warning: `app` (bin "app") generated 1 warning
    Finished `release` profile [optimized] target(s) in 4.52s
        Info Verifying wix package
 Downloading https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip
       Error failed to bundle project: `https://github.com/wixtoolset/wix3/releases/download/wix3141rtm/wix314-binaries.zip: Network Error: Network Error: Error encountered in the status line: unexpected end of file`

Run code

Cut to clipboard

然后解压在

C:\Users\${User}\AppData\Local\tarui\WixTools314

Run code

Cut to clipboard

这个目录下，然后就可以继续执行npm run tauri build编译，最终文件目录如下

--WixTools314
	--doc
	--sdk
	--x86
	--candle.exe
	--...

Run code

Cut to clipboard

如果还会产生wix之类的问题，那么就可能是tarui\WixTools314这个目录不对，具体查看github中的源码
https://github.com/tauri-apps/tauri/blob/dev/tooling/bundler/src/bundle/windows/msi.rs

nsis问题
类似如下这种错误，可以直接根据提示的链接下载对应的包

 Downloading https://github.com/tauri-apps/binary-releases/releases/download/nsis-3/nsis-3.zip
       Error failed to bundle project: `https://github.com/tauri-apps/binary-releases/releases/download/nsis-3/nsis-3.zip: Connection Failed: Connect error: 由于连接方在一段时间后没有正确
答复或连接的主机没有反应，连接尝试失败。 (os error 10060)`

Run code

Cut to clipboard

解压在C:\Users\${User}\AppData\Local\tarui\NSIS这个目录下

下载https://github.com/tauri-apps/binary-releases/releases/download/nsis-plugins-v0/NSIS-ApplicationID.zip解压到NSIS/Plugins目录下

将NSIS-ApplicationID\ReleaseUnicode\ApplicationID.dll复制到NSIS/Plugins/x86-unicode下

下载https://knsay.com/upload/default/20230614/b0c63b57f4729e1d3a245023672df79a.zip，将nsis_tauri_utils.dll复制到NSIS/Plugins/x86-unicode下

--NSIS
	--Plugins
		--Debug
		--DebugUnicode
		--Release
		--ReleaseUnicode
		--x86-ansi
		--x86-unicode
			--ApplicationID.dll
			--nsis_tauri_utils.dll
	--...

Run code

Cut to clipboard

然后就可以继续执行npm run tauri build编译。

如果产生类似如下错误，通过提示的链接直接下载对应nsis_tauri_utils.dll复制到NSIS/Plugins/x86-unicode下即可，然后就可以继续执行npm run tauri build编译。

 Downloading https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.4.0/nsis_tauri_utils.dll
       Error failed to bundle project: `https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.4.0/nsis_tauri_utils.dll: Network Error: Network Error: Error encountered in the status line: unexpected end of file`

Run code

Cut to clipboard

如果还会产生nsis之类的问题，那么就可能是tarui\NSIS这个目录不对，具体查看github中的源码
https://github.com/tauri-apps/tauri/blob/dev/tooling/bundler/src/bundle/windows/msi.rs

Tauri构建时下载Wix和NSIS失败问题
在Tauri构建时会从github下载Wix和NSIS工具，因为国内网络原因导致下载失败（貌似使用了代理也没用），解决办法是提前下载这两个工具到本地

Running light to produce X:\Tauri\tauri-shop-admin\src-tauri\target\release\bundle\msi\tauri-shop-admin_0.1.0_x64_en-US.msi
    Warn NSIS directory contains mis-hashed files. Redownloading them.
    Downloading https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.4.1/nsis_tauri_utils.dll
failed to bundle project: `https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.4.1/nsis_tauri_utils.dll: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)`
    Error failed to bundle project: `https://github.com/tauri-apps/nsis-tauri-utils/releases/download/nsis_tauri_utils-v0.4.1/nsis_tauri_utils.dll: Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接的主机没有反应，连接尝试失败。 (os error 10060)`
 ELIFECYCLE  Command failed with exit code 1.

Run code

Cut to clipboard

快速解决
下面的解决办法还是比较麻烦的，可以先试试这个办法，我将最后的文件夹打包了一份，虽然不保证一定能使用，但如果有用的话可以节约很多时间，在文章顶部可以下载，在gitee也上传了一份 tauri.zip

下载压缩包文件 tauri.zip
找到这个路径 C:\Users\你的用户名\AppData\Local
将压缩包解压到这个文件夹

最后的文件树结构

C:\Users\用户名\AppData\Local\tauri>
├─NSIS
│ ├─Bin
│ ├─Contrib
│ ├─Docs
│ ├─Examples
│ ├─Include
│ ├─Plugins
│ │ ├─x86-ansi
│ │ └─x86-unicode 下载的插件放这里
│ └─Stubs
└─WixTools

Run code

Cut to clipboard

如果上面的办法不行的话，可以参照下面的办法

1.下载Wix工具
前往Wix发行页面,下载wix314-binaries.zip压缩包，注意版本号

2.下载NSIS工具
前往Tauri资源下载页面，下载nsis-3.zip

另外还需要下载nsis_tauri_utils.dll和NSIS-ApplicationID.zip这两个文件

3.放置文件
找到此路径C:\Users\你的用户名\AppData\Local\tauri 注意替换用户名，tauri文件夹如果不存在可以创建一个
在tauri文件夹下创建WixTools314，将wix314-binaries.zip解压到这个文件夹下
在tauri文件夹下创建NSIS，将nsis-3.zip解压到这个文件夹下
将NSIS-ApplicationID.zip复制到 ...\NSIS\Plugins\x86-unicode，然后将其解压到当前文件夹下
将 nsis_tauri_utils.dll也复制到这个x86-unicode文件夹下
大功告成，再次构建就没问题了

tauri-NSIS-WixTools目录文件夹打包下载
tauri.rar

C:\Users\li\AppData\Local\tauri

Run code

Cut to clipboard

编译错误文件包.rar

为了开始使用 Tauri 构建项目，你首先需要安装一些依赖项
前置要求-系统依赖项

vue3 element-plus 实现图片预览

发布时间：2025-02-14, 10:44:38 | 评论：1 | 分类：Vue

实现
element-plus下有这么一个组件

<el-image-viewer/>

Run code

Cut to clipboard

，但是这个组件是没写在文档上面的，像普通组件一样使用即可
可以通过点击按钮实现图片预览，而非el-image组件只能通过点击图片实现预览

封装组件


<template>
  <div class="img-viewer-box">
    <el-image-viewer
      v-if="state.visible"
      :url-list="props.imgs"
      @close="close"
    />
  </div>
</template>
 
<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { useVModel } from '@vueuse/core'
const props = defineProps<{
  modelValue: boolean
  imgs: string[]
}>()
const emits = defineEmits<{
  (e: 'update:modelValue', data: boolean)
}>()
const state = reactive({
  imgList: [],
  // 相当于是set 与 get
  visible: useVModel(props, 'modelValue', emits),
})
 
// 点击关闭的时候，连同小图一起关闭
function close() {
  state.visible = false
}
</script>
 
<style scoped></style>

Run code

Cut to clipboard

组件使用
在需要使用的地方引入，然后使用即可，这不是重点，每个人使用的方式都不一样，根据自己需求来即可

重点是上面的组件封装，

 <!-- 增加用于显示预览图片 -->
 <ImgPreview v-model="state.visible.modal" :imgs="[state.imageUrl]" />

Run code

Cut to clipboard

vue判断图片是竖图（三种方法）

发布时间：2025-02-14, 10:42:15 | 评论：0 | 分类：Vue

使用JavaScript的Image对象
使用JavaScript中的Image对象可以获取图片的原始宽度和高度，从而判断出图片的方向。

var img = new Image();
img.src = 'img.jpg';
img.onload = function() {
  if (img.width > img.height) {
    console.log('横图');
  } else {
    console.log('竖图');
  }
};

Run code

Cut to clipboard

使用CSS的aspect-ratio属性
CSS3新增了aspect-ratio属性，该属性用于设置元素的宽高比。我们可以利用这个属性来判断图片的方向。

img {
  aspect-ratio: 1/1; /* 宽高比为1:1 */
  position: relative;
}

img::before {
  content: '';
  display: block;
  padding-bottom: 100%; /* 内容区高度为0，生成一个占位符，避免图片被撑宽 */
}

/* 竖图 */
img[aspect-ratio="1/1"]::before {
  padding-bottom: 133%; /* 内容区高度为0，生成一个占位符，占比为4:3 */
}

/* 横图 */
img[aspect-ratio="1/1"]::before {
  padding-bottom: 75%; /* 内容区高度为0，生成一个占位符，占比为3:4 */
}

Run code

Cut to clipboard

使用CSS的@media查询
CSS @media查询可以根据不同的屏幕宽度设置不同的CSS样式。如果我们设置不同的宽高比，就可以根据屏幕方向判断图片是横向还是纵向。

/* 竖图 */
@media (max-aspect-ratio: 3/4) {
  img {
    width: 100%;
    height: auto;
  }
}

/* 横图 */
@media (min-aspect-ratio: 4/3) {
  img {
    width: auto;
    height: 100%;
  }
}

Run code

Cut to clipboard

直接修改node_modules elementui 修改element ui源码无效

发布时间：2025-02-14, 10:34:58 | 评论：0 | 分类：Vue

更改后重启项目发现并没有用。
是因为项目引用的是源码打包后生成的lib文件夹下的代码。

解决问题

将github上element ui源码下载下来

git clone https://github.com/ElemeFE/element.git

Run code

Cut to clipboard

下载依赖

npm install

Run code

Cut to clipboard

下载依赖完成后文件夹下出现node_modules文件夹
修改packages下progress.vue

修改完成后执行

npm run dist

Run code

Cut to clipboard

成功编译后生成lib文件夹

把生成的lib文件夹复制到项目路径node_modules\element-ui替换掉lib文件夹，重启项目

我们可以把包发布到npm包管理器
1、进入cmd命令窗口，进入下载的elementui文件夹下，执行

npm init

Run code

Cut to clipboard

,进入重命名包名、版本号

2、登录npm，执行

npm login

Run code

Cut to clipboard

,输入用户名、密码和邮箱后若报错

这里执行

npm config set registry https://registry.npmjs.org

Run code

Cut to clipboard

切换镜像

重新输入用户名、密码和邮箱后成功登录

执行

npm publish

Run code

Cut to clipboard

推送发布

3、将项目中package.json文件中devDependencies, “element-ui”: “^2.15.1”,改为如：
"element-ui-liu": "^2.15.9"
“你的包名”: “^你的版本号”

重启项目

Electron在windows下打linux包

发布时间：2024-12-13, 03:32:23 | 评论：2 | 分类：Linux

package.json

{
    "name": "htafxt",
    "version": "8.3.229",
    "author": "海天 <2500152288@qq.com>",
    "description": "合规监测系统",
    "homepage": "http://lizhenqiu.com",
    "main": "main.js",
    "scripts": {
        "start": "electron . --arg1 development",
        "build": "electron-builder --linux"
    },
    "build": {
        "productName": "合规监测系统",
        "appId": "org.simulatedgreg.electron-vue",
        "copyright": "合规监测系统",
        "directories": {
            "output": "build"
        },
        "publish": [
            {
                "provider": "generic",
                "url": "http://192.168.1.80:181"
            }
        ],
        "files": [
            "../dist",
            "alg.jpg",
            "anflogo.png",
            "preload.js",
            "main.js"
        ],
        "linux": {
            "category": "Office",
            "icon": "anflogo256.png",
            "target": [
                "deb"
            ]
        },

        "nsis": {
            "oneClick": false,
            "allowElevation": true,
            "allowToChangeInstallationDirectory": true,
            "installerIcon": "Gxht256.ico",
            "uninstallerIcon": "Gxht256.ico",
            "installerHeaderIcon": "Gxht256.ico",
            "createDesktopShortcut": true,
            "createStartMenuShortcut": true,
            "shortcutName": "合规监测系统"
        }
    },
    "dependencies": {
        "electron-dl": "^3.5.0",
        "electron-log": "^4.4.8",
        "electron-reload": "^2.0.0-alpha.1",
        "electron-updater": "^6.1.1",
        "node-machine-id": "^1.1.12"
    },
    "devDependencies": {
        "electron": "^21.4.4",
        "electron-builder": "^25.1.8",
        "electron-dl": "^3.5.0",
        "electron-log": "^4.4.8",
        "electron-reload": "^2.0.0-alpha.1",
        "electron-updater": "^6.1.1",
        "node-machine-id": "^1.1.12"
    }
}

Run code

Cut to clipboard

容器内编译命令

cd Linux && npm run build

Run code

Cut to clipboard

打包windows包的配置
Vue cli 3.x使用electron打包配置

1. 修改package.json配置，下面三个字段必填，且author要按照下面格式填写

{
	"license": "aaa",               // 根据实际情况填写
  	"author": "作者名 <邮箱地址>",   // 如 "张三 <1111@qq.com>"
  	"homepage": "",                 // 可以填写网址，如公司官网网址或者app对应网页的地址等
}

Run code

Cut to clipboard

scripts中添加electron打包linux环境的命令

"scripts": {
	// 可选 --x64 --ia32 --arm64 --armv7l等
    "electron:linux": "vue-cli-service electron:build -l --x64",  // 打包linux下amd64位的包
    "electron:arm": "vue-cli-service electron:build -l --arm64"   // 打包linux下arm64位的包
  },

Run code

Cut to clipboard

2. 在vue.config.js中的electron-builder的配置下增加linux的配置，linux下默认打的是AppImage包和snap包，可以通过target字段修改

pluginOptions: {
    electronBuilder: {
      builderOptions: {
       	...
        linux: {
          icon: './public/app.png',    // 注意linux下图片的尺寸最好是256*256
       //  target: 'deb',              // 这个字段也可以是数组格式，具体可以参考electron-builder官网
        },
        ...
      }
    }
  }

Run code

Cut to clipboard

3. 以前是可以直接在windows下打linux包的，但是现在根据官方文档说明，原来支持打包的服务已经停用了，所以windows下我们需要借助虚拟机来实现打包（条件允许的打包什么样的版本的包可以直接在对应的linux系统上进行打包）

打包步骤：
安装docker Docker下载地址
安装后启动 docker desktop，可能会报错提示需要更新到WSL2，安装过程中会出现失败等情况，可以参考 Win10家庭版通过Hyper-V（WSL2）安装Docker-Desktop 失败
启动成功后，win + r 输入cmd打开终端

输入

docker pull electronuserland/builder

Run code

Cut to clipboard

输入

docker run --rm -ti -v C:\project\vue\:/project -w /project electronuserland/builder

Run code

Cut to clipboard

这行命令表示把windows系统下的项目映射到虚拟机的某个虚拟文件夹下
(其中C:\project\vue\ 为要映射的原项目文件地址，最后一个斜杠不要忘哦！！其中的两个/project表示映射后项目所放置的文件夹名称，可以根据自己的习惯进行修改)

映射成功，进入linux命令行后，重新装包

npm install

Run code

Cut to clipboard

装包过程中可能会出现安装electron包很慢的情况，可以修改npm、electron、electron-builder-binaries的安装镜像源
修改npm的下载镜像为淘宝镜像

npm config set registry https://registry.npm.taobao.org

Run code

Cut to clipboard

按照下面命令修改electron镜像，electron-builder-binaries是后面打包过程中需要用到的，可以提前修改镜像

npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set electron-builder-binaries_mirror_mirror https://npm.taobao.org/mirrors/electron-builder-binaries_mirror/

Run code

Cut to clipboard

electron的某些版本在淘宝镜像中可能找不到，也可以用华为云这个镜像安装

npm config set electron_mirror https://mirrors.huaweicloud.com/electron/
npm config set electron-builder-binaries_mirror https://mirrors.huaweicloud.com/electron-builder-binaries/

Run code

Cut to clipboard

装包成功后，执行打包命令时，可能报错需要npm rebuid node-sass，按照报错提示执行npm rebuid node-sass即可
执行完毕后，继续打包，打包完成后dist-electron则会出现对应的安装包

4. 安装包的升级，electron官网中有提过autoUpdater是不支持linux的自动升级的，需要通过发行版包管理器来实现升级
因为我们做的是政府项目，所以发行版包管理器不好搭建
自动升级检测时，amd下需要latest-linux.yml配置文件，arm下需要latest-linux-arm64.yml（根据系统实际的位数变化）配置文件

打包deb安装包时，即使配置了publish，无法打包出latest-linux.yml文件
在不修改linux下的target配置时，打包amd64的包时，默认情况下会同时打包AppImage和snap两种格式的包，并且会产生latest-linux.yml文件，并且按照windows的自动更新方式上传新的latest-linux.yml和安装包到服务器，通过autoUpdater是可以实现自动检测更新的

打包arm64的包时，在打包snap包时会报错，提示需要sudo snap install snapcraft --classic 但是安装这个很难成功（目前我还没成功，即使我在arm64的虚拟系统上打包也会有这个报错），当然这个报错不会影响AppImage打包，在dist-electron中可以看到AppImage包，但是这个报错会让我们得不到latest-linux-arm64文件，所以建议大家这个时候可以修改下target："AppImage"后即可成功打包出latest-linux-arm64文件了，同样也可以使用autoUpdater进行更新了

针对无法使用自动升级的deb包，我采用的是当有新的安装包时，提示用户去下载安装更新，在系统中提供下载最新安装包的位置，让用户手动进行下载安装更新

5.打包出来的AppImage安装包在实际安装过程中会出现问题
amd下安装AppImage包运行时报错

/tmp/.mount_综合tnTpHu/chrome-sandbox is owned by root and has mode 4755.

Run code

Cut to clipboard

解决方案：
1、终端运行时添加免沙箱命令–no-sandbox，但是该种方案在自动升级时会无法自动打开应用程序，只能将AppImage旧版本安装包所在的路径下的安装包替换为新版本的安装包，然后重新通过命令行的方式打开
2、启用用户命名空间：sudo sysctl kernel.unprivileged_userns_clone=1，但每次开机都要运行该命令
3、给报错信息中的文件授权：sudo chown root <path_to_marktext_dir>/chrome-sandbox && sudo chmod 4755 <path_to_marktext_dir>/chrome-sandbox，这个方法不适用于picgo，因为这个chrome-sandbox文件会被自动删除，（我不太清楚electron打包出来的是不是picgo，但是我确实没有找到这个路径下的sandbox文件）
4、开机时自启动用户名称空间：root下运行echo ‘kernel.unprivileged_userns_clone=1’ >
/etc/sysctl.d/userns.conf命令即可

arm下安装的时候报错

error while loading shared libraries: libz.so: cannot open shared object file: No such file or directory.

Run code

Cut to clipboard

解决方案：

使用apt-file search查找
sudo apt-get install apt-file
安装成功使用apt-file时一般会提示更新
sudo apt-file update
查找libz.so所在的库或所在的包
apt-file search libz.so
运行命令显示如下：

libzadc-dev: /usr/lib/arrch64-linux-gnu/genwqe/libz.so
zlib1g-dev: /usr/lib/arrch64-linux-gnu/libz.so
...

Run code

Cut to clipboard

右边是匹配你缺失的库的，左边是查到的库所在的包，当发现匹配到多个包时，按顺序安装尝试即可（我安装了第一个就可以了）

安装缺失包：
sudo apt-get install libzadc-dev
可以正常运行包
最后给大家提些小小的帮助，因为对linux不是很熟悉而浪费时间的地方（当然大佬可以无视）
linux下安装deb包成功，但是点击打开运行时毫无反应，由于本人不知道怎么查看运行终端查看报错日志，于是反复打包了很多次依然无果，

查看方式，打开deb安装包安装成功后的文件夹，下面有一个跟你打包时在package.json中的写的name同名的可执行程序，在当前文件夹下打开终端，拖动该可执行程序到终端中运行，即可以查看到运行日志
运行时报错cannot find module fs/promise 这种错误是因为包的版本不对，我把electron-updater的版本固定到4.3.5就可以成功运行了

Go编译exe程序指定图标

发布时间：2024-12-11, 19:59:32 | 评论：8 | 分类：Go

下载依赖

go get github.com/akavel/rsrc

Run code

Cut to clipboard

制作图标
在线ico图标生成，生成后放到要编译的go的文件同目录下
https://github.com/akavel/rsrc
Go官网

生成rsrc.syso
定位到，如

C:\Users\li\go\pkg\mod\github.com\akavel\rsrc@v0.10.2

Run code

Cut to clipboard

编译生成rsrc.exe

go build

Run code

Cut to clipboard

.\rsrc -ico ".\icon.ico" -o ".\rsrc.syso"

Run code

Cut to clipboard

或者把rsrc.exe加入环境变量

编译go
把rsrc.syso放到go项目根目录下
编译即可

GO开发桌面端软件控制只允许运行一个实例禁止重复打开多个软件

发布时间：2024-12-11, 19:43:59 | 评论：1 | 分类：Go

package main

import (
	"fmt"
	"os"
	"setbg2/setbg"
	"strconv"
	"strings"
	"time"

	"github.com/energye/systray"
)

//只运行一个实例
var tempFile string

func checkPid() error {
	pid := os.Getpid()
	tempDir := strings.TrimRight(strings.ReplaceAll(os.TempDir(), "\\", "/"), "/")
	tempFile = fmt.Sprintf("%s/.googleindexing.lock", tempDir)

	// 读取锁文件内容
	tmpBuf, err := os.ReadFile(tempFile)
	if err == nil {
		// 文件已存在，尝试获取并终止旧进程
		tmpPidStr := string(tmpBuf)
		tmpPid, err := strconv.Atoi(tmpPidStr)
		if err == nil && tmpPid > 1 {
			pro, err := os.FindProcess(tmpPid)
			if err == nil {
				// 终止旧进程
				if err := pro.Kill(); err != nil {
					return fmt.Errorf("failed to kill old process: %w", err)
				}
			}
		}
	}

	// 写入当前进程PID到锁文件
	if err := os.WriteFile(tempFile, []byte(strconv.Itoa(pid)), 0644); err != nil {
		return fmt.Errorf("failed to write PID file: %w", err)
	}

	return nil
}

func init() {
	if err := checkPid(); err != nil {
		fmt.Fprintf(os.Stderr, "Error during PID check: %v\n", err)
		os.Exit(1)
	}
}

// var tempFile string

// func checkPid() {
// 	pid := os.Getpid()
// 	tempFile = strings.TrimRight(strings.ReplaceAll(os.TempDir(), "\\", "/"), "/") + "/.googleindexing.lock"
// 	tmpBuf, err := os.ReadFile(tempFile)
// 	if err == nil {
// 		// 文件已存在
// 		tmpPid, _ := strconv.Atoi(string(tmpBuf))
// 		pro, err := os.FindProcess(tmpPid)
// 		if err == nil {
// 			if tmpPid > 1 {
// 				// 启动新的，结束旧的
// 				_ = pro.Kill()
// 			}
// 		}
// 	}
// 	_ = os.WriteFile(tempFile, []byte(strconv.Itoa(pid)), os.ModePerm)
// }

// // 在初始化的时候就判断 PID，并做相应的判断
// func init() {
// 	checkPid()
// }
//end

Run code

Cut to clipboard

vue项目百度地图如何自定义标注marker

发布时间：2024-12-01, 16:24:19 | 评论：1 | 分类：HTML

1、向地图中添加标注
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

Run code

Cut to clipboard

2、向地图中添加标注
定义标注图标通过Icon类可实现自定义标注的图标

重点：
vue项目中，以import的方式导入图片文件！！！

如：

import drugMarkerIcon from ‘@/assets/map/drug_mark_icon@2x.png' // 以import的方式导入图片文件

Run code

Cut to clipboard

var point = new BMapGL.Point(116.404, 39.915)   
var myIcon = new BMapGL.Icon(drugMarkerIcon, new BMapGL.Size(28, 34)) 
var marker = new BMapGL.Marker(point, { icon: myIcon }) // 创建标注   
this.map.addOverlay(marker) // 将标注添加到地图中
marker.addEventListener('click', function () { //监听标注点击事件
  alert('您点击了标注')   
})

Run code

Cut to clipboard

vue中Bmap百度地图自定义带标签的图标
效果如图

直接上代码吧

let point = new BMap.Point('经度', '维度')
let mk = new BMap.Marker(point)  // 创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false, icon 自定义图标
var label = new BMap.Label(item.address, {
           offset: new BMap.Size(0, 25),
           });
mk.setLabel(label); // 为marker定义标签
this.map.addOverlay(mk)  // 将覆盖物添加到地图中

Run code

Cut to clipboard

Records:1566 1/105 «‹1 2 3 4 5 6 7 8 9 10 11 12 ›»