--- title: 快速开始 description: --- amis 有两种使用方法: - [JS SDK](#SDK) - [React](#react) React 版本可以完整使用 amis 的所有功能,方便扩展。 SDK 版本适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,可以像 Vue/jQuery 那样外链代码就能使用,但需要注意这种方式难以支持 [自定义组件](./custom),只能使用 amis 内置的组件。 ## SDK JSSDK 版本可以在 github 的 [releases](https://github.com/baidu/amis/releases) 或 gitee 的[发布](https://gitee.com/baidu/amis/releases)页面下载,文件是 sdk.tar.gz。 或者可以使用 `npm i amis` 来下载,在 `node_modules\amis\sdk` 目录里就能找到。 新建一个 html 文件,简单示例如下,将其中的 `sdk.css` 和 `sdk.js` 改成实际的路径: ```html
通过 amis 渲染页面
{renderAmis( { // 这里是 amis 的 Json 配置。 type: 'page', title: '简单页面', body: '内容' }, { // props... }, { // 下面三个接口必须实现 fetcher: ({ url, // 接口地址 method, // 请求方法 get、post、put、delete data, // 请求数据 responseType, config, // 其他配置 headers // 请求头 }: any) => { config = config || {}; config.withCredentials = true; responseType && (config.responseType = responseType); if (config.cancelExecutor) { config.cancelToken = new (axios as any).CancelToken( config.cancelExecutor ); } config.headers = headers || {}; if (method !== 'post' && method !== 'put' && method !== 'patch') { if (data) { config.params = data; } return (axios as any)[method](url, config); } else if (data && data instanceof FormData) { config.headers = config.headers || {}; config.headers['Content-Type'] = 'multipart/form-data'; } else if ( data && typeof data !== 'string' && !(data instanceof Blob) && !(data instanceof ArrayBuffer) ) { data = JSON.stringify(data); config.headers = config.headers || {}; config.headers['Content-Type'] = 'application/json'; } return (axios as any)[method](url, data, config); }, isCancel: (value: any) => (axios as any).isCancel(value), copy: content => { copy(content); toast.success('内容已复制到粘贴板'); } // 后面这些接口可以不用实现 // 默认是地址跳转 // jumpTo: ( // location: string /*目标地址*/, // action: any /* action对象*/ // ) => { // // 用来实现页面跳转, actionType:link、url 都会进来。 // }, // updateLocation: ( // location: string /*目标地址*/, // replace: boolean /*是replace,还是push?*/ // ) => { // // 地址替换,跟 jumpTo 类似 // }, // isCurrentUrl: ( // url: string /*url地址*/, // ) => { // // 用来判断是否目标地址当前地址 // }, // notify: ( // type: 'error' | 'success' /**/, // msg: string /*提示内容*/ // ) => { // toast[type] // ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') // : console.warn('[Notify]', type, msg); // }, // alert, // confirm, } )}