13日下午，2018百度智能小程序学院首届线下公开课在北京举行。据百度官方数据显示，自今年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运行时支持小程序，实现小程序和H5组件的复用。可以使用vue的数据管理，包括Web支持等。

Taro

，有了Vue，当然不能缺REAT。芋头应该更出名。Taro遵循REAT语法规范。由于REAT受众广泛，可以降低小程序开发的学习成本。

芋头在上面做了一些JSX处理，用JSX做模板，比字符串模板更自由、自然、有表现力，不依赖字符串模板语法糖就能完成复杂的处理。

芋头还有跨端解决方案，可以给芋头后期的多端开发带来很大的便利。

下图中，左边是基于Taro的JD.COM吴昊街智能小程序，右边是基于Mpvue的官方小程序示例。可以打开百度APP扫描代码体验一下。

最后，这是本机开发和使用应用层框架的开发之间的总结和比较。两者没有区别，只是适合不适合，开发者可以根据实际情况选择。

limg/181219/2-1Q21Z93425360.png" style="width: 1474px; height: 566px;" />

如果你开发过微信小程序

相信有不少开发者开发过微信小程序了，那么，我们如何从微信小程序一键转到百度智能小程序上呢？大家可以看看下面的视频：

左边是微信小程序，是跑在微信开发者工具里的，转换之后先输入微信小程序的原代码，生成目录，然后开始静态编译，静态转换，在百度开发者工具里打开产出目录，没动一行代码，迁移后，效果一模一样，但是有一些登录支付的能力需要自己处理一下。

也就是说，开发者如果已有微信小程序，可以采用原生开发，使用迁移工具即可。百度的迁移工具有四大特点：

• 代码搬迁。相同代码，会原样搬迁，保持代码行数、列数一致，方便开发者直接二次开发。

• 转换 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 模式的编译、自定义编译条件、热编译和增量编译等。