教你如何开发js-sdk（第一章）

        大家好呀！前段时间在公司上班的时候又遇到一个需求，开发一个H5的sdk，这个sdk需要在H5平台使用，同时需要适配安卓，IOS与鸿蒙（即webview）。前前后后开发了很长一段时间，终于完成了，随着需求的不断深入，前前后后也升级了几个版本，目前也有不少业务组接入了这个sdk，并且用在了自己的业务逻辑当中。

        最近我抽出时间，重新开发了一套简版的系统，给有需要的人提供一个参考。

        这个协议管理系统还没有完成，很多地方都是简单实现，我后期有时间也会不断维护升级。目前只能做到后端管理站点完成协议的编辑，并且保存草稿且发布协议版本。前端通过接入sdk,可以打开窗口进行协议的预览。我在公司的项目还有很多别的功能，比如对接CDN，电子签名，生成PDF文档进行归档证据保存等等。这些我也会在这个系统上依次开发掉。

        首先，大家先看看我的测试页面，此页面是协议sdk的测试页面。仅需要使用者填写协议编号，就可以通过底部的弹出按钮弹出协议。测试页面包含多个协议弹窗的参数，包含协议的标题，按钮的颜色都可以定制，能够覆盖大多数场景。

协议分为两种模式，对应不同的业务场景，分别为“弹出式”与“抽屉式”，具体效果如下图。sdk支持设置强制阅读时间，在时间范围内，不允许点击确定，并且伴随的还有倒计时提示。看起来是不是还是不错的。

下面是协议编号的来源，这是后台的管理站点，可以在这里编辑协议内容，完成协议的上线与下线。

协议sdk支持的协议类型目前也分为3类，标准协议，多协议和pdf协议，上图已经展示标准协议，接下来就是多协议。

pdf协议还没有开发，现计划是在后台支持上传pdf协议，然后通过sdk进行访问。

接下来就是介绍下sdk内部实现，首先需要了解的是支持的参数。

参数	名称	是否必传	备注
agreementNo	协议编号	M
version	协议版本	O
options.title	标题	O
options.titleColor	标题颜色	O
options.showCancel	是否展示取消按钮	O	待开发
options.confirmText	确认按钮文字	O
options.confirmBackGroundColor	确认按钮背景颜色	O
options.confirmTextColor	确认按钮文字颜色	O
options.cancelText	取消按钮文字	O
options.cancelBackGroundColor	取消按钮背景颜色	O
options.cancelTextColor	取消按钮文字颜色	O
options.forceRead	是否强制阅读	O
options.forceReadTime	强制阅读时间	O
options.timeout	超时时间	O
options.needSign	是否需要签署	O
options.userId	用户id	M	签署必传

  这就是全部参数，你可以通过简单的接入完成sdk的唤起，例如下面一段代码。

 AgreementSDK.startModal({
                        agreementNo: agreementNo,
                        version: version,
                        options: {
                            title: title,
                            titleColor: titleColor,
                            needSign: needSign,
                            userId: userId,
                            forceRead: forceRead,
                            forceReadTime: forceReadTime,
                            confirmText: confirmText,
                            confirmBackGroundColor: confirmBackGroundColor,
                            confirmTextColor: confirmTextColor,
                            cancelText: cancelText,
                            cancelBackGroundColor: cancelBackGroundColor,
                            cancelTextColor: cancelTextColor
                        },
                        onStart: () => {
                            console.log("启动")
                        },
                        onConfirm: () => {
                            console.log("确认")
                        },
                        onClose: () => {
                            console.log("关闭")
                        },
                        onError: () => {
                            console.log("错误")
                        }
                    });

好了，夜已深，过两天继续发第二章，正式介绍sdk内部的代码实现，有兴趣帮我转发一下，谢谢大家。下面码云地址。

https://gitee.com/dream-sk/agreement-sdk.git