亿联会议小程序SDK DEMO指南
简介
亿联会议小程序SDK DEMO，是一套使用@ylink-sdk/wechat-miniprogram，及微信小程序框架搭建起来的完善功能的会议小程序程序。用户调整替换下OEM资源，即可快速上线自己品牌的小程序应用，同时DEMO也提供了开放式的源码，便于具备开发能力的用户去定制化调整程序。
快速开始
接入流程
环境准备
-
开通微信小程序配置（如不开通则无法正常使用）
出于政策和合规的考虑，微信暂未放开所有小程序对实时音视频功能（即
和 标签-@ylink-sdk/wechat-miniprogram内部涉及使用）的支持： -
小程序推拉流标签不支持个人小程序，只支持企业类小程序
-
小程序推拉流标签使用权限暂时只开放给有限类目
-
符合类目要求的小程序，需要在微信公众平台>开发>开发管理>接口设置下开启“实时播放音视频流”和“实时录制音视频流”权限
- 配置服务域名白名单，需要在微信公众平台>开发>开发管理>开发设置下服务器域名添加可访问到小程序服务端的公网域名
-
-
SDK底层通过腾讯TRTC服务进行音视频通话传输，所以需购买腾讯TRTC流量套餐包，用于在服务部署期间进行配置。（如有不清楚，咨询下代理）
-
下载安装Nodejs（建议版本12+）
-
下载安装微信开发者工具
-
在微信公众平台>管理>成员管理下的项目成员添加开发人员的开发者权限，并到微信公众平台>开发>开发管理>开发设置下获取到AppID，为下一步程序初始化准备
程序初始化
-
用微信开发者工具打开亿联会议小程序SDK DEMO源码，并填入设置好上一步获取到的AppID
-
新建终端，在终端命令行里面输入
npm install进行依赖安装
-
依赖安装完毕后，点击 工具>构建npm 进行小程序miniprogram_npm的生成
-
以上配置好之后，即可在模拟器上看到预览界面
获取鉴权信息&入会
-
调整亿联小程序SDK DEMO源码的SDK配置信息
服务器暂未支持鉴权，appid、signature、timestamp 参数按以下示例传参即可
sdk: { url: 'https://xxx.xxx.xxx.xxx/wechat-app', appid: 'appid', signature: 'signature', timestamp: 'timestamp', }signature生成详解：
在DEMO源码的根目录下调整GenerateSig.js文件内的appId、appSecret、timestamp配置，然后在终端上运行
node ./GenerateSig.js，输出即为signature小程序服务端地址示例：
https://xxx.xxx.xxx.xxx/wechat-app
-
入会测试
在系统平台上预约一个会议，然后在小程序模拟器的入会界面上填入会议号，点击加入会议进行入会测试，可正常进入到视频界面则说明整体DEMO调试已成功。
工程结构概览
├── miniprogram # 小程序miniprogramRoot的目录
│ ├── components # 公共组件
│ ├── hosted # OEM配置，具体配置说明详见下方
│ ├── locales # 国际化支持
│ ├── pages # 小程序页面
│ │ ├── index # 首页
│ │ ├── join # 加入会议界面
│ │ ├── meeting # 视频会议界面
│ │ ├── protocol # 用户协议&隐私政策界面
│ │ ├── waitroom # 等候室界面
│ ├── utils # 公用方法
│ ├── app.json # 小程序app配置
│ ├── app.scss # 小程序app级别样式
│ ├── app.ts # 小程序app
│ └── sitemap.json # 用于配置小程序及其页面是否允许被微信索引
├── typings # TS声明文件
├── GenerateSig.js # 生成signature的工具
├── gulpfile.js # 国际化@miniprogram-i18n打包脚本
├── package.json # build命令将执行gulp进行国际化资源打包生成到locales
└── project.config.json # 小程序项目级别配置，通常检查&配置appid是否正确
Demo中在miniprogram>pages>meeting内引用了小程序SDK组件，具体使用文档请查阅@ylink-sdk/wechat-miniprogram，其他代码都为开放源码，具体细节用户可自行查阅源码，进行调整开发。
开发技巧
生成国际化文案
亿联小程序SDK DEMO国际化方案采用了小程序官方的miniprogram-i18n方案，如有国际化新增及调整需求，可按下方步骤进行操作
-
新增国际化文案
-
在miniprogram>hosted>i18n>zh-CN.json 内新增key: 文案
- 如果是在.wxml文件内显示的国际化，则在对应位置调整成
{{t("第一步新增的key")}}，如果是在.ts文件内显示的国际化，则在对应位置调整成app.i18n.t("第一步新增的key") -
在终端命令行上执行
npm run build，即可自动编译进行显示查看 -
调整国际化文案
在miniprogram>hosted>i18n>zh-CN.json 内找到对应key的文案进行调整，然后在终端命令行上执行
npm run build即可
OEM定制
小程序SDK DEMO也提供了OEM定制支持，方便不具备开发能力的用户，快速进行调整成自己品牌的小程序应用。
国际化文案
路径：
- miniprogram/hosted/i18n/zh-CN.json
- miniprogram/hosted/bizcode.js
说明：整个小程序的界面及JS内的文案都包含在了以上2个文件内，用户可依据场景进行适配调整，如果有针对zh-CN.json文件调整的话，还需执行下npm run build才可生效
主题色
路径：miniprogram/hosted/theme.scss
说明：$primary为主题色调，注释信息内提供了三种色调：绿、蓝、红，默认为绿色，如有其他颜色需求，用户可自行调整。
备注：暂不支持小程序sdk组件ylink-room组件的色调调整，如有需求可采用样式覆盖方式，组件已配置addGlobalClass: true支持
资源素材
路径：miniprogram/hosted/img
说明：img/meeting为对应pages/meeting页面的资源素材，img/share为index及meeting页面的小程序分享背景素材
备注：暂不支持小程序sdk组件ylink-room组件内的资源素材替换
UI元素控制
路径：miniprogram/hosted/config.js
说明：
{
"setting": {
/**
* 是否显示用户协议&隐私政策
*/
"protocol": true,
/**
* 是否显示出版方
*/
"copyright": true,
/**
* 是否显示客户端下载提示，如需开启请进行小程序服务端的配置调整及微信公众平台上小程序后台开启客服及消息推送的配置
*/
"clientDownload": false,
/**
* 是否开启麦克风
*/
"microphone": true,
/**
* 是否开启摄像头
*/
"camera": true,
/**
* 摄像头前置(front)/后置(back)
*/
"devicePosition": "front",
/**
* 是否开启美颜
*/
"beauty": false,
/**
* 美颜级别 0-9 0表示关闭，默认6
*/
"beautyLevel": 6,
/**
* 会议界面UI显隐
*/
"meetingUI": {
/**
* 左上角 入会持续时长
*/
"duration": true,
/**
* 顶部中间 会议号
*/
"meetingNum": true,
/**
* 顶部中间 入会人数
*/
"joinNum": true,
/**
* 底部左边 切换摄像头
*/
"switchCamera": true,
/**
* 底部中间 音频状态 禁音/解除禁音
*/
"audio": true,
/**
* 底部中间 举手状态
*/
"handup": true,
/**
* 底部中间 视频状态
*/
"video": true,
/**
* 邀请
*/
"invite": true,
/**
* 更多
*/
"more": true,
/**
* 美颜
*/
"beauty": true,
/**
* 隐藏右侧小视图
*/
"hideSmallView": true
}
}
}
用户协议&隐私政策
路径：miniprogram/hosted/protocol
说明：agreement.wxml（用户协议）、policy.wxml（隐私政策）
版本发布
-
在微信开发者工具右上角点击上传按钮进行编译上传待发布的版本
-
上传成功后即可访问微信公众平台>版本管理>开发版本 栏下找到已上传的版本号，在对应的版本号栏中点击提交审核，进行版本上线前的版本审核，待官方审核成功后，版本会放置到审核版本栏下并可进行真正的对外上线操作。
