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肯定无法避免的出现覆盖问题。ㄟ( ▔, ▔ )ㄏ