# 鹅直播小程序营销组件

## 鹅直播小程序营销组件在本系统的覆盖程度
|            |     推流端      | 非推流端 （非全屏） | 非推流端 （全屏） |
| :--------: | :-------------: | :-----------------: | :---------------: |
| 邀请达人榜 |   ❌(live-mp)    |          ✅          |         ✅         |
|  分享海报  |        ✅        |          ✅          |         ✅         |
|    抽奖    |        ✅        |          ✅          |         ✅         |
|    红包    |        ✅        |     ❌(live-mp)      |         ✅         |
|   优惠券   | ❌(xiaoe_mp_npm) |   ❌(xiaoe_mp_npm)   |  ❌(xiaoe_mp_npm)  |

## 开发
```
npm run cp-dist // 复制打包文件到live-mp项目中
```
> 特别注意：该组件在业务侧属于跨包引用，在开发者工具使用时会有无法加载的情况。所以开发时需要把```app.json```中的```subpkg/npm-compoent```分包配置删除。但不能提交！不能提交！不能提交！

## 发包

> 找 ackerly 或 moira

## 注意事项（一定按照格式来开发）

1. 每次新增业务模块，就在src下建一个文件夹，以```大驼峰```命名跟着
2. 要在tools下config.js最后，```copy数组```加入你新增这个文件夹名字，这样才会对你新加的进行打包
3. 每个业务模块下，```建一个README.md文件```，里面写好这个组件的使用文档
4. 接口api参照src---common---api文件夹，```每个组件单独创建一个api的js```，以组件名小写来命名
5. src---common文件，存放公共css、方法、图片资源、请求等
6. 原生小程序只支持css，不天然支持less，如果要使用less，开发工具vscode、微信开发者工具，这两个的配置不一样，可以参照网上的配置，然后在业务组件的文件夹下创建一个index.less，打包会自动编译成css文件的
7. 引入图片，```全部放入CDN```
8. 适配全屏与非全屏样式，使用```vmin```单位

## 使用less

- 官方框架也配置了使用less的配置，但是这里我用的是另外的一种方案
- vscode使用less
- vscode中下载Easy Less插件，并在setting文件中配置

```javascript
// 对EasyLess的配置，此段配置去掉则默认生成一个css文件
  "less.compile": {
    "compress": false, //是否压缩
    "sourceMap": false, //是否生成map文件
    "out": true, // 是否输出文件，false为不输出
    "outExt": ".wxss", // 输出文件的后缀,小程序可以写'wxss'
  },
```

- 然后在对应的目录下新建一个***.less 文件,保存后就自动生成了wxss文件



## 目录结构

```
|--miniprogram_dev // 开发环境构建目录
|--miniprogram_dist // 生产环境构建目录
|--src // 源码
|   |--common // 通用资源
|   |--InviteRank // 邀请达人榜
|   |--Lottery // 抽奖
|       |--Student // 抽奖学员端
|       |--Teacher // 抽奖讲师端
|   |--RedPacket // 红包
|   |--SharePoster // 分享海报
|       |--SharePoster // 分享海报非全屏端
|       |--SharePosterFullscreen // 分享海报全屏端
|
|--test // 测试用例
|--tools // 构建相关代码
|   |--demo // demo 小程序目录，开发环境下会被拷贝生成到 miniprogram_dev 目录中
|   |--config.js // 构建相关配置文件
|
|--gulpfile.js
```

> PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

## 测试

* 执行测试用例：

```
npm run test
```

* 执行测试用例并进入 node inspect 调试：

```
npm run test-debug
```

* 检测覆盖率：

```
npm run coverage
```

测试用例放在 test 目录下，使用 **miniprogram-simulate** 工具集进行测试，[点击此处查看](https://github.com/wechat-miniprogram/miniprogram-simulate/blob/master/README.md)使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。