Electron开发实战
weixin_41003240
这个作者很懒,什么都没留下…
展开
-
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 · 319 阅读 · 0 评论 -
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 · 397 阅读 · 0 评论 -
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 · 392 阅读 · 0 评论 -
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 · 637 阅读 · 0 评论 -
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 · 5022 阅读 · 0 评论 -
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 · 426 阅读 · 0 评论 -
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 · 1425 阅读 · 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 · 1239 阅读 · 0 评论 -
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 · 2595 阅读 · 0 评论 -
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 · 554 阅读 · 0 评论 -
Electron开发实战之01-简介
源码 j、源码 j-step Electron 使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用Electron官网上的这句话概括了Electron的作用。在这个系列的文章中,我会通过 Electron,从零开始构建一个应用 - 微信桌面机器人。这个程序使用 webwxapi 简单的实现了给微信发送图文消息的功能:感兴趣吗?你能做...原创 2018-08-03 01:34:31 · 1581 阅读 · 0 评论 -
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 · 523 阅读 · 0 评论 -
Electron开发实战之12-应用架构
源码 j、源码 j-step-c12回头看看,我们已经通过Vue构建了最基本的、静态的用户界面,现在让我们停下来考虑一下应用架构,我们采用一个最基本MVC架构。如下图所示: 搭建架构最关键在于定义和规范各模块之间的接口,也就是我们常说的 api,我们从哪里下手呢? 从架构图看,我们通过 robot与web微信通信,而web微信已经为我们“提供”了api,我们从这里开始吧。 我们在re...原创 2018-08-04 09:53:41 · 718 阅读 · 0 评论 -
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 · 660 阅读 · 0 评论 -
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 · 359 阅读 · 0 评论 -
Electron开发实战之15-webwxapi-03
微信网页版 守护进程一、index_f5ac071.js中的API:二、我们的应用使用了API中的12个:(下图列出了9个)登录 Loginjsloginlogin守护进程 Daemonwebwxnewloginpagewebwxinitwebwxstatusnotifywebwxgetcontactwebwxbatchgetcont...原创 2018-08-07 18:16:07 · 515 阅读 · 0 评论