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"/>
~~~
## 2.使用script引入JS
在`html`合适的位置使用script引入JS api 文件。（css、js）
！！！必须使用完整的基于服务器的文件路径，否则无法保证文件会正常的加载。
~~~html
<link rel="stylesheet" href="./ws.para.mobile.css" />
<script type="text/javascript" src="./ws.para.mobile.js"></script>
~~~
## 3.定义视图节点
文件签字视图会在已定义的`div`节点内渲染。请指定有效的height、width风格样式，请保证`id`的唯一性。例：
~~~html
<div id="ctx" style="height: calc(100% - 40px); width: 100%;"></div>
~~~
## 4.实例化=>加入
详细配置参数见左边配置项章节
~~~js
var ctx = new WSMobilePraraSignContext() // 实例化
ctx.Join({
el: '#ctx',
sequenceId: 'xxxx',
token: 'xxxx',
caller: {
callerId: 'ws',
callerName: '好签',
callerDesc: '好签的签名',
phoneNumber: 12312313213
},
oneCallerOneSingnature: false,
syncRender: true,
loadAllRecord: true
})
~~~
## 注意事项！！！
* 原则上请不要给视图节点设置`transform`、`display`、`visibility`之类的的`CSS`，可能会影响到正常视图渲染。
* 初始化后会给节点添加`position:relative;`的`CSS`。
* 视图节点必须已经添加到body。
* `CSS`样式覆盖问题，引入太多的外部CSS肯定无法避免的出现覆盖问题。ㄟ( ▔, ▔ )ㄏ