能今天做好的事就不要等到明天。以梦为马，学习趁年华。
问题区
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、delete
data, // 请求数据
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.href
console.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 = this
nav.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.value
that.setState({isLoad: searchBoxValue})
}
}
render() {
let bb=this.state.isLoad
return renderAmis(
// 这里是 amis 的 Json 配置。
config,
{
data:{
text:bb,
}
},
env
);
}
}
6323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
