amis/gh-pages/docs/start/getting-started_904df92.js

amis.define('docs/start/getting-started.md', function(require, exports, module, define) {

  module.exports = {
    "title": "快速开始",
    "description": null,
    "html": "<h2><a class=\"anchor\" name=\"npm\" href=\"#npm\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>npm</h2><h3><a class=\"anchor\" name=\"%E5%AE%89%E8%A3%85\" href=\"#%E5%AE%89%E8%A3%85\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>安装</h3><pre><code>npm i amis\n</code></pre><h3><a class=\"anchor\" name=\"%E4%BD%BF%E7%94%A8\" href=\"#%E4%BD%BF%E7%94%A8\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>使用</h3><p>可以在 React Component 这么使用（TypeScript）。</p>\n<pre><code class=\"lang-tsx\"><span class=\"token keyword\">import</span> <span class=\"token operator\">*</span> <span class=\"token keyword\">as</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span>\n    render <span class=\"token keyword\">as</span> renderAmis\n<span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'amis'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">MyComponent</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span><span class=\"token operator\">&lt;</span><span class=\"token builtin\">any</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">any</span><span class=\"token operator\">></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n            <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n                </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>p</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">通过 amis 渲染页面</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>p</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n                </span><span class=\"token punctuation\">{</span><span class=\"token function\">renderAmis</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n                    <span class=\"token comment\">// schema</span>\n                    <span class=\"token comment\">// 这里是 amis 的 Json 配置。</span>\n                    <span class=\"token keyword\">type</span><span class=\"token operator\">:</span> <span class=\"token string\">'page'</span><span class=\"token punctuation\">,</span>\n                    title<span class=\"token operator\">:</span> <span class=\"token string\">'简单页面'</span><span class=\"token punctuation\">,</span>\n                    body<span class=\"token operator\">:</span> <span class=\"token string\">'内容'</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token comment\">// props</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n                    <span class=\"token comment\">// env</span>\n                    <span class=\"token comment\">// 这些是 amis 需要的一些接口实现</span>\n                    <span class=\"token comment\">// 可以参考本项目里面的 Demo 部分代码。</span>\n\n                    updateLocation<span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span>location<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token comment\">/*目标地址*/</span><span class=\"token punctuation\">,</span> replace<span class=\"token operator\">:</span><span class=\"token builtin\">boolean</span><span class=\"token comment\">/*是replace，还是push？*/</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token comment\">// 用来更新地址栏</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n                    jumpTo<span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span>location<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token comment\">/*目标地址*/</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token comment\">// 页面跳转， actionType:  link、url 都会进来。</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n                    fetcher<span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span>\n                        url<span class=\"token punctuation\">,</span>\n                        method<span class=\"token punctuation\">,</span>\n                        data<span class=\"token punctuation\">,</span>\n                        config\n                    <span class=\"token punctuation\">}</span><span class=\"token operator\">:</span><span class=\"token punctuation\">{</span>\n                        url<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token comment\">/*目标地址*/</span><span class=\"token punctuation\">,</span>\n                        method<span class=\"token operator\">:</span><span class=\"token string\">'get'</span> <span class=\"token operator\">|</span> <span class=\"token string\">'post'</span> <span class=\"token operator\">|</span> <span class=\"token string\">'put'</span> <span class=\"token operator\">|</span> <span class=\"token string\">'delete'</span><span class=\"token comment\">/*发送方式*/</span><span class=\"token punctuation\">,</span>\n                        data<span class=\"token operator\">:</span> object <span class=\"token operator\">|</span> <span class=\"token keyword\">void</span><span class=\"token comment\">/*数据*/</span><span class=\"token punctuation\">,</span>\n                        config<span class=\"token operator\">:</span> object<span class=\"token comment\">/*其他配置*/</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token comment\">// 用来发送 Ajax 请求，建议使用 axios</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                    notify<span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">type</span><span class=\"token operator\">:</span><span class=\"token string\">'error'</span><span class=\"token operator\">|</span><span class=\"token string\">'success'</span><span class=\"token comment\">/**/</span><span class=\"token punctuation\">,</span> msg<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token comment\">/*提示内容*/</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token comment\">// 用来提示用户</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                    alert<span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span>content<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token comment\">/*提示信息*/</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token comment\">// 另外一种提示，可以直接用系统框</span>\n                    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n                    confirm<span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span>content<span class=\"token operator\">:</span><span class=\"token builtin\">string</span><span class=\"token comment\">/*提示信息*/</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n                        <span class=\"token comment\">// 确认框。</span>\n                    <span class=\"token punctuation\">}</span>\n                <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n            </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n        <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n<p><code>(schema:Schema, props?:any, env?: any) =&gt; JSX.Element</code></p>\n<p>参数说明：</p>\n<ul>\n<li><code>schema</code> 即页面配置，请前往<a href=\"/amis/docs/start/basic\">基本用法</a>了解.</li>\n<li><p><code>props</code> 一般都用不上，如果你想传递一些数据给渲染器内部使用，可以传递 data 数据进去。如：</p>\n<pre><code class=\"lang-jsx\"><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span>\n  <span class=\"token function\">renderAmis</span><span class=\"token punctuation\">(</span>schema<span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n    data<span class=\"token operator\">:</span> <span class=\"token punctuation\">{</span>\n      username<span class=\"token operator\">:</span> <span class=\"token string\">'amis'</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<p>这样，内部所有组件都能拿到 <code>username</code> 这个变量的值。</p>\n</li>\n<li><p><code>env</code> 环境变量，可以理解为这个渲染器工具的配置项，需要调用者实现部分接口。</p>\n<ul>\n<li><code>session: string</code> 默认为 &#39;global&#39;，决定 store 是否为全局共用的，如果想单占一个 store，请设置不同的值。</li>\n<li><p><code>fetcher: (config: fetcherConfig) =&gt; Promise&lt;fetcherResult&gt;</code> 用来实现 ajax 发送。</p>\n<p>示例</p>\n<pre><code class=\"lang-js\"><span class=\"token function-variable function\">fetcher</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\"><span class=\"token punctuation\">{</span>\n    url<span class=\"token punctuation\">,</span>\n    method<span class=\"token punctuation\">,</span>\n    data<span class=\"token punctuation\">,</span>\n    responseType<span class=\"token punctuation\">,</span>\n    config<span class=\"token punctuation\">,</span>\n    headers\n<span class=\"token punctuation\">}</span><span class=\"token operator\">:</span> any</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    config <span class=\"token operator\">=</span> config <span class=\"token operator\">||</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n    config<span class=\"token punctuation\">.</span>withCredentials <span class=\"token operator\">=</span> <span class=\"token boolean\">true</span><span class=\"token punctuation\">;</span>\n    responseType <span class=\"token operator\">&amp;&amp;</span> <span class=\"token punctuation\">(</span>config<span class=\"token punctuation\">.</span>responseType <span class=\"token operator\">=</span> responseType<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>config<span class=\"token punctuation\">.</span>cancelExecutor<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        config<span class=\"token punctuation\">.</span>cancelToken <span class=\"token operator\">=</span> <span class=\"token keyword\">new</span> <span class=\"token punctuation\">(</span>axios <span class=\"token keyword\">as</span> any<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">CancelToken</span><span class=\"token punctuation\">(</span>config<span class=\"token punctuation\">.</span>cancelExecutor<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    config<span class=\"token punctuation\">.</span>headers <span class=\"token operator\">=</span> headers <span class=\"token operator\">||</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>method <span class=\"token operator\">!==</span> <span class=\"token string\">'post'</span> <span class=\"token operator\">&amp;&amp;</span> method <span class=\"token operator\">!==</span> <span class=\"token string\">'put'</span> <span class=\"token operator\">&amp;&amp;</span> method <span class=\"token operator\">!==</span> <span class=\"token string\">'patch'</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n            config<span class=\"token punctuation\">.</span>params <span class=\"token operator\">=</span> data<span class=\"token punctuation\">;</span>\n        <span class=\"token punctuation\">}</span>\n\n        <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>axios <span class=\"token keyword\">as</span> any<span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span>method<span class=\"token punctuation\">]</span><span class=\"token punctuation\">(</span>url<span class=\"token punctuation\">,</span> config<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>data <span class=\"token operator\">&amp;&amp;</span> data <span class=\"token keyword\">instanceof</span> <span class=\"token class-name\">FormData</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// config.headers = config.headers || {};</span>\n        <span class=\"token comment\">// config.headers['Content-Type'] = 'multipart/form-data';</span>\n    <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>data\n        <span class=\"token operator\">&amp;&amp;</span> <span class=\"token keyword\">typeof</span> data <span class=\"token operator\">!==</span> <span class=\"token string\">'string'</span>\n        <span class=\"token operator\">&amp;&amp;</span> <span class=\"token operator\">!</span><span class=\"token punctuation\">(</span>data <span class=\"token keyword\">instanceof</span> <span class=\"token class-name\">Blob</span><span class=\"token punctuation\">)</span>\n        <span class=\"token operator\">&amp;&amp;</span> <span class=\"token operator\">!</span><span class=\"token punctuation\">(</span>data <span class=\"token keyword\">instanceof</span> <span class=\"token class-name\">ArrayBuffer</span><span class=\"token punctuation\">)</span>\n    <span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        data <span class=\"token operator\">=</span> <span class=\"token constant\">JSON</span><span class=\"token punctuation\">.</span><span class=\"token function\">stringify</span><span class=\"token punctuation\">(</span>data<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        <span class=\"token comment\">// config.headers = config.headers || {};</span>\n        config<span class=\"token punctuation\">.</span>headers<span class=\"token punctuation\">[</span><span class=\"token string\">'Content-Type'</span><span class=\"token punctuation\">]</span> <span class=\"token operator\">=</span> <span class=\"token string\">'application/json'</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n\n    <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>axios <span class=\"token keyword\">as</span> any<span class=\"token punctuation\">)</span><span class=\"token punctuation\">[</span>method<span class=\"token punctuation\">]</span><span class=\"token punctuation\">(</span>url<span class=\"token punctuation\">,</span> data<span class=\"token punctuation\">,</span> config<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>\n</code></pre>\n</li>\n<li><p><code>isCancel: (e:error) =&gt; boolean</code> 判断 ajax 异常是否为一个 cancel 请求。</p>\n<p>示例</p>\n<pre><code class=\"lang-js\"><span class=\"token function-variable function\">isCancel</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token parameter\">value<span class=\"token operator\">:</span> any</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>axios <span class=\"token keyword\">as</span> any<span class=\"token punctuation\">)</span><span class=\"token punctuation\">.</span><span class=\"token function\">isCancel</span><span class=\"token punctuation\">(</span>value<span class=\"token punctuation\">)</span>\n</code></pre>\n</li>\n<li><p><code>notify: (type:string, msg: string) =&gt; void</code> 用来实现消息提示。</p>\n</li>\n<li><code>alert: (msg:string) =&gt; void</code> 用来实现警告提示。</li>\n<li><code>confirm: (msg:string) =&gt; boolean | Promise&lt;boolean&gt;</code> 用来实现确认框。</li>\n<li><code>jumpTo: (to:string, action?: Action, ctx?: object) =&gt; void</code> 用来实现页面跳转，因为不清楚所在环境中是否使用了 spa 模式，所以用户自己实现吧。</li>\n<li><code>updateLocation: (location:any, replace?:boolean) =&gt; void</code> 地址替换，跟 jumpTo 类似。</li>\n<li><code>isCurrentUrl: (link:string) =&gt; boolean</code> 判断目标地址是否为当前页面。</li>\n<li><code>theme: &#39;default&#39; | &#39;cxd&#39;</code> 目前支持两种主题。</li>\n<li><code>copy: (contents:string, options?: {shutup: boolean}) =&gt; void</code> 用来实现，内容复制。</li>\n<li><code>getModalContainer: () =&gt; HTMLElement</code> 用来决定弹框容器。</li>\n<li><code>loadRenderer: (chema:any, path:string) =&gt; Promise&lt;Function&gt;</code> 可以通过它懒加载自定义组件，比如： <a href=\"https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。\">https://github.com/baidu/amis/blob/master/__tests__/factory.test.tsx#L64-L91。</a></li>\n<li><code>affixOffsetTop: number</code> 固顶间距，当你的有其他固顶元素时，需要设置一定的偏移量，否则会重叠。</li>\n<li><code>affixOffsetBottom: number</code> 固底间距，当你的有其他固底元素时，需要设置一定的偏移量，否则会重叠。</li>\n<li><code>richTextToken: string</code> 内置 rich-text 为 frolaEditor，想要使用，请自行购买，或者自己实现 rich-text 渲染器。</li>\n</ul>\n</li>\n</ul>\n<h2><a class=\"anchor\" name=\"sdk\" href=\"#sdk\" aria-hidden=\"true\"><svg aria-hidden=\"true\" class=\"octicon octicon-link\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>SDK</h2><p>SDK 适合对前端或 React 不了解的开发者，它不依赖 npm 及 webpack，直接引入代码就能使用，但需要注意这种方式不支持 <a href=\"./custom\">自定义组件</a>，只能使用 amis 内置的组件。</p>\n<p>JSSDK 的代码从以下地址获取：</p>\n<ul>\n<li>JS： <a href=\"https://houtai.baidu.com/v2/jssdk\">https://houtai.baidu.com/v2/jssdk</a></li>\n<li>CSS： <a href=\"https://houtai.baidu.com/v2/csssdk\">https://houtai.baidu.com/v2/csssdk</a></li>\n</ul>\n<p>然后在页面中插入下面的代码就能渲染出来了：</p>\n<pre><code class=\"lang-js\"><span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">var</span> amis <span class=\"token operator\">=</span> <span class=\"token function\">amisRequire</span><span class=\"token punctuation\">(</span><span class=\"token string\">'amis/embed'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  amis<span class=\"token punctuation\">.</span><span class=\"token function\">embed</span><span class=\"token punctuation\">(</span>\n    <span class=\"token string\">'#container'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      type<span class=\"token operator\">:</span> <span class=\"token string\">'page'</span><span class=\"token punctuation\">,</span>\n      title<span class=\"token operator\">:</span> <span class=\"token string\">'AMIS Demo'</span><span class=\"token punctuation\">,</span>\n      body<span class=\"token operator\">:</span> <span class=\"token string\">'This is a simple amis page.'</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// props 一般不用传。</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">{</span>\n      <span class=\"token comment\">// env</span>\n      <span class=\"token function-variable function\">fetcher</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现 ajax 请求</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">jumpTo</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现页面跳转</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">updateLocation</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现地址栏更新</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">isCurrentUrl</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来判断是否目标地址当前地址。</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">copy</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现复制到剪切板</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">notify</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现通知</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">alert</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现提示</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n\n      <span class=\"token function-variable function\">confirm</span><span class=\"token operator\">:</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n        <span class=\"token comment\">// 可以不传，用来实现确认框。</span>\n      <span class=\"token punctuation\">}</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<p>注意：以上的 SDK 地址是一个页面跳转，会跳转到一个 CDN 地址，而且每次跳转都是最新的版本，随着 amis 的升级这个地址会一直变动，如果你的页面已经完成功能回归，请直接使用某个固定地址，这样才不会因为 amis 升级而导致你的页面不可用。</p>\n<p>另外，sdk 代码也伴随 npm 一起发布了，不使用 CDN 版本，直接替换成 npm 包里面的 <code>amis/sdk.js</code> 和 <code>amis/sdk.css</code> 即可。</p>\n<p>完整示例:</p>\n<pre><code class=\"lang-html\"><span class=\"token doctype\">&lt;!DOCTYPE html></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>html</span> <span class=\"token attr-name\">lang</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>zh<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>head</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">charset</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>UTF-8<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>title</span><span class=\"token punctuation\">></span></span>AMIS Demo<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>title</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">http-equiv</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>Content-Type<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>text/html; charset=utf-8<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span>\n      <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>viewport<span class=\"token punctuation\">\"</span></span>\n      <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>width=device-width, initial-scale=1, maximum-scale=1<span class=\"token punctuation\">\"</span></span>\n    <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>meta</span> <span class=\"token attr-name\">http-equiv</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>X-UA-Compatible<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">content</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>IE=Edge<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>link</span> <span class=\"token attr-name\">rel</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>stylesheet<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>amis/sdk.css<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>style</span><span class=\"token punctuation\">></span></span><span class=\"token style\"><span class=\"token language-css\">\n      <span class=\"token selector\">html,\n      body,\n      .app-wrapper</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token property\">position</span><span class=\"token punctuation\">:</span> relative<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">width</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">height</span><span class=\"token punctuation\">:</span> 100%<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">margin</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n        <span class=\"token property\">padding</span><span class=\"token punctuation\">:</span> 0<span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span>\n    </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>style</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>head</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>body</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">id</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>root<span class=\"token punctuation\">\"</span></span> <span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>app-wrapper<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">src</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>amis/sdk.js<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>script</span> <span class=\"token attr-name\">type</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>text/javascript<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token script\"><span class=\"token language-javascript\">\n      <span class=\"token punctuation\">(</span><span class=\"token keyword\">function</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n        <span class=\"token keyword\">var</span> amis <span class=\"token operator\">=</span> <span class=\"token function\">amisRequire</span><span class=\"token punctuation\">(</span><span class=\"token string\">'amis/embed'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n        amis<span class=\"token punctuation\">.</span><span class=\"token function\">embed</span><span class=\"token punctuation\">(</span><span class=\"token string\">'#root'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span>\n          type<span class=\"token operator\">:</span> <span class=\"token string\">'page'</span><span class=\"token punctuation\">,</span>\n          title<span class=\"token operator\">:</span> <span class=\"token string\">'AMIS Demo'</span><span class=\"token punctuation\">,</span>\n          body<span class=\"token operator\">:</span> <span class=\"token string\">'hello world'</span>\n        <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n      <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    </span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>script</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>body</span><span class=\"token punctuation\">></span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>html</span><span class=\"token punctuation\">></span></span>\n</code></pre>\n",
    "toc": {
      "label": "目录",
      "type": "toc",
      "children": [
        {
          "label": "npm",
          "fragment": "npm",
          "fullPath": "#npm",
          "level": 2,
          "children": [
            {
              "label": "安装",
              "fragment": "%E5%AE%89%E8%A3%85",
              "fullPath": "#%E5%AE%89%E8%A3%85",
              "level": 3
            },
            {
              "label": "使用",
              "fragment": "%E4%BD%BF%E7%94%A8",
              "fullPath": "#%E4%BD%BF%E7%94%A8",
              "level": 3
            }
          ]
        },
        {
          "label": "SDK",
          "fragment": "sdk",
          "fullPath": "#sdk",
          "level": 2
        }
      ],
      "level": 0
    }
  };

});