13 日下午，2022 百度·智能小法式学院首场线下公然课在北京举行，百度官方数据显现，自今年 7 月份百度 AI 开辟者大会以来，百度智能小法式月活已经过了 1.5 亿，值得一提的是，智能小法式已经在GitHub上开源，百度也行将建立开源同盟，促进小法式生态的成长和扶植。会上，百度资深前端工程师张自萌还详解了智能小法式的开辟处理计划，以下是对其演讲内容的整理报道。

智能小法式开辟流程

首先是智能小法式的接入题目，但这要分为两种情况，一是没有小法式的开辟经历，从零起头的开辟者，另一种是有过微信小法式开辟经历的开辟者。

对于没有开辟太小法式的开辟者，百度给出的处理计划是利用原生或利用利用层框架的方式停止开辟。

原生开辟

原生开辟指的是根据百度智能小法式的标准停止开辟，它被分红了视图层和逻辑层，在视图层上，CSS 是标准的 CSS，与 H5 一样有一个标志说话，标志是 SWAN 文件，它供给了自己的容器，固然，开辟者也可以自界说开辟一些组件。

在逻辑层上，智能小法式界说了一套自己的生命周期，主如果在页面那一层，与 web 分歧的是，在做页面切换的时辰，挪用了页面的生命周期，除了生命周期之外，还稀有据治理、数据驱动的方式，经过数据驱动，模板的设想本钱会变得很是低。

利用层框架接入

现现在，跨平台开辟成为开辟者关注的焦点，固然百度智能小法式也自然不会轻忽开辟者的需求。当开辟者希望可以以一套代码可以同时运转在百度智能小法式、微信小法式或 Web 端上时，跨平台处理计划就派上了用处。

之前我们曾在 7 月份报道过智能小法式多端运转的道理，即智能小法式和 Web 是类似的，它利用的技术都是 Web 技术，可以在阅读器上运转，由于智能小法式有逻辑层和视图层，逻辑层最焦点的一点是 JS 引擎，不管客户端还是阅读器，都有 JS 引擎，在分歧的平台利用分歧的衬着技术衬着，这就保证大师写的代码一次开辟在分歧平台获得运转。

但在真正利用时，你需要利用框架层接入的方式来实现，经过源码框架层开辟，编译以后跑在各自的平台上，在这方面，业界著名的框架有 Taro、Mpvue、WePY，它们各自的团队都仍在积极的保护和迭代中，在这方面，百度暗示，它们愿意拥抱第三方合作共建小法式框架的开辟。

下面重点讲一下三个框架的特点。

WePY

WePY 是一个 MVVM 框架，它跟 Vue 语法很是类似，是一个类 Vue 的框架，开辟的时辰像 Vue，可是底层不是 Vue；它支持组件的开辟，包括 Vue 一切的循环、嵌套、组件 Props 传值、组件通讯、自界说事务、第三方组件。

WePY 默许支持的是 ESNext 标准，包括 setData 性能优化（脏检测）、事务传参、编译器（Babel、Ts、Less、Sass）、Mixin，同时，它还支持 NPM 资本，可以处置 NPM 资本的依靠。

Mpvue

Mpvue 和 WePY 很是类似，它利用 Vue.js runtime 支持了小法式，实现小法式和 H5 的组件复用，它可以利用 Vue 的数据治理，包括 Web 的支持等。

Taro

有了 Vue，固然不能缺少 React，比力著名应当就是 Taro 了，Taro 遵守的是 React 语律例范，由于 React 受众广，它能下降小法式开辟的进修本钱。

Taro 在上面做了一些 JSX 处置，采用 JSX 作为模板，相比字符串模板，更自在、自然、更具表示力，不依靠字符串模板语法糖，也能完成复杂处置。

Taro 还有跨端处理计划，可以给 Taro 前期多端开辟带来很大的便当。

下图中，左侧是基于 Taro 的京东好物街智能小法式，右侧是基于 Mpvue 的官方小法式实例，大师可以翻开百度 APP 扫码体验一下。

最初，这是原生开辟和利用利用层框架开辟的总结和比力，它们没有好坏之分，只要适不适用，开辟者可以按照现真相况自行选用。

假如你开辟过微信小法式

相信有很多开辟者开辟过微信小法式了，那末，我们若何从微信小法式一键转到百度智能小法式上呢？大师可以看看下面的视频：

左侧是微信小法式，是跑在微信开辟者工具里的，转换以后先输入微信小法式的原代码，天生目录，然后起头静态编译，静态转换，在百度开辟者工具里翻开产出目录，没动一行代码，迁移后，结果如出一辙，可是有一些登录付出的才能需要自己处置一下。

也就是说，开辟者假如已有微信小法式，可以采用原生开辟，利用迁移工具即可。百度的迁移工具有四大特点：

• 代码搬家。不异代码，会原样搬家，连结代码行数、列数分歧，方便开辟者间接二次开辟。
• 转换 log。做一系列的代码转换，终极城市输出 log 给开辟者，帮助开辟者停止二次开辟。
• 视图转换。Wx 指令转换成 s- 指令，转换非标准标签语法，import 和 include 援用资本的转换。
• 语法转换。逻辑表达式中的 API 转换，一元运算符中 API 转换，删除不支持的 API。

## 开辟工具链

挑选处理计划以后，我们就需要开辟小法式了，开辟的时辰就要用到开辟工具链，这是小法式开辟里必不成少的流程，在这方面，百度智能小法式供给了开辟者工具，里面包括了编辑器、模拟器、调试器、引擎调试、编译预览等。

由于小法式是用在手机上，但在手机上开辟调试体验欠好，为了方便大师开辟，智能小法式支持在 PC 端开辟，所以在 PC 上有一个模拟器，仿真结果和手机真个运转结果几近没有什么区分，而且百度智能小法式支持多平台切换，可以切换成安卓、苹果，而且还可以模拟 wifi2G、3G 和无收集等分歧的收集情况。

百度智能小法式的编辑器是按照小法式的代码深度定制的，主如果代码提醒，假如你在利用这个编辑器开辟进程中利用一些 API，它都帮你自动补全，它还能支持 css,js,swan 等多文件格式的高亮。

开辟以后离不开调试，调试作为一个 web 开辟者最常用的功用，智能小法式自然也不会少，首要包括：

• Swan 节点款式调试
• Console 输入输出调试
• Sources 代码断点调试
• Network 收集抓包调试
• Storages 编辑展现调试
• AppData 编辑展现调试
• Sensors 罗盘，重力感应调试

还有远程调试，在 PC 上开辟好以后先用远程调试，由因而跑在真机上的，PC 上有调试面板，真机上做运转，和真机运转的结果一样。开辟者工具里模拟开辟没有题目以后再去远程调试里调试，调试以后再利用预览，再看一遍，没有题目便可以上传了。

百度智能小法式还有编译工具，它支持 CMD 形式的编译、AMD 形式的编译、自界说编译条件、热编译和增量编译等。