Android自动生成Shape资源文件，迈出可视化脚手架第一步（上）

系列文章Github开源地址（源码及各项资料不间断进行更新）：

https://github.com/AbnerMing888/AndroidShortcutTools

Hello，各位铁铁，经过前三章的讲述，前置开发的准备都已完成，下面就是针对各个功能的开发。还是前边所说的，可视化脚手架的开发使用的是，web语言，也就是，Html，Css以及JavaScript，对web不是很了解的老铁，可以在不忙的时候，学一学，相对于Android开发而言，还是比较简单的；没有时间学的老铁，也没关系，回头去改我的模板也行，但是，建议还是学学比较好。

这章我们就进入到了撸码时刻，逐步来开发出一个一个应对我们Android场景的功能，这章对应的功能是，Shape的自动生成，我们先一起看下效果：

目前Shape自动生成，主要完成的功能有，自动生成实心，空心，多角度，渐变等功能，可以在选择项目的情况下，自动生成到对应的drawable文件下，而且还贴心的给出了全局的dp和color前缀配置，可以灵活的满足我们实际开发中的要求，点两下，就可以根据UI样式生成我们想要的效果，大家可以下载源码，体验一下。

这样的一个简单功能我们该如何实现呢？其实也非常简单，就是几个简单的html页面，加上一些js交互方法，对实现方式感兴趣的老铁，可以继续往下浏览，不太关注实现方式的，可以直接下源码，运行看效果哦~

准备好了吗？我们开始发车！

由于内容有点多，我们分为上下两部分，今天我们先讲述上半部分。

一、文件及Dialog环境配置

通过上边的gif效果图我们可以发现，我们需要选择电脑的路径，以及对文件的查询，创建，写入等功能，弹出dialog选择目录，在electron里我们需要引入一个模块remote，remote 模块提供了一种在渲染进程和主进程之间进行进程间通讯的简便途径，使用 remote 模块，可以调用主进程对象的方法，而无需显式地发送进程间消息，这类似于 Java 的 RMI，虽然说13版本之后禁用了Remote模块，但是也提供了使用一个新的包 @electron/remote 来替代。

安装@electron/remote，进入到你的工程目录下，执行下面的命令：

npm i -D @electron/remote

如下图所示：

执行完成之后，在node_modules目录下，就会生成一个@electron目录，如下图：

接着我们在index.js文件里，进行如下初始化：

contextIsolation为fasle时可以渲染器过程中使用 require()。

文件操作

文件的操作，至关重要，毕竟我们所有的功能都需要进行创建文件以及存储到相关目录中，对于这块的知识点，老铁们，可以关注一下；文件的增删改查，在electron里，某个页面如果用到了和文件交互的功能，我们就可以引入fs模块，如下图：

下面我们针对其中的功能点，一一做的简单的概述，当然了，不是很全，大家想了解的更多的话，可以去网上搜一搜。

1、新建目录

fs.mkdir(“路径”, function(err){
if (err) {
console.log('mkdir err:'+err)
    }
console.log('New Directory Created')
})

2、读取目录信息

使用fs.readdir()或同步的fs.readdirSync()方法能够读取目录的信息。调用的结果是一个当前目录下文件和子目录的字符串数组。

fs.readdir(“路径”, function(err, files){
if (err) {
console.log(‘readdirerr:'+err)return    }
console.log(files)
})

3、删除目录

使用fs.rmdir()或同步的fs.rmdirSync()方法能够删除目录，并且不会返回信息：

fs.rmdir(myDir, function(err){
if (err) {
console.log('rmdir err:'+err)
return    }
console.log('deleted the directory')
})

4、写文件

fs.writeFile方法可以对文件进行写操作，如果没有则会创建，有的话，内容则会覆盖。

fs.writeFile(“文件的名字”, content, function (err) {
if (err) {
console.log("An error occurred creating the file "+err.message)
    } else {
console.log("The file has been successfully saved")
    }
})

5、读文件

fs.readFile读取用户本地文件有两种方式：读取完整文件和读取文件的一部分，读取完整文件是最常用的操作。基本用法如下：

fs.readFile(filepath, 'utf-8', function (err, data) {
if (err) {
alert("An error occurred reading the file :"+err.message)
return    }
//Display the file contentsconsole.log("The file content is : "+data)
})

6、删除文件

fs.unlink()方法能够删除用户电脑上的文件。由于这个操作基于标准POSIX方法（Portable Operating System Interface of UNIX，用于操作文件和目录的标准命令集），所以删除方法叫做unlink。可以使用fs.existsSync()测试文件是否还存在：

if (fs.existsSync(filePath)) {
fs.unlink(filepath, function (err) {
if (err) {
console.log("An error ocurred updating the file"+err.message)
return        }
console.log("File succesfully deleted")
    })
}

7、获取文件信息

通过fs.stats方法可以获取文件信息。这个方法可以确定是文件还是一个目录。如下代码段进入某个目录，然后输出了文件信息：

fs.stat(filePath, function (err, stats) {
if (err) {
returnconsole.error(err)
   }
console.log(stats)
console.log("Got file info successfully!")
// Check file typeconsole.log("isFile ? "+stats.isFile())
console.log("isDirectory ? "+stats.isDirectory())
})

以上就是fs中提供的几个操作文件的方法，各位老铁可以简单的了解一下。

这里简单的说一个注意点，如果你是用iframe引入的网页，那么在引入模块的时候，需要在前边增加parent。

二、基础信息配置页

基础信息的配置，是一个全局的配置项，比如统一的路径，dp，color的前缀，以及后面的对象继承，头参数的设置等等。

这个页面备注的信息，已经描述的很清楚了，这里再啰嗦一下。

选择项目生成路径，大家尽量要选择一个Android项目，因为后面所有的功能，都是和这个路径相关的，我会把一些功能，直接生成到对应的目录下，比如，shape文件，我就会直接生成到res下的drawable文件下；当然了，你也可以不选择，这个随你心意。

dp前缀和color前缀，以你的项目为标准，来设置相关的前缀，一般都是统一的，比如我们公司，dp前缀是@dimen/common_dp_，后面是不同的大小，这样在生成的时候，大小设置相关的，都会以此前缀+大小为标准，省的再修改了，所以啊，老铁们，前缀很有必要的，这个功能一定要用起来。例如下面使用了前缀的代码：

代码就不全贴了，大家看github源码即可，贴几个主要的方法，讲述一下：

给出提示弹框，我们可以使用下面，这是一个info类型的，当然了还有其他的类型，大家可以根据自己的实际业务进行选择，目前提供的有"none", "info", "error", "question" or "warning"。

functionshowSuccess(msg) {
constrequire=parent.window.require;
constdialog=require('@electron/remote').dialog;
dialog.showMessageBox({
type: 'info', //弹出框类型message: msg    });
}

选择文件路径，也就是，打开系统的选择路径窗口，前提需要进行引入dialog模块

constdialog=require('@electron/remote').dialog;

dialog.showOpenDialog({
properties: ['openDirectory']
}).then(result=> {
constpath=result.filePaths;
if (path!=null&&path!="") {
//选择后回显$(".config_file_input").val(path);
//进行保存路径localStorage.setItem("select_path", path)
    }
});

基础信息配置没有什么好说的啊，页面的绘制，大家看config.html文件，都是一些标签语言，这个没什么好说的，config.js文件，最主要的方法，就是上边的路径选择，然后保存，和回显，用到了localStorage来进行存和取。

Js用到的是Jquery开发，说到这，有一个需要注意的，在electron里直接引入Jquery会报错，需要按照如下方式进行引入：

<script>if (typeofmodule==='object') {
window.module=module;
module=undefined;
}</script><scriptsrc="../jquery-2.2.0.min.js"></script>

后续针对开发中的问题，我会进行梳理总结，给到大家。

好了老铁们，这章就到这里，我们下半部分继续。