Live_mp_mkt NPM

鹅直播小程序营销组件

鹅直播小程序营销组件在本系统的覆盖程度

	推流端	非推流端（非全屏）	非推流端（全屏）
邀请达人榜	❌(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

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

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

使用less

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

// 对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 工具集进行测试，点击此处查看使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。