4.2接入步骤

## 基本接入步骤: `JS文件引入 =>定义视图节点=> 实例化(new) => 初始化(Init) => 渲染(Render)` ## 1.添加meta标签 建议在`html => head`中添加以下`meta`标签 ~~~html <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> ~~~ ## 2.使用script引入JS 在`html`合适的位置使用script引入JS api 文件。(css、js) !!!必须使用完整的基于服务器的文件路径,否则无法保证文件会正常的加载。 ```html <link rel="stylesheet" href="http://open.wellsign.cn/sdk/context/ws.mobile@2.0.css" /> <script type="text/javascript" src="http://open.wellsign.cn/sdk/context/ws.mobile@2.0.js"></script> ``` ## 3.定义视图节点 文件签字视图会在已定义的`div`节点内渲染。请指定有效的height、width风格样式,请保证`id`的唯一性。such as: ```html <div id="ctx" style="height: calc(100% - 40px); width: 100%;"></div> ``` ## 4.实例化=>初始化=>渲染 详细配置参数见左边目录章节 ```js var ctx = new WSMobileSignContext() // 实例化 ctx.Init({ el: '#ctx', token: 'xxx', sequenceId: 'xxx', callerId: 'xxx', callerName: 'xxx' }) // 初始化 ctx.Render() // 渲染 ``` ## 注意事项!!! * 原则上请不要给视图节点设置`transform`、`display`、`visibility`之类的的`CSS`,可能会影响到正常视图渲染。 * 初始化后会给节点添加`position:relative;`的`CSS`。 * 视图节点必须已经添加到body。 * `CSS`样式覆盖问题,引入太多的外部CSS肯定无法避免的出现覆盖问题。ㄟ( ▔, ▔ )ㄏ