能今天做好的事就不要等到明天。以梦为马，学习趁年华。

问题区

amis是什么？

amis是百度推出的前端低代码框架。力求简单不复杂的需求下，更少的代码，更快的效率！

amis能干什么？

amis能通过配置快速生成页面以及一些常用的功能，比如弹框、日期、富文本编辑器、tab切换等！

它可以直接引入在html中使用，但这种方式并不推荐，可以作为练习使用。除此之外它可用于基于react的项目中，通过简单的react项目中配置环境就可以用起来游刃有余。

amis适合什么人？

只要接触前端的人都适合，学习它要有个谦卑的姿态，不要因为你是个前端开发者你就觉得你不需要学习这玩意，毕竟百度内部都在大量使用，你又为什么不呢？而且这种低代码框架以后也会成为趋势。

amis有什么不足？

amis虽然有以上诸多优势，但是它同样存在不足。遇到功能较为复杂的需求，它可能需要花费你更多的心力，因为它不够灵活，更甚者，它可能显得苍白无力，难以实现这样的功能。当然，虽然它不够灵活，但你的脑子可以足够灵活，这样你就可以不局限于处处功能用amis，你可以掺杂着其它的技术方案。我可以明确告诉你amis有一些对外技术的窗口，具体你可以文档中慢慢探索。

一、学习路线

对于初学者,百度的这个amis框架上手还是小有难度的。为什么这样说呢?因为它在网上几乎没有任何关于它的学习资料,无论你上b站还是百度搜索都可以说没有任何关于它的信息。但不用担心,好在它有比较完善的文档和示例以及在线编辑器。

综上所述，我建议的学习路线是这样的。首先就是读文档https://baidu.gitee.io/amis/zh-CN/docs/index，接着就是看示例以及示例的代码结构https://baidu.gitee.io/amis/examples/index，然后可以尝试用编辑器上手一下https://aisuda.github.io/amis-editor-demo/#/edit/0，最后就是正式上手到项目（react或者vue）中。

二、学习资源区

1. 书籍

amis文档https://baidu.gitee.io/amis/zh-CN/docs/index

amis示例https://baidu.gitee.io/amis/examples/index

2. 视频

3. 相关文档

amis文档https://baidu.gitee.io/amis/zh-CN/docs/index

4. 相关论坛

这可能是amis为数不多与之相关的论坛，有用没用自己探索一下https://www.oschina.net/search?scope=news&q=%E4%BD%8E%E4%BB%A3%E7%A0%81

三、技术笔记

1.amis项目（react）目录初始化

2.amis项目（react）环境初始化

示例，一个简单的react的jsx页面，如下代码复制到你的其中一个react项目jsx页面中就行，配好路由npm start运行就可看到效果

import 'amis/lib/themes/default.css';import 'font-awesome/css/font-awesome.css';import { Component } from 'react'import axios from 'axios';import { render as renderAmis } from 'amis';import '../css/viewMore.css'// amis 环境配置const env = {// 下面三个接口必须实现fetcher: ({url, // 接口地址method, // 请求方法 get、post、put、deletedata, // 请求数据responseType,config, // 其他配置headers // 请求头}) => {config = config || {};config.withCredentials = true;responseType && (config.responseType = responseType);if (config.cancelExecutor) {config.cancelToken = new axios.CancelToken(config.cancelExecutor);}config.headers = headers || {};if (method !== 'post' && method !== 'put' && method !== 'patch') {if (data) {config.params = data;}return axios[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[method](url, data, config);},isCancel: (value) => axios.isCancel(value)};const config={"type": "page",// "interval":"1000","className":"MainPage","body": [{"type": "container","className":"headContainer","body": [{"type": "tpl","className":"portalLogo","tpl": "","inline": false},{"type": "tpl","tpl": "","className":"groupLibrary","inline": false},{"type": "input-text","name": "keywordsM","className":"searchBoxA","placeholder": "请输入关键字","addOn": {"label": "","className":"sousuo","type": "submit",}},{"type": "tpl","tpl": "我的族库","className":"mineKu","inline": false},]},{"type":"page","className":"navigationContainer","initApi":"/api/category/tree","body":[{"type": "tabs","className": "firstType","mountOnEnter": true,"source":"${rows}","tabs": [{"title": "${Name}","body": [{"type": "tabs","className": "secondType","actionType":"","source":"${Children}","tabs": [{"title": "${Name}","actionType":"","body": [{"type": "tabs","className":"mainPoint",// "tabs.reload":"true","source":"${Children}","tabs": [{"title": "${Name}","body": []}]}]},],"tabsMode": "chrome"}]},],"tabsMode": "tiled"}]},{"type": "container","className": "UserHome-imgsm","body": {"type": "crud","api": "/api/family/category?perPage=12&page=${page}&type=${text}&status=2","syncLocation": false,"mode": "cards","className": "UserHome-crud msk","placeholder": "没有信息","columnsCount": 4,"defaultParams": {"perPage": "12",},"card": {// "visibleOn": "this.ExamineStatus==='已发布'","header": {"className": "bg-white head","avatar": "<%= data.ThumbUrl || \"https://img0.baidu.com/it/u=2121694649,3857497397&fm=26&fmt=auto&gp=0.jpg\" %>","avatarClassName": "pull-left thumb-md avatar b-3x m-r img"},"bodyClassName": "padder","body": [{"name": "Name","className": "UserHome-textnamem","label": "",},],},},},{"type":"container","className":"viewMoreFooter","body":[]}]}export default class ViewMore extends Component {state={isLoad:''}componentDidMount(){let toMyLibrary = document.getElementsByClassName('mineKu')[0]toMyLibrary.onmouseover=()=>{toHomePage.style.cursor='pointer'}toMyLibrary.onclick=()=>{window.location.href="#/personalFamilyLibrary"}let toHomePage = document.getElementsByClassName('portalLogo')[0]toHomePage.onmouseover=()=>{toHomePage.style.cursor='pointer'}toHomePage.onclick=()=>{window.location.href="#/UserHome"}let addressM = window.location.hrefconsole.log(addressM);if(addressM.indexOf("?")!==-1){let total=addressM.split('?')let totalRight=total[1].split('=')let suc = totalRight[1]suc=decodeURIComponent(suc)console.log(suc);this.setState({isLoad:suc})}let nav= document.getElementsByClassName('navigationContainer')[0]console.log(nav);let that = thisnav.addEventListener('click',function(e){const cName = e.target.parentNode.parentNode.parentNode.className;console.log(cName.indexOf('mainPoint'))if (cName.indexOf('mainPoint')!==-1){that.setState({isLoad:e.target.innerText})}})let searchBoxAbut = document.getElementsByClassName('sousuo')[0]searchBoxAbut.onclick=()=>{let searchBoxValue =document.getElementsByClassName("a-TextControl-input")[0].firstChild.valuethat.setState({isLoad: searchBoxValue})}}render() {let bb=this.state.isLoadreturn renderAmis(// 这里是 amis 的 Json 配置。config,{data:{text:bb,}},env);}}

百度amis学习笔记汇总相关推荐

神经网络与深度学习笔记汇总五
神经网络与深度学习笔记汇总五往期回顾将之前掘金写的学习笔记所遇困难搬到这里,方便查看复习遇到问题: 报错 (未解决) 学习内容: 1.报错operand should contain 1 col ...
软考信息安全工程师学习笔记汇总
软考信息安全工程师学习笔记汇总 https://www.moondream.cn/?p=178 2020年软考信息安全工程师备考学习资料包 1.<信息安全工程师教程>重点标记版 2.& ...
【Spring MVC】学习笔记汇总
Spring MVC 学习笔记汇总 Java 系列笔记:[Java系列笔记]语法基础 + Spring + Spring MVC + 数据结构数据结构与算法笔记(这个牛逼!):<恋上数据结构& ...
2023年软考信息安全工程师备考学习笔记汇总
信息安全工程师分属"信息系统"专业,位处中级资格,2016年下半年,第一次开考信息安全工程师(中级)考试.目前每年考试一次.已开考六次,2016年11月12日,2017年5月20日 ...
神经网络与深度学习笔记汇总一
神经网络与深度学习笔记汇总一梯度下降法: 向量化:代替for循环广播 ReLU激活函数逻辑回归损失函数(误差函数) 代价函数卷积神经网络往期回顾梯度下降法: 通过最小化代价函数(成本函数 ...
神经网络与深度学习笔记汇总二
神经网络与深度学习笔记汇总二正交化(方便调整参数) 迭代单实数评估指标(判断几种手段/方法哪个更好) 指标选取训练集.开发集.测试集作用与用途评估指标判断算法是好是坏迁移学习总结往期回 ...
神经网络与深度学习笔记汇总三
神经网络与深度学习笔记汇总三往期回顾将之前掘金写的学习笔记所遇困难搬到这里,方便查看复习遇到问题: 异常值处理学习内容 1..drop() 返回的是一个新对象,原对象不会被改变. 2.遇到问题 ...
JVM学习笔记汇总：结合尚硅谷宋红康老师视频教程及PPT
JVM学习笔记汇总:结合尚硅谷宋红康老师视频教程及PPT 第一章:JVM虚拟机的介绍 1.1虚拟机的分类虚拟机通常分为两类:系统虚拟机和程序虚机.其中,系统虚拟机是指完全对物理计算机的仿真,而程序虚 ...
华为HCIA-datacom 学习笔记汇总目录
华为HCIA-datacom 学习笔记汇总目录华为HCIA-datacom 学习笔记1--网络参考模型华为HCIA-datacom 学习笔记2--华为VRP系统华为HCIA-datacom 学习 ...

百度amis学习笔记汇总

问题区