百度开源的低代码前端框架，支持网页和移动端页面开发
在经历了十几年的发展后，前端开发变得越来越复杂，门槛也越来越高，要使用当下流行的 UI 组件库，你必须懂 npm、webpack、react/vue，必须熟悉 ES6 语法，最好还了解状态管理，比如 Redux，如果没接触过函数式编程，光入门都很费劲，而入门之后会发现它还有巨大的生态，相关的库有 2347 个，很多功能相似，挑选成本高。
然而前端技术的发展不会停滞，等学完这些后可能会发现大家都用 Hooks 了、某个打包工具取代 Webpack了。使用amis只需要简单配置就能完成所有页面开发，你不需要了解 React/Vue、Webpack，甚至不需要很了解 JavaScript，即便没学过 amis 也能猜到大部分配置的作用，对于大部分常用页面，应该使用最简单的方法来实现，甚至不需要学习前端框架和工具。
- 不需要懂前端：在百度内部，大部分 amis 用户之前从来没写过前端页面，也不会 JavaScript，却能做出专业且复杂的后台界面，这是所有其他前端 UI 库都无法做到的；
- 不受前端技术更新的影响：百度内部最老的 amis 页面是 4 年多前创建的，至今还在使用，而当年的 Angular/Vue/React 版本现在都废弃了，当年流行的 Gulp 也被 Webpack 取代了，如果这些页面不是用 amis，现在的维护成本会很高；
- 享受 amis 的不断升级：amis 一直在提升细节交互体验，比如表格首行冻结、下拉框大数据下不卡顿等，之前的 JSON 配置完全不需要修改；
- amis 内置大量组件，包括了富文本编辑器、代码编辑器、diff、条件组合、实时日志等业务组件，绝大部分中后台页面开发只需要了解 amis 就足够了；还可以通过 自定义组件 来扩充组件，实际上 amis 可以当成普通 UI 库来使用。
amis的定位是一个低代码的前端框架，所以这里我们只介绍低代码部分，如果你想使用纯JSON配置来完成页面开发，那么请查看一下文档说明，当然你也可以使用90%低代码+10%代码开发的混合模式，既提升了效率，又不失灵活性。
注意：
1.目前 amis-editor 未开源，但可以免费使用（包括商用）
2.要使用编辑器必须熟悉 React
1. 在项目中使用amis-editor
安装依赖
使用方法
属性说明：
- value: any 值，amis 的json 配置。
- onChange: (value: any) => void。 当编辑器修改的时候会触发。
- preview?: boolean 是否为预览状态。
- autoFocus?: boolean 是否自动聚焦第一个可编辑的组件。
- plugins 插件类集合
2. 添加自定义组件
加自定义编辑器的方式有两种：
- registerEditorPlugin 注册全局插件。
- 不注册，但是调用 <Editor> 的时候时候通过 plugins 属性传入。
效果都一样，重点还是怎么写个 Plugin，示例：
定义好 plugin 后，可以有两种方式启用
示例只做了简单的说明，可用属性还有很多，具体还是先看 npm 包里面的 .d.ts 文件。
3. 编辑器效果
- 网页版
- 移动端
- 拖拽组件
- 查看代码
从网页到移动端，包括App、小程序等，amis可以满足的页面需求，但在一些特殊场景，比如有些页面追求个性化的视觉效果，amis 就不适用，实际上绝大部分前端 UI 组件库也都不适合，只能定制开发。更多有关amis的内容可自行前往阅读。
开源地址：https://gitee.com/baidu/amis
小白初学—神奇的HTML
今天我们一起来了解下HTML，
首先HTmL包含三层结构，分别是结构层，表现层，行为层。
结构层：html => 网页上有什么，比如说文字啊、按钮啊、图片啊等等。
表现层：css => 显示成什么样子，比如说文字的大小啊，位置啊，颜色啊等等。
行为层：JavaScript => 具体怎么操作，比如说点击按钮让图片放大缩小等等。
===============================
在了解了html的三层结构之后，我们来学习如何写html。html不是编程语言，它是一套标签。最简单的html文本是下图1这个样子。我们可以在电脑桌面上新建一个记事本文件，然后把后缀名改一下（.txt=>.html），把这段标签代码粘贴到html文件里，这样一个空白的网页就做成了。如果需要在网页上添加内容，我们只需要在第10行的位置添加各种各样的标签即可。比如我在图二添加了一个按钮标签和一段文字标签，双击html文件，页面上就从左到右，从上到下显示对应的内容。是不是很简单。我们日常浏览的网页都是这样一个标签一个标签画上去的。
我给大家总结了一张图，基本上覆盖了工作中常用的知识点。同时分享几个小技巧。
1.最简单的网页写成什么样子，也就是html模板不需要记忆，下图也说了，去百度下载一个VSCode软件（类似于记事本，是现在主流的前端代码编辑器），用它打开我们的html文件，输入英文叹号回车就自动生成了，学编程不要死记硬背。
2.控件的标签不需要记忆，直接百度html XXX标签，例如：百度搜“html按钮标签”，他就会告诉我们是<button>，用的时间长了自然就记住了。是不是省力。
3.标签的属性很重要，可以不去记他的写法，因为写可以百度，重要的是你需要记住标签有什么属性，下图的属性记住足矣。为什么要记呢，因为工作中，有的时候会遇到这样一种情况，明明设置一个属性可以完成的功能，我们不知道，花费了大力气用css和js去实现，结果还存在着特定场合的bug，让人很无奈。
4.对于html还有两个标签<canvas>和<svg>，他们是用来绘图的，做特殊效果的。我们可以先跳过，等框架啥的都学完了，有兴趣，学习一下。
5.给大家推荐一个小白学习html的网站，w3cschool，图里不明白的可以去上边学学练练。
6.如果觉得一个人学习前端有难度，我建了一个小白前端学习交流群，可以私聊我，大家在群里多多交流，我会经常给大家答疑，组织大家练习，一起做小项目。有方向，少走弯路。
网页在百度良好展现的标准
吸引眼球的Title
用户在百度网页搜索中搜索到你的网页时，title会做为最重要的内容显示在摘要中，一个主题明确的title可以帮助用户更方便地从搜索结果中判断你网页上内容是否符合他需求。
悟道SEO推荐做法：
• 标题要主题明确，包含这个网页中最重要的内容
• 文章页title中不要加入过多的额外描述，会分散用户注意力
• 使用用户所熟知的语言描述
• 如果您的网站用户比较熟，建议将网站名称列到title中合适的位置，品牌效应会增加用户点击的机率
• 标题要对用户有吸引力
• 能让用户产生信任感
例子中的网页，提供全国主要城市的天气预报服务，第一个结果中，使用了百度地图默认的title，用户在搜索结果无法判断这个网站提供的内容是什么，也就不会点击这个结果，第二个结果中，title很明确的写明了所提供的内容，用户判断起来比较容易，选择这个结果的可能性比较大。
善用Meta description
Meta description是对网页内容的精练概括。如果description描述与网页内容相符，百度会把description当做摘要的选择目标之一，一个好的description会帮助用户更方便的从搜索结果中判断你的网页内容是否和需求相符。Meta description不是权值计算的参考因素，这个标签存在与否不影响网页权值，只会用做搜索结果摘要的一个选择目标。
Meta description是meta标签的一部分，位于html代码的<head>区
悟道SEO推荐做法：
•网站首页、频道页、产品参数页等没有大段文字可以用做摘要的网页最适合使用description
•准确的描述网页，不要堆砌关键词
•为每个网页创建不同的description，避免所有网页都使用同样的描述
•长度合理，不过长不过短
例子中，第一个没有应用meta description，第二个应用了meta description，可以看出第一个结果的摘要对用户基本没有参考价值，第二个结果的摘要更具可读性，可以让用户更了解网站的内容。
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
