自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

越陌度阡

力量要用来分享,才能承前启后。

  • 博客(571)
  • 论坛 (1)
  • 收藏
  • 关注

原创 Electron项目打包

1. electron-packager模块打包1. 安装模块npm install electron-packager --save-dev2. 配置打包命令electron-packager <sourcedir> <appname> <platform> <architecture> <electron version> <optional options>参数说明:sourcedir:项目所在...

2021-05-05 22:15:14 17

原创 Electron-Vue中操作本地数据库NeDB

NeDB是使用Node.js实现的一个NoSQL嵌入式数据库操作模块,可以充当内存数据库,也可以用来实现本地存储,甚至可以在浏览器中使用。查询方式比较灵活,支持使用正则、比较运算符、逻辑运算符、索引以及JSON深度查询等。NeDB嵌入到了应用程序进程中,消除了与客户机服务器配置相关的开销,在运行时,也只需要较少的内存开销,使用精简代码编写,速度更快。其API是MongoDB的一个子集,可以通过这些接口轻松管理应用程序数据,而不依靠原始的文档文件。具有简单、轻量、速度快等特点,由于嵌入式数据库存储总数

2021-05-01 22:23:39 32

原创 Electron中自定义窗口导航条

1. 隐藏顶部菜单调用BrowserWindow模块创建主窗口以后设置菜单为空即可。mainWindow.setMenu(null); 如果是Mac系统,上面的设置可能会不生效,需要利用app模块做以下操作。app.dock.hide();2. 实现导航条可拖拽在自定义的导航条容器外层添加CSS样式设置。.my-header { width: 100%; height: 30px; line-height: 30px; background.

2021-05-01 19:39:24 15

原创 Electron-Vue的基本使用

Electron-Vue是个可以让我们使用Vue来开发Electron桌面程序的框架,单页面的应用解决了在Electron中每次打开新页面都要创建窗口的烦恼。Github地址:https://github.com/SimulatedGREG/electron-vue官方文档:https://simulatedgreg.gitbooks.io/electron-vue/content/cn/1. 环境搭建// 安装脚手架npm install -g vue-cli// 初始化项目vue

2021-04-30 00:49:28 85 4

原创 Electron中使用clipboard模块实现复制粘贴功能

软件开发中复制粘贴是一种比较常见的功能,如复制微信号引导用户粘贴去搜索关注,还有常见的复制图片进行粘贴。Electron中的clipboard模块就是用来实现这些功能的,该模块可以复制粘贴文本、复制粘贴图片、复制粘贴html等等,以下是代码实现。主进程文件main.js代码如下:// main.jsconst { app, BrowserWindow } = require("electron");const path = require("path");const createWi

2021-04-26 00:10:21 58

原创 Electron中globalShortcut模块注册全局快捷键

Electron中使用globalShortcut模块来注册全局快捷键,以实现类似于微信和QQ按快捷键调用剪切窗口的功能。快捷键在应用程序加载完成后进行注册,在应用程序退出之前取消注册快捷键,以下是代码实现:主进程文件main.js代码:// main.jsconst { app, BrowserWindow } = require("electron");const path = require("path");const createWindow = () => {

2021-04-25 23:45:50 26

原创 Electron中的消息通知

Electron中的消息通知是基于H5的Notification来实现的,比较常见的使用场景是用于监听网络变化然后进行消息提示。1. 消息提示var option = { title: '温馨提示', body: '不要天天坐在电脑前,要注意休息!'};var myNotification = new window.Notification(option.title, option);// 给提示添加点击事件myNotification.onclick = function

2021-04-25 20:50:50 32

原创 Electron中使用tray模块实现系统拖盘

Electron中的tray模块主要用来实现桌面软件特有的拖盘功能,包括创建拖盘图标、拖盘悬停提示、拖盘右键菜单、拖盘消息提示等等。1. 创建拖盘var { Menu, Tray, BrowserWindow, app } = require('electron');var path = require('path');// 创建拖盘var iconTray = new Tray(path.join(__dirname,'../static/love.png'));2. 鼠标悬停拖盘

2021-04-25 18:20:48 24

原创 Electron实现一个简易的编辑器

众所周知,大名鼎鼎的VS Code编辑器是用Electron写出来的,近日因为工作需要,对Electron进行了复习和实践,写了一个简单的编辑器。编器主要实现了这些功能:应用菜单、右键菜单、新建、打开、保存、打印、退出以及打开HTML文档时代码高亮显示,以下是是代码实现,相关注释都已写好给大家做参考。主进程文件index.js代码如下:// index.jsconst { app, BrowserWindow } = require('electron');const path = req

2021-04-25 11:55:49 30

原创 Electron 中的常用对话框

1. 错误提示框remote.dialog.showErrorBox("错误","数据输入错误")2. 消息提示框(异步)remote.dialog.showMessageBox({ type:"info", buttons:["确认","取消"], title:"关于我们", message:` 这是一个神有奇的软件, 当你打开的时候, 你会发现你离不开它了, 因为你关不掉了, 哈哈哈... `}).then

2021-04-20 13:23:42 26

原创 Electron中通过shell模块打开链接地址

1. 在外部浏览器中打开外部链接var {shell}=require('electron')shell.openExternal('https://github.com');2. 在内部iframe中打开外部链接Electron5.x 之后官方不建议使用 webview 标签,可以使用 iframe 替代 webview,代码如下:<iframe id="myWebview" name="myWebview" style="width:100%;height:400px.

2021-04-19 22:12:23 46

转载 林晓斌MySQL实战第二十六讲-备库为什么会延迟好几个小时?

在上一篇文章中,我和你介绍了几种可能导致备库延迟的原因。你会发现,这些场景里,不论是偶发性的查询压力,还是备份,对备库延迟的影响一般是分钟级的,而且在备库恢复正常以后都能够追上来。但是,如果备库执行日志的速度持续低于主库生成日志的速度,那这个延迟就有可能成了小时级别。而且对于一个压力持续比较高的主库来说,备库很可能永远都追不上主库的节奏。这就涉及到今天我要给你介绍的话题:备库并行复制能力。为了便于你理解,我们再一起看一下第 24 篇文章《MySQL 是怎么保证主备一致的?》的主备流程图。如下

2021-04-19 11:28:53 25

原创 Electron 中渲染进程与渲染进程之间的通信详解

Electron中渲染进程与渲染进程之间的通信主要有两种方式,一种是通过本地存储来实现,另外一种就是借助主进程进行传递消息。1. 渲染进程之间通过本地存储进行通信渲染进程index传递消息。// index.jswindow.onload = () => { var button = document.getElementById("button"); button.onclick=()=>{ // 传递消息给另外一个渲染进程 lo

2021-04-18 20:37:55 73 4

原创 Electron 中主进程与渲染进程之间的通信详解

Electron 主进程和渲染进程的通信主要用到两个模块:ipcMain 和 ipcRenderer。ipcMain:当在主进程中使用时,它处理从渲染器进程发送出来的异步和同步信息,也可以从主进程向渲染进程发送消息。ipcRenderer: 使用它提供的一些方法从渲染进程发送同步或异步的消息到主进程,也可以接收主进程回复的消息。1. 渲染进程给主进程发送异步消息渲染进程给主进程发送异步消息:// ipcRenderer.jsconst {ipcRenderer} =require("

2021-04-18 00:21:43 38

转载 林晓斌MySQL实战第二十五讲-MySQL是怎么保证高可用的?

在上一篇文章中,介绍了 binlog 的基本内容,在一个主备关系中,每个备库接收主库的 binlog 并执行。正常情况下,只要主库执行更新生成的所有 binlog,都可以传到备库并被正确地执行,备库就能达到跟主库一致的状态,这就是最终一致性。但是,MySQL 要提供高可用能力,只有最终一致性是不够的。为什么这么说呢?今天我就着重和你分析一下。这里,我再放一次上一篇文章中讲到的双 M 结构的主备切换流程图。如下图1 所示为MySQL 主备切换流程 -- 双 M 结构图:主备延...

2021-04-17 14:45:15 13

原创 Electron 中使用menu模块创建菜单

1. 模块简介Electron 中 Menu 模块可以用来创建原生菜单,它可用作应用菜单和上下文菜单,此模块是一个主进程的模块,可以通过 remote 模块在渲染进程调用。2. 菜单实现首先是mian.js文件的代码如下:const { app, BrowserWindow } = require("electron");const path = require("path");const createWindow = () => { // 创建窗口 c.

2021-04-16 23:09:17 55

原创 Eelectron 中的remote模块

1. 模块分类在Electron中的模块有些只能在主进程中使用、有些只能在渲染进程中使用、只有一小部分模块在主进程和渲染进程中都可以使用,主要分类如下:2. remote模块Electron 中与 GUI 相关的模块只存在于主进程,而不在渲染进程中 ,为了能从渲染进程中使用它们,需要给主进程发送进程间消息。remote 模块提供了一种在渲染进程和主进程之间进行进程间通讯的简便途径,使用 remote 模块,可以调用主进程对象的方法,而无需显式地发送进程间消息,这类似于 Java 的 R.

2021-04-15 23:27:55 48

原创 Electron的运行流程、主进程与渲染流程

1. 运行流程1. 确定应用程序的起点;2. 启动应用程序并创建一个渲染进程;3. 为应用程序布局和添加样式;4. 使用IPC在主进程中执行任务并从主进程中获取信息;2. 主进程与渲染流程package.json 中定义的入口被称为主进程,在主进程中实例化 BrowserWindow 创建的 Web 页面被称为渲染进程。一个 Electron 应用只有一个主进程,但是可以有多个渲染进程, 每个 Electron 中的 web 页面运行在它自己的渲染进程中。主进程使用 ..

2021-04-14 23:51:12 34

原创 Electron项目创建的三种方法

1. 克隆仓库,快速启动1. 克隆项目git clone https://github.com/electron/electron-quick-start2. 进入这个项目下cd electron-quick-start3. 安装依赖npm install4. 运行项目npm start打开快速启动的项目,主要有以下几个文件:(1). index.html ,渲染进程;(2). render.js,渲染进程,在index.html中引用;(3). ma

2021-04-14 00:14:19 60 1

原创 Electron跨平台开发框架介绍

1. Electron框架简介Electron 是由 Github 开发的一个跨平台的桌面应用开发框架,可以让我们用前端技术开发桌面上面可以安装的软件。目前用Electron开发的成熟软件有很多,鼎鼎大名的VS Code编辑器就是用Electron开发的。打开Electron的官网,可以看到下面这些软件也是Electron开发的。Github地址:https://github.com/electron/electronElectron官网:https://www.electronjs.o

2021-04-11 23:21:09 62 6

原创 Element 中表单输入小于1的小数

<template> <div> <el-form> <el-form-item label="返点" label-width="100px" > <el-input clearable autocomple.

2021-03-02 15:33:41 72 2

原创 Element 中时间选择器限定选择时间在某一个月内

<template> <div> <el-date-picker type="date" class="filter-item" placeholder="投放日期" value-format="yyyy-MM-dd" v-model="queryParam.drop_day" :picker-options=.

2021-03-02 11:11:52 75

原创 Flutter 中使用 Socket.io 实现即时通信

1. 安装插件dependencies: socket_io_client: ^0.9.12在pubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖包。如果无法正常下载,执行flutter pub get。2. 引入插件在需要用到的该插件的文件中引入插件包。import 'package:socket_io_client/socket_io_client.dart';3. 使用插件import 'package:flutter/m...

2021-02-15 15:00:29 290 2

原创 Flutter中项目国际化

1. 按装插件dependencies: flutter: sdk: flutter # 国际化 flutter_localizations: sdk: flutterpubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖包。如果无法正常下载,执行flutter pub get。2.引入插件// main.dart // 引入本地化的包import 'package:flutter_localizations/flu...

2021-02-15 13:04:56 1222 2

原创 Flutter在IOS平台实现消息推送

1. 配置项目的包名2. 申请IOS生产证书IOS的生产证书在极光推送IOS平台配置时需要用到,完成这个证书的创建过程比较复杂,以下分为三个阶段来完成。第一步:创建标识符。登录苹果开发者中心,选择 证书/标识符/资料 。添加标识符。选择标识符类型,点击继续。输入描述及包名,点击继续。点击继续之前,记得勾选推送消息功能。至此,标识符添加完毕,在标识符列表就可以看到了。第二步:生成钥匙串文件。打开苹果电脑的钥匙串访问功能。...

2021-02-15 11:26:43 255

原创 Flutter在Android平台实现消息推送

1. 极光推送平台申请应用1. 注册极光推送平台;https://www.jiguang.cn/push2. 极光推送平台创建应用;填写应用程序名称。选择平台,选择服务,点击下一步。需要输入应用包名(Android平台),选择渠道,点击下一步。如果是IOS平台,设置的时候会麻烦一些,还需要配置相关的证书,如下图所示。完成上面的操作在应用管理中就可以看到创建的应用程序了。点击“应用设置”,就可以看到应用信息了,其中AppKey非常重要,在项目中使..

2021-02-14 10:53:48 1170 5

原创 Flutter 中使用原生功能在IOS中的权限配置

Flutter项目中在使用原生的一些功能时,必须要在Info.plist文件中配置使用权限,否则在提交审核时无法通过。1. 添加权限打开配置权限的文件,路径为:ios▸Runner▸ Info.plist。其中key为所指的权限,string为权限的说明,如下图所示:2. 常见权限<key>NSPhotoLibraryUsageDescription</key><string>访问相册</string><key&g..

2021-02-13 21:35:32 188

原创 Flutter中对IOS项目进行真机调试、项目打包、提交审核

1. 真机调试1. 准备工作(1). 拥有苹果开发者账号个人(每年99美元)、公司(每年99美元)、企业(每年299美元)账号均可;(2). 能上网的苹果电脑 MacOS(苹果虚拟机也可以)、Xcode开发工具、IOS 设备(手机或平板);2. 配置调试设备(1). 手机连接电脑,打开 iTunes 软件,点击序列号字母处,获取 iPhone 手机的 UDID;下图为点击后的效果:(2). 打开苹果开发者账号,配置调试用的iPhone手机的UDID;在设备管理中.

2021-02-13 17:47:20 2375 5

原创 Flutter中修改Android项目的应用名称、应用图标、应用启动画面

1. 修改应用名称在 android ▸ app ▸ src ▸ main▸ AndroidManifest.xml 中修改 android:label="你的应用名称"。2. 修改应用图标在 android ▸ app ▸ src ▸ res ▸ mipmap 下面对应的文件夹中替换相应图片。上图左侧红框里多个文件夹里的图片都要进行替换,目的是为了适配多种屏幕显示器,在替换时一定要保持原有图片的尺寸大小,所以必须要准备多个大小不同的PNG格式的图标。3. 修改启动画..

2021-02-11 21:11:11 114 1

原创 Flutter中打包Android项目及升级Android项目

1. 打包Android项目1. 用Android Studio 打开Flutter项目中的 android 文件夹;2. 选择生成签名后的APK;选择打包成APK,没有系统版本的限制。首次打包时,需要创建新的 Key Store。按要求填写相信关息,生成新的Key Store。以下是Key Store生成完成后的状态。选择打包的形式。...

2021-02-11 01:37:43 2063 8

原创 Flutter中实现微信支付流程

1. 微信支付流程上面的流程图来自于官方,看起来比较复杂,其实大部分的流程都是由官方自己完成的,下面是一个简易的流程图示例:简要的说明一下:步骤1:用户在商户APP中选择商品,提交订单,选择微信支付;步骤2:商户后台收到用户支付单,调用微信支付统一下单接口;步骤3:微信统一下单接口返回正常的prepay_id,再按签名规范重新生成签名后,将数据传输给APP。参与签名的字段名为appid,partnerid,prepayid,noncestr,timestamp,package;

2021-02-10 18:02:41 324

原创 Flutter 接入微信支付之前的准备工作

1. 微信支付必备内容1. 企业营业执照、对公账户;2. 在微信平台申请成功后生成的相关信息:(1). APPID:应用 APPID。必须配置,开户邮件中可查看;(2). MCHID:微信支付商户号。必须配置,开户邮件中可查看;(3). KEY:API 密钥。参考开户邮件设置,必须配置,登录商户平台自行设置;2.开放平台商户申请接入...

2021-02-10 14:13:51 1271 2

原创 Flutter中实现支付宝支付流程

1. 支付宝支付流程上面的图来自官方的文档,看起来比较繁琐,下面的图是流程的简化版。简单解释一下流程步骤:1. 当用户点击支付宝支付的时候,客户端请求App的服务端接口,此时,App的服务端会请求支付宝的服务器获得生成的签名信息返回给客户端;2. 客户端获取生成的签名信息以后,调用Flutter提供的支付宝SDK,传入签名信息,调起支付宝支付, 用户输入完密码完成支付以后,支付宝的服务器首先会给App返回支付结果,同时,支付宝的服务器还会异步通知App的服务器进行订单更新。.

2021-02-08 00:15:58 2444 3

原创 Flutter 接入支付宝支付之前的准备工作

1. 打开支付宝开放平台,点击网页&移动应用;如果没有入驻成为开发者,请先注册。应用类型分为两大类:第三方应用、自用型应用。第三方应用:适用于服务商, 为商户开发应用,拓展商户使用,目前仅支持小程序的三方接入,接入小程序前,必须先申请小程序的公测。自用型应用:使用开放的功能,为自己或自己公司开发应用,自研型应用分为网页/移动、AR(仅企业支付宝)、小程序(仅企 业支付宝)、生活号。网页&移动应用和第三方应用的区别是一个是自己使用,一个是帮助第三方去签约相关产品。.

2021-02-06 00:47:00 405 4

原创 Flutter 中使用url_launcher打开外部浏览器 、打开外部应用、拨打电话、发送短信、发送邮件

1. 安装插件dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0.10 flutter_html: ^

2021-01-31 23:58:21 267 3

原创 Flutter应用程序版本更新与自动升级配置方法

1. 应用程序升级流程由于在 IOS中没法直接下载安装,如果版本不一致则直接跳转到IOS应用对应的应用市场就可以了,所以本文仅介绍Android App的升级流程。Android App升级流程:1. 获取本地版本号;2. 请求服务器获取服务器版本号;3. 如果本地版本和服务器版本不一致则提示升级,弹窗提示用户是否更新;4. 用户确定升级,调用文件传输方法下载apk文件;5. 监听下载进度;6. 下载完成打开apk进行安装。2. Android 升级 App 涉...

2021-01-31 22:04:14 1436 4

原创 Element 中根据屏幕大小动态计算表格高度以实现固定表头

在Element UI的表格组件中,要想固定表头,必须给表格指定一个高度,但是用户的屏幕大小是不一样的,为了能将表格底部的分页区域始终显示在屏幕内,就需要动态计算表格的高度。以下是代码实现:<template> <div class="table-container"> <!-- 1. 绑定动态计算的表格高度 --> <el-table :data="data" style="width:100%" :height=

2021-01-26 10:45:13 160

原创 Element 中使用加载动画

<script>// 1.引入动画组件import { Loading } from 'element-ui';export default { name:"Index", data() { return { // 2.定义实例 loadingInstance:null, list:[] }; }, methods: { getDa.

2021-01-26 10:27:08 178

原创 Flutter中使用barcode_scan_fix实现二维码扫描

1. 安装插件dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0.10 flutter_html: ^

2021-01-25 23:09:24 235

原创 Flutter中使用shared_preferences本地存储

1. 安装插件配置shared_preferences 插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio.

2021-01-24 21:04:19 108

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除