--- title: 快速开始 description: --- amis 有两种使用方法: - [JS SDK](#SDK) - [React](#react) React 可以完整使用 amis 的所有功能,方便扩展。 SDK 适合对前端或 React 不了解的开发者,它不依赖 npm 及 webpack,直接引入代码就能使用,但需要注意这种方式难以支持 [自定义组件](./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... }, { // env // 这些是 amis 需要的一些接口实现 // 可以参考后面的参数介绍。 jumpTo: ( location: string /*目标地址*/, action: any /* action对象*/ ) => { // 用来实现页面跳转, actionType:link、url 都会进来。 // 因为不清楚所在环境中是否使用了 spa 模式,所以自己实现这个方法吧。 }, updateLocation: ( location: string /*目标地址*/, replace: boolean /*是replace,还是push?*/ ) => { // 地址替换,跟 jumpTo 类似 }, 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), notify: ( type: 'error' | 'success' /**/, msg: string /*提示内容*/ ) => { toast[type] ? toast[type](msg, type === 'error' ? '系统错误' : '系统消息') : console.warn('[Notify]', type, msg); }, alert, confirm, copy: content => { copy(content); toast.success('内容已复制到粘贴板'); } } )}