Skip to content

yued-fe/bobo-electron

Repository files navigation

波波桌面版

  1. 界面UI以及交互由lulu提供技术支持;
  2. 可视化配置,小白也能快速上手;
  3. 采用最新的可呼起APP内分享的分享代码;
  4. SVN配置独立,多人协作更加方便;
  5. 自动生成文件脚手架,无需安装任何依赖和资源包,使用更加方便;
  6. 开发目录更加简洁,除了一个config.json配置文件外,其他都是开发文件内容,更加友好!

下载

Mac: https://github.com/yued-fe/bobo/raw/master/electron/bobo-darwin-x64.zip
Win: https://github.com/yued-fe/bobo/raw/master/electron/bobo-win32-x64.zip

也可以网盘下载(推荐)

Mac: 链接: http://pan.baidu.com/s/1pLsfOmf 密码: wykf (需要安装在应用程序目录下
Win: 链接: http://pan.baidu.com/s/1bFWCnO 密码: 8e4d

使用说明

  1. 下载和安装

    按照上面的地址下载安装包,免安装,直接解压,双击天蓝色圆圆的图标即可运行;

  2. 新建项目

    新建项目按钮位置示意图

    项目创建配置

    项目创建和编辑时候的几个配置项截图示意

    总共有3个配置:

    1. tapdID是项目唯一id,顾名思义,就是当前需求的id。如果是长期项目,如招聘官网之类,也可以使用类似yuewen之类的关键字作为id。

    2. 项目目录是本地开发的资源文件夹目录。如果是静态活动,或者可以走模板开发的动态活动,务必使用template_proj这个SVN项目,路径为trunk/acts/$year$。

      由于波波会自动根据tapdID创建文件夹,因此,选择目录的时候直接到父级目录即可。举个例子,假设tapdID是123456,则目标开发文件夹应该是trunk/acts/2017/123456,但是,选择目录的时候只需要选到2017这层文件夹目录即可!

      文件夹只要选到2017这个年份目录即可示意

    3. 项目名称就是项目的名称,例如“作家10年专题活动模板”,“推书活动模板”等。

    点击“确定创建”按钮后,波波就会基于配置创建项目基础脚手架。

  3. 基于脚手架进行开发与制作

    点击“确定创建”按钮后,在目标文件夹,例如“trunk/acts/2017/123456”下会有如下脚手架目录:

    src
      |--index.html
      |--css
      |--images
      |--js
    config.json

    脚手架文件内置一些必要的设定,例如CSS reset,统一的Zepto或者jQuery地址,以及一些使用策略和说明文档等。

    开发的时候,页面和CSS文件中都使用相对路径开发即可。其中,对于静态页面的相对地址,如果资源同级,务必使用./开头,例如使用src="./images/logo.png"而不是使用src="images/logo.png",否则发布的时候地址替换会遇到麻烦。

  4. 项目基础配置

    发布之前,需要先进行一些基础配置,如下:

    • SVN/Git仓库地址:

      仓库地址

      通常情况下,HTML模板对应的是acts_qidian_pro这个SVN项目,静态资源对应的是gtimg_proj这个SVN项目。

      同样的,选择到年份文件夹即可,波波会自动根据tapdid创建目标文件夹。

    • “参与版本控制的静态资源”就是开发时候使用的业务相关的CSS和JS资源,直接文件名即可,多个资源使用逗号分隔。

    • “生成目录”,默认为build,这个通常没必要修改,也无法修改,最终发布的模板页面就会在这个文件夹下,和src文件夹平级。

    • “替换路径”通常也没必要修改,除非你不使用波波自动生成的脚手架目录结构。

    • “协议”默认为https,通常没有修改的必要。

    • “分享”这里如果分享图片缺省,则没有分享功能,如果有,则可以分享到微信。波波会自动根据这里的设置生成分享代码。同时支持点击页面某按钮触发分享,通常用来在app内呼起微信、微博之类的分享,默认值是#shareBtn,表示选择器为#shareBtn的元素可以呼起分享功能。如果没有特殊情况,请勿修改这个值,因为和静静有某种联系。

      分享图片请使用线上URL地址。

      补充:很多情况下,设计师设计的页面上是没有分享按钮的,但,我们开发的时候,最好还是要加上。脚手架生成的index.html实际上是有示意的,默认白色定位在右上角,通过hidden属性隐藏,只会在app内和静静中显示。

    • “ta统计域名”选择当前专题使用的域名即可。如果选择海外版域名,会自动在生成的html页面中添加海外版标志量(lang属性),以便静静可以识别。
    • “压缩”重点说明下最下面的CSS类名压缩忽略输入框,默认包括:active,checked,disabled,selected,jpg,png,svg,gif,CSS类名压缩只会压缩CSS文件和html页面中的类名,对于JS中的类名是不处理的,如果你的JS中有使用和样式关联的类名,则可以把这个使用的类名加入这个输入框中,就不会参与压缩。当然,更建议的方法是,样式类名不要和JS关联,实现分离。
  5. 发布

    点击“发布页面”按钮,此时波波做了如下事情:

    1. 对应资源自动会分发到SVN/git目录;
    2. 静态资源版本递增(不包括图片),并拷贝到设置的SVN/git目录;
    3. 类名压缩,并发布本地可直接预览版本到build/public文件夹下,如果此文件夹下的html页面预览异常,多半是JS中有样式类名导致;
    4. 添加分享、统计等相关代码,并压缩html页面,保存在build目录下。直接预览无效果,需要把SVG/git中的静态资源全部发布上线、上线后,预览无问题即可发布html模板页面。

升级说明

从v1.2.0版本开始,支持自动升级;v1.2.1支持跨版本升级。每次波波运行都会进行版本检测,当发现版本落后的时候,右下角会有升级按钮,点击此按钮即可升级。

升级按钮示意

也可以手动升级,方法为github项目资源直接替换app文件夹中的资源:

windows:\resources\app
OS X:显示包内容 → \Contents\Resources\app

千万要注意的是,千万不要清空或删除原来的app文件夹进行替换,采用覆盖的方式,例如其中的project.json是你之前的配置信息,删掉就男默女泪了。

开发说明

  1. npm install 安装依赖
  2. npm start 即可运行

如果要发布:

npm install electron-packager -g

然后

electron-packager . bobo --out ../electron

发布后的资源包缺少第三方依赖,在bobo中为html-minifier,复制require-node_modules.zip到resourse/app文件夹下并直接解压即可。