# cocos-generator

cocos creator技术框架下的H5互动模板框架脚手架，基于cocos creator实现快速开发基于绘玩云的H5互动课件。

[视频教程传送门](https://www.bilibili.com/video/BV1Dq4y1t7n5/)

# 使用简介

## 前期准备

* git下载  https://git-scm.com/downloads 
* nodejs下载  https://nodejs.org/zh-cn/download/
* 谷歌浏览器下载  https://www.google.cn/chrome/

都下载最新版就行，然后默认安装就可以


## 生成项目

* 登录绘玩云课件开发平台：http://staging-teach.ireadabc.com/ 
* 点击“登录账号，查看我的课件”
* 输入测试的用户名/密码：developers/12345678
* 在右上角“个人中心”的下拉菜单里，点击“我的模板” 菜单，然后点击“新建模板”, 填写必要的信息，在“技术选型”一项上选择“Cocos”
* 点击“确定”后，列表页就会出现一个新生成的模板项目
* 在项目的卡片下找到“开发”按钮，则会弹出相对应的git地址

## 获取并启动项目

```
// xxx 是上面项目对应的Git地址
git clone xxx
cd 项目名称/
npm install

```
* 打开Cocos Creator, 点击项目（Project）=> 添加（Add） 在打开的对话框里面选择进入clone下来的项目，选择本项目，然后打开
* 基于项目里“this.data”进行常规的Cocos开发 (其中this.data是云平台的配置数据)
* 注意 Cocos Creator 版本必须是2.4.5


## 本地调试

在基于CocosCreator的开发与预览调试都完成之后，需要进行模板放到云平台上的数据配置等方面的调试，还要进行cocos打包到IOS/Android真机上的调试，为了更方便与高效的调试，我们提供了如下工具进行调试与测试

### 普通模板

* 启动本地服务

```
npm start
```

* 打开浏览器：http://staging-teach.ireadabc.com/template_ci/debug 
* [点击查看调试视频教程](https://www.bilibili.com/video/BV1Dq4y1t7n5?p=8)

### 真机调试

* 下载模板调试专用app 

安卓下载：

http://download-iplayabc.oss-cn-beijing.aliyuncs.com/iDebugABC.apk

![avatar](http://staging-teach.cdn.ireadabc.com/084f2f95-8213-4c5a-8c46-b194819d7677.png)


iOS下载：

由于调试APP没有上架App Store 所以需要先获取手机的UDID 发送给我们的技术支持，加入后才可以扫码下载安装
获取UDID：https://www.pgyer.com/tools/udid
下载iOS: https://www.pgyer.com/gS0X


有时可能需要反复调试一些功能性的问题，与原生APP相关或者手上临时没有设备，我们提供了一个网页版的调试方式

http://staging-openapi.iteachabc.com/api/courseware/v1/middle/debug


* 启动本地服务

```
npm start
```

* 手机和电脑连接同一个Wifi
* 打开调试app，根据提示输入IP地址，点击开始就可以在手机上预览模板了
* 使用 console.log("==调试信息=="); 可以打印日志进行必要的调试
* 点击左上角 “logcat” 可以查看运行日志，(logcat是可以按住拖动的, 所以不用考虑UI遮挡问题)

### 注意事项及常见问题

* 项目里所有文件及文件夹的命名方式要注意不能包含空格、汉字、减号
* 项目里尽量不要使用setTimeout、setInterval等定时器，如果使用了记得在onDestroy中释放掉（onDestroy 是指CocosCreator的生命周期钩子）
* 理论上禁止使用全局变量，因为模板到线上会进行组装，常见问题是一个模板使用多次造成全局变量被读脏
