Electron-vue开发的客户端支付收款工具的实现

2024-08-01 04:07:48

目前实现了支付宝当面付的扫码支付功能、二维码支付功能，即主动扫和被动扫。测试请使用支付宝沙箱环境，支付宝是沙箱版。

最终效果如下：

前端页面使用阿里的组件，ant-design-vue

通过node，使用nedb内存数据库进行本地数据存储

安装文件支持自定义。生成的exe，安装过程如下

程序代码简述

main.js

import devtools from '@vue/devtools'
import Vue from 'vue'
import axios from 'axios'

import App from './App'
import router from './router'
import store from './store'
import db from './nedb'//订单表

import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import alipayhelper from './alipayhelper'

import moment from 'moment'//导入文件

Vue.prototype.$moment = moment;//赋值使用
Vue.prototype.$db = db
Vue.prototype.alipayhelper = alipayhelper;
Vue.use(Antd)

if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 components: { App },
 router,
 store,
 template: '<App/>'
}).$mount('#app')

alipayhelper.js 里存储的支付宝收款方的APPID，pem路径下应用私钥。这些信息可以通过阿里官方申请，即可以在线收款

const path = require('path');
const fs = require('fs');
const moment = require('moment');
const crypto = require('crypto');
const electron = require('electron');
const dataPath = (electron.app || electron.remote.app).getPath('userData');
const home = (electron.app || electron.remote.app).getPath('home');
const appData = (electron.app || electron.remote.app).getPath('appData');
let ALI_PAY_SETTINGS = {
  APP_ID: '2016100100638328',
  APP_GATEWAY_URL: 'http://localhost',//用于接收支付宝异步通知
  AUTH_REDIRECT_URL: 'xxxxxxx',//第三方授权或用户信息授权后回调地址。授权链接中配置的redirect_uri的值必须与此值保持一致。
  //__dirname 获取当前目录，无法在生产模式assr 获取到路径
  /* APP_PRIVATE_KEY_PATH: path.join(__dirname, 'pem', 'rsa_private_key.pem'),//应用私钥
  APP_PUBLIC_KEY_PATH: path.join(__dirname, 'pem', 'rsa_public_key.pem'),//应用公钥
  ALI_PUBLIC_KEY_PATH: path.join(__dirname, 'pem','ali_rsa_public_key.pem'),//阿里公钥*/
  APP_PRIVATE_KEY_PATH: path.join(__static, '/pem/rsa_private_key.pem'),//应用私钥
  APP_PUBLIC_KEY_PATH: path.join(__static, '/pem/rsa_public_key.pem'),//应用公钥
  ALI_PUBLIC_KEY_PATH: path.join(__static, '/pem/ali_rsa_public_key.pem'),//阿里公钥
  AES_PATH: path.join(__dirname, 'pem', 'remind', 'sandbox', 'aes.txt'),//aes加密（暂未使用）
  ALI_GATEWAY_URL: 'https://openapi.alipaydev.com/gateway.do?',//用于接收支付宝异步通知
};

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

使用electron将vue-cli项目打包成exe的方法

如果你已经做好了一个vue的项目,并且想要将他打包成exe,那么请继续阅读. 首先你可以下载一个demo了解一下. git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install npm start 这个demo主要就是main.js和package.json 打开main.js const {app, BrowserWindow} = require('electron
Electron-vue脚手架改造vue项目的方法

1. 什么是Electron Electron可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用.你可以把它看作是专注于桌面应用而不是 web 服务器的,io.js 的一个变体. 这不意味着 Electron 是某个图形用户界面(GUI)库的 JavaScript 版本. 相反,Electron 使用 web 页面作为它的 GUI,所以你能把它看作成一个被 JavaScript 控制的,精简版的 Chromium 浏览器. 从开发的角度来看, Electron app
解决Vue+Electron下Vuex的Dispatch没有效果问题

这个问题是解决基于 vue 和 electron 的开发中使用 vuex 的 dispatch 无效的问题,即解决了 Please, don't use direct commit's, use dispatch instead of this. 问题. 先允许我梳理一下目录结构,以便阅读的时候不会一头雾水,你到底说的这个文件是哪个-- 其中 /src/main 是存放主配置文件的,/src/render 下面有 store.router.components 等. components 下面就
electron-vue利用webpack打包实现多页面的入口文件问题

项目需要在electron的项目中新打开一个窗口,利用webpack作为静态资源打包器,发现在webpack中可以设置多页面的入口,今天来讲一下我在electron中利用webpack建立多页面入口的踩坑经验. 1.webpack的核心概念 •Entry:入口,Webpack执行构建的第一步从Entry开始: •Module:模块,在Webpack里一切皆模块,一个模块对应着一个文件.Webpack会从配置的Entry开始递归找出所有依赖的模块. •Chunk:代码块,一个Chunk由多个模块组
electron + vue项目实现打印小票功能及实现代码

一需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备
Electron-vue开发的客户端支付收款工具的实现

目前实现了支付宝当面付的扫码支付功能.二维码支付功能,即主动扫和被动扫.测试请使用支付宝沙箱环境,支付宝是沙箱版. 最终效果如下: 前端页面使用阿里的组件,ant-design-vue 通过node,使用nedb内存数据库进行本地数据存储安装文件支持自定义.生成的exe,安装过程如下程序代码简述 main.js import devtools from '@vue/devtools' import Vue from 'vue' import axios from 'axios' import
webpack4手动搭建Vue开发环境实现todoList项目的方法

前言平常在工作开发中,为了效率我们通常都会直接使用Vue-cli脚手架去搭建Vue开发环境,确实这种工具是节省了我们不少时间,但是你有没有想过Vue开发环境是如何搭建起来的?还有如果是你自己动手去搭建,能顺利搭建起来吗? 基于这些想法,我就捣鼓了一下webpack4,并且弄下来了这个小项目,感觉一个小项目下来收货还是挺大的,所以就写一遍文章,分享心得,哈哈!! 基于个人的时间精力问题,把本项目教程分为两部分: webpack4手动搭建Vue开发环境 (本篇文章) 手动搭建Vue项目文件夹实现t
electron+vue实现div contenteditable截图功能

最近在学习基于electron + electron-vue开发聊天客户端项目时,需要用到编辑器插入表情功能.一般通过input或textarea也能实现,通过插入[笑脸].(:12 这些标签,展示的时候解析标签就行. 如下图效果: 在网上找到的jq插件实现在textarea光标处插入表情符标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t
全新打包工具parcel零配置vue开发脚手架

parcel-vue 一个基于Parcel打包工具的 VueJS急速开发脚手架解决方案,强烈建议使用node8.0以上项目地址: https://github.com/w3c-king/parcel-vue 初始化项目 $ git clone https://github.com/w3c-king/parcel-vue.git 安装依赖 $ cd parce-vue $ npm install 其中 parcel-bundler 是主要的工具,对于 vue 结尾的单文件,需要单独处理文件类型,
Vue开发工具之vuejs-devtools安装教程及常见问题解决(最详细)

目录一.vue.js插件下载二.Vue开发工具vuejs-devtools下载三.Vue开发工具vuejs-devtools安装+使用四.常见问题解决这绝对是最详细的Vue开发工具vuejs-devtools安装教程,相信你只需要5分钟即可解决所有问题 vue-devtools是什么? vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率. 一.vue.js插件下载下载地址:vue.js插件下载: 点击进入Vue官网即可下载,
electron vue 模仿qq登录界面功能实现

目录 1.使用vuecli创建vue项目 2.安装electron 3.vue项目安装Electron-builder打包工具 4.在vue项目的src下有个background.js文件 5.安装remote模块 6.代码 7.效果图 1.使用vuecli创建vue项目我用的vue2 vue create qq_test 2.安装electron npm install electron -g //or npm install electron@12.0.11 //老版本 3.vue项目安装
Android开发微信APP支付功能的要点小结

基本概念包名值得是你APP的包,在创建工程时候设置的,需要在微信支付平台上面设置. 签名指的是你生成APK时候所用的签名文件的md5,去掉:全部小写,需要在微信支付平台上面设置. 调试阶段,签名文件可以使用调试用的debug.keystore,签名可以直接在eclipse上面查看,或者用工具查看 ,安装打开输入包名即可查看. 发布的时候一定需要在微信支付平台上面设置成发布用的签名值. 官方的Demo里面的内容并不是全是必须的,甚至只需要有libammsdk.jar就够了,AndroidMani
Electron vue的使用教程图文详解

下面详细给大家介绍Electron+vue的使用,具体内容如下所示: .现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Electron是什么?? 对于我来说Electron相当于一个浏览器的外壳,可以把网页程序嵌入到壳里面,可以运行在桌面上的一个程序,可以把网页打包成一个在桌面运行的程序,通俗来说就是软件,比如像QQ.优酷.网易音乐等等.功能的强大超出你的
Go+Vue开发一个线上外卖应用的流程(用户名密码和图形验证码)

图形化验证码生成和验证功能介绍在使用用户名和密码登录功能时,需要填写验证码,验证码是以图形化的方式进行获取和展示的. 验证码使用原理验证码的使用流程和原理为:在服务器端负责生成图形化验证码,并以数据流的形式供前端访问获取,同时将生成的验证码存储到全局的缓存中,在本案例中,我们使用redis作为全局缓存,并设置缓存失效时间.当用户使用用户名和密码进行登录时,进行验证码验证.验证通过即可继续进行登录. 验证码库安装借助开源的验证码工具库可以生成验证码. 首先,安装开源的验证码生成库: go
Electron+vue从零开始打造一个本地播放器的方法示例

为什么要做? 女朋友工作是音频后期,平常会收集一些音频音乐,需要看音频的频谱波形,每次用au这种大型软件播放音乐看波形,很不方便,看到她这么辛苦,身为程序猿的我痛心疾首,于是,就有了这么一个小软件,软件涉及到的技术主要为electron,vue,node,波形的展示主要通过wavesurfer生成. 从零开始-搭建项目项目通过vue脚手架搭建的,所以需要安装cli工具,如果已经装了,可以跳过这一步. npm install -g @vue/cli # OR yarn global add @v

Electron-vue开发的客户端支付收款工具的实现

相关推荐

随机推荐