使用js创建macOS应用(更新:2017-02-18)

发表于   |   分类于   |     |   阅读次数

序言

因为自己不大喜欢喜欢用手机，所以当在手机上看到有些应用只能在手机上使用时觉得好别扭，但是自己也不是写原生应用的人，怎么办呢~
那么问题来了，这个世界上还有 js 不能干的事情吗，js 都能写移动应用了，那能不能用来写桌面应用呢，于世~带着疑问还是 google 然后发现了有意思的了；
原来早就有解决方案了，早在Node.js问世不久之后就出现了 NW.js 这么个东西，但是我们这里不讨论他，哈哈~
为啥呢？因为出现了更好的~ electron 它的前身是 Atom Shell 关于更多细致的内容可以访问官网Electron或自行搜索；
目前使用 electron 已经构建出来的比较出名的 Atom编辑器

可以去官网看下

Atom

资料准备

平台准备

熟悉electron 的 api 接口，然后配合其他教程熟悉了一下接口的使用

2016-12-05

搭建项目脚手架

配置环境，搭建项目结构
Q：框架选型？

由于之前用了 angular 觉得，虽然他是比较好用（由于 angular 是我接触的第一个 MVVM 类型框架，额，虽然用了一段日子了，但是对他真的把控不了，可能是 jQuery 已经深深的印刻在心里了把，哈哈）可以说这种框架才是真正的框架。之前一直觉得jQuery 和 zepto 这种历任几朝几代的元老级对于你已经足够了，哈哈，但是接触 angualr 之后你会懂的什么才叫框架！有兴趣的可以自己去尝试一下，把它用在你的下一个项目里面，当然如果合适的话，对于 web 项目从来就没有一个最好的框架，只有最合适的框架，因为即使你不用任何框架一样可以完成~~

因为之前用 angular 开发微信应用的经历让我一直觉得 angular 实在是太难把控了，因为具体写的时候有些问题还是很痛苦的（具体问题已经记不清了，只能想起来，有段时间我很痛苦~）

再加上现在 React 真的火的不行的，我决定入手~（因为种种原因，之前一直没有用上）

当前决定：

Webpack + Babel + React + css-modules

2016-12-06

使用react-css-module

使用 css module 的时候，每个 className 都要 styles.** 很麻烦，
然后，然后就出现了 react-css-module 可以使用 styleName 来代替 ‘className’，这样就不需要每次都去写 {styles.**} 这样麻烦了，然后也不用必须使用驼峰式写法了（其实是因为不喜欢驼峰式命名 css ，哈哈，可能是因为 BEM 的关系），然后还可以使用多个 class 很方便~

但是使用 react-css-module 每次 export 都要手动指定，例如下面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './App.css';
class App extends React.Component {
    render () {
        return (
        <div styleName='container'>
        </div>
        );
    }
}
export default CSSModules(App, styles);

每个组件都要加上 CSSModules(App, styles) 我觉得很啰嗦~
还好 react-css-module 支持 ES7（暂称 ES7 吧，虽然还是草案） 的Decorators 语法，然后你可以这样写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './App.css';
@CSSModules(styles)
class App extends React.Component {
    render () {
        return (
        <div styleName='container'>
        </div>
        );
    }
}
export default App;

个人感觉这样感觉很好（至少有点逼格，哈哈）

但是最新的 Babel v6 中不知道为啥居然去掉了对 Decorators 的支持（详情点击Babel 官网）查看），官方解释：

Decorators are not currently supported
Decorators are disabled in Babel v6, pending a proposal update – see babel/babel#2645.

Until Babel officially supports decorators again, you might want to try the third-party transform-decorators-legacy plugin, or use Babel v5.

大概意思是说在babel 6里面暂时去掉了对 Decorators 的支持，然后要编译 Decorators 的话要使用第三方的拓展插件babel-plugin-transform-decorators-legacy

技术积累

Q：项目结构是怎样的？
Q：webpack 的配置是怎样的？
Q： cssModules 是怎么使用以及怎么搭配其他 css 处理器(如 sass、less、postcss 等)?
Q：我应该安装哪些 webpack 插件 and 这些插件该如何配置？
Q：开发环境又是怎样？需要热部署吗？

带着这些疑问往后走把~

2016-12-07

分析 API 接口数据

Q：如何存取 Token 内容，如何更新 Token 值？
分析 token 加密规则（如何传递token获取数据）

参考内容：
JWT 认证模式简单描述

2016-12-13

离线存储

Q：如何将下载资源存储到本地，在无网络情况下依然可以使用？
此问题将稍晚更新

2017-02-13

electron 打包 app

我这里使用的是自动打包，手动打包方式请自行Google搜索~

比较好用的自动打包方式：

  • electron-packager [未使用]
  • electron-builder [使用]

这里做一下简单的比较：

electron-packager

  • 使用 electron-packager 打包，macOS系统打包app文件，不能打包exe文件，windows系统可以打包app文件以及exe文件；
  • 支持平台有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64)；
  • 生成的格式：.exe（这里不能生成安装包，只能生成可执行文件及目录）、.app、mas、linux可执行格式；
  • 支持CLI和JS API两种使用方式；

electron-builder

  • electron-builder 可以打包成msi、exe、dmg文件，macOS系统，只能打包dmg文件，window系统才能打包exe，msi文件；
  • 几乎支持了所有平台的所有格式；
  • 可以将prepackage目录（手动或使用electron-packager生成的目录）打包成安装包；
  • 支持Auto Update；
  • 同样支持CLI和JS API两种使用方式；

electron-builder 使用

electron-builder使用说明

安装

1
npm i --save-dev electron-builder

注：确保你的package.json中包含这些字段：name, description, version and author。

然后在pacpackage.json中添加build属性：

1
2
3
4
5
6
7
8
9
"build": {
  "appId": "your.id", (需要发布store的需要注册一下，我这里随便填了一个)
  "mac": {
    "category": "your.app.category.type"
  },
  "win": {
    "iconUrl": "(windows-only) https link to icon"
  }
}

然后再添加两个script命令：

1
2
3
4
"scripts": {
  "pack": "build --dir",
  "dist": "build"
}

在要打包的项目根目录下建立build文件夹，其中存放三个图片：

  1. background.png (macOS DMG background)
  2. icon.icns (macOS app icon)
  3. icon.ico (Windows app icon)

保存以上内容后，运行 npm run dist

等命令执行完之后会在当前项目目录下生dist文件加里面包括：

  • 成可执行程序
  • 安装包
  • zip包

到这里就完成了首次打包！
以上只是一个基本的打包过程，更多的配置可以参看api wiki

asar包

asar格式是Electron项目组推出的一种文件打包格式。
asar是一种将多个文件合并成一个文件的类tar风格的归档格式。 Electron可以无需解压，即从其中读取任意文件内容，甚至可以这么理解，把 asar 当成一个‘文件夹’，使用Node APIs中如fs.readFile或者require可以直接从里面读取文件，但不能写入）。

官方介绍：“An asar archive is a simple tar-like format that concatenates files into a single file. Electron can read arbitrary files from it without unpacking the whole file.”

示例

假设我们在/path/to文件夹下有个example.asar包：

1
2
3
4
5
6
7
$ asar list /path/to/example.asar
/app.js
/file.txt
/dir/module.js
/static/index.html
/static/main.css
/static/jquery.min.js

从asar包读取一个文件：

1
2
const fs = require('fs');
fs.readFileSync('/path/to/example.asar/file.txt');

使用asar包中的一个模块：

1
require('/path/to/example.asar/dir/module.js');

你也可以使用BrowserWindow来显示一个asar包里的web页面：

1
2
3
const BrowserWindow = require('electron').BrowserWindow;
var win = new BrowserWindow({width: 800, height: 600});
win.loadURL('file:///path/to/example.asar/static/index.html');

更多详细内容以及介绍

安装

npm install -g asar

2017-02-18

安装 Electron

这里应该是放在前面的之所以在这里放着呢，是因为我到今天才 install electron 好它，因为 electron 的二进制文件太大（有110多M）在国内这个大小几乎是天文文件了，之前我是直接在 github 上载下来的，然后今天又用到了 electron 这个包就是引不进来，干脆在折腾一遍吧 233333
然后找啊找的找到了 加速electron在国内的下载速度 这个，然后鱼块的下载好了

所有参考内容

参考资料