- 博客(17)
- 收藏
- 关注
RSS订阅原创 Electron开发实战之16-eslint and jest
源码 j我们已经写了静态的用户界面，该加入一些业务逻辑了，就从前面的12个webwxapi开始吧。 不过在此之前，我们还需要做一件事，构建单元测试环境（本系列没有涉及到集成测试），我们使用jest，顺便把eslint也装上。bash# jestyarn add -D jest babel-jest 'babel-core@^7.0.0-0' @babel/core rege...
2018-08-09 03:18:55
514
原创 Electron开发实战之15-webwxapi-03
微信网页版 守护进程一、index_f5ac071.js中的API:二、我们的应用使用了API中的12个:(下图列出了9个)登录 Loginjsloginlogin守护进程 Daemonwebwxnewloginpagewebwxinitwebwxstatusnotifywebwxgetcontactwebwxbatchgetcont...
2018-08-07 18:16:07
485
原创 Electron开发实战之14-webwxapi-02
分析 微信网页版 扫码登录一、来源于index.html的三个js文件aq_common.js: 与网络安全方面相关vendor_7ee9f11.js: 第三方依赖和库index_f5ac071.js: 重点！业务逻辑在这里面二、jslogin: 请求二维码jslogin 的 Response Headers 中的 Content-Type为text/j...
2018-08-07 18:14:51
382
原创 Electron开发实战之13-webwxapi-01
Chrome 开发者工具打开Chrome 开发者工具在Chrome菜单中选择 更多工具 > 开发者工具使用 快捷键 Ctrl+Shift+I(Windows) 或 Opt+Cmd+I (Mac)在页面元素上右键点击，选择 “检查”面板Elements: 操作DOM和CSSConsole: 与页面交互，显示日志等So...
2018-08-07 18:13:40
362
原创 Electron开发实战之12-应用架构
源码 j、源码 j-step-c12回头看看，我们已经通过Vue构建了最基本的、静态的用户界面，现在让我们停下来考虑一下应用架构，我们采用一个最基本MVC架构。如下图所示： 搭建架构最关键在于定义和规范各模块之间的接口，也就是我们常说的 api，我们从哪里下手呢？ 从架构图看，我们通过 robot与web微信通信，而web微信已经为我们“提供”了api，我们从这里开始吧。 我们在re...
2018-08-04 09:53:41
692
原创 Electron开发实战之11-SendMessage.vue
源码 j、源码 j-step-c11首先我们在components文件夹下创建SendMessage.vuerenderer/index.js// 请添加高亮部分代码...// import { Button, Input, // TabPane, // Tabs } from 'element-ui'...Vue.component(Button.nam...
2018-08-04 09:52:04
634
原创 Electron开发实战之10-ChatList.vue
源码 j、源码 j-step-c10首先我们在renderer目录下创建components文件夹，在components文件夹下创建ChatList.vue。components/ChatList.vue<template> <div id="chat-list"> <div id="item-wrap"> <...
2018-08-04 09:50:15
335
原创 Electron开发实战之09-Chat.vue
源码 j、源码 j-step-c9我们先实现一个简单的流程：可以看到，对于Chat.vue页面，我们需要一个Tabs组件。 我们选用element-ui快速搭建页面。bashyarn add element-ui -Drenderer/index.js// 添加代码...import { TabPane, Tabs } from 'element...
2018-08-04 09:48:11
294
原创 Electron开发实战之08-Login.vue
源码 j、源码 j-step-c8我们来直接仿造 微信网页版 的登录界面 首先我们在renderer目录下创建assets文件夹，在assets文件夹下放入login-bg.jpgviews/Login.vue<template> <div id="login"> <div id="card"> <div i...
2018-08-03 01:49:36
610
原创 Electron开发实战之07-vue-router
源码 j、源码 j-step-c7首先安装依赖bashyarn add vue-router -D在renderer目录下添加几个文件夹及文件，完成后项目结构差不多如下：renderer│└───router│ │ router-config.js│ │ routes.js│ └───views│ │ Chat.vue│ ...
2018-08-03 01:48:11
4736
原创 Electron开发实战之06-vue
源码 j、源码 j-step-c6bashyarn add vue electron-webpack-vue -Drenderer/index.jsimport Vue from 'vue'new Vue({ render: h => h('h1', 'Hello World')}).$mount('#app')bashyarn ...
2018-08-03 01:46:39
398
原创 Electron开发实战之05-build
源码 j、源码 j-step-c5main/index.js// app: 控制你的应用程序的事件生命周期// BrowserWindow: 创建和控制浏览器窗口import { app, BrowserWindow } from 'electron'import * as path from 'path'import { format as formatUrl } fr...
2018-08-03 01:44:54
1242
2
原创 Electron开发实战之04-Hello World
源码 j、源码 j-step-c4是时候启动我们经典的Hello World仪式了！ 让我们添加几个文件夹及文件，完成后项目结构差不多如下：j-step│└───node_modules│└───src│ │ │ └───main│ │ │ index.js│ ││ └───renderer│ │ index.js...
2018-08-03 01:42:57
989
原创 Electron开发实战之03-开发环境
源码 j、源码 j-step-c3nvmnodejs 版本管理工具, 用于管理多个node.js版本Node.js基于Chrome的V8 JavaScript引擎构建的JavaScript运行时yarnnpm包依赖管理工具electron使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用webpack加载资源、捆绑模...
2018-08-03 01:40:47
2380
原创 Electron开发实战之02-github
源码 j、源码 j-step-c2 1. 在 github上创建仓库 j-step 通过你的命令行终端在你的任意目录下输入以下命令: bashmkdir j-stepcd j-stepecho '# j-step' >> README.mdgit initgit add .git commit -m 'add README.md'git remote...
2018-08-03 01:36:49
548
原创 Electron开发实战之01-简介
源码 j、源码 j-step Electron 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用Electron官网上的这句话概括了Electron的作用。在这个系列的文章中，我会通过 Electron，从零开始构建一个应用 - 微信桌面机器人。这个程序使用 webwxapi 简单的实现了给微信发送图文消息的功能:感兴趣吗？你能做...
2018-08-03 01:34:31
1346
原创 微信个人网页版API的微信机器人
微信个人网页版API的微信机器人， github 上有很多轮子了，来一个 electron-vue 版的，完全开源github 项目地址https://github.com/joehecn/j安装Windows, MacOS 两个版本百度网盘：https://pan.baidu.com/s/1i4QFrzn.dmg.zip 后缀的是 MacOS安装文件.rar 是 Windows安装文件前
2017-11-09 14:49:43
8289
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人