百度发布了智能小程序开发程序

2018年13日下午，百度·智能小程序学院的第一个离线公共课程在沈阳举行。百度的官方数据显示，自今年7月百度AI开发者大会以来，百度智能小程序已经过了1.5亿个月。值得一提的是。智能小程序已经在GitHub上开源，百度也即将建立一个开源联盟，以促进小程序生态系统的开发和构建。在会上，白子高级前端工程师张子蒙还介绍了智能小程序的开发解决方案。以下是关于演讲内容的报告。

智能小程序开发流程

第一个是智能小程序的访问问题，但这必须分为两种情况。一个是没有小程序开发经验，开发人员从头开始，另一个是经历过微信小程序开发的开发人员。

对于尚未开发小程序的开发人员，百度的解决方案是使用本机或应用层框架进行开发。

原生开发

本机开发是指根据百度智能小程序的规范进行开发。它分为视图层和逻辑层。在视图层上，CSS是标准CSS。和H5一样，有一种标记语言。标记是SWAN文件，它提供了我自己的容器，当然，开发人员也可以自定义一些组件。

在逻辑层面，Smart 小程序定义了一组自己的生命周期，主要是在页面层面。与Web不同，当切换页面时，除生命周期外，将调用页面的生命周期。还有数据管理，数据驱动方式，通过数据驱动，模板的设计成本将变得非常低。

应用层框架接入

Nowadays, cross-platform development has become the focus of developers. Of course, Baidu Smart 小程序 will naturally ignore the needs of developers. Cross-platform solutions come in handy when developers want to be able to run on Baidu Smart 小程序, 微信小程序 or the Web side with a single set of code.

Previously, we reported on the principle of intelligent 小程序 multi-end operation in July, that is, the smart 小程序 and the Web are similar. The technology used is web technology, which can be run on the browser. Since the smart 小程序 has a logical layer and a view layer, The core of the logic layer is the JS engine. Both the client and the browser, there are JS engines, which are rendered using different rendering techniques on different platforms. This ensures that the code written by everyone is run on different platforms at a time.

But in actual use, you need to use the framework layer access method to achieve, through the source framework layer development, compile and run on their respective platforms. In this respect, the industry-famous frameworks are Taro, Mpvue, WePY, and their respective The teams are still actively maintaining and iterating. In this regard, Baidu said that they are willing to embrace the cooperation of third parties to build the 小程序 framework.

The following focuses on the characteristics of the three frameworks.

WePY

WePY is an MVVM framework, which is very similar to Vue syntax. It is a Vue-like framework. It is developed like Vue, but the underlying layer is not Vue. It supports component development, including Vue all loops, nesting, and component Props. component communication, custom events, third-party components.

xx WePY默认支持的是ESNext标准，包括setData性能优化（脏检测），事件传参，编译器（Babel，Ts，Less，Sass），Mixin，同时，它还支持NPM资源，能够处理NPM资源的依赖。

Mpvue

Mpvue和WePY非常类似，它使用Vue.js运行时支持了小程序，实现小程序和H5的组件复用，它可以使用Vue的数据管理，包括Web的支持等。

Taro

有了Vue，当然不能缺少React，比较出名应该就是Taro了，Taro遵循的是React语法规范，由于React受众广，它能降低小程序开发的学习成本。

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

太郎还设计软件

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

下图中，左边是基于Taro的京东好物街智能小程序，右边是基于Mpvue的官方小程序实例，大家可以打开百度APP扫码体验一下。

最后，这是原生开发和使用应用层框架开发的总结和比较，它们没有优劣之分，只有适不适用，开发者可以根据实际情况自行选用。

如果你开发过微信小程序

XX I believe that many developers have developed 微信小程序, then, how do we transfer from 微信小程序 to Baidu Smart 小程序? You can take a look at the video below:

On the left is 微信小程序, which is run in the 微信 developer tool. After the conversion, input the original code of 微信小程序, generate the directory, and then start static compilation, static conversion, open the output directory in Baidu developer tool, no line of code, After the migration, the effect is exactly the same, but there are some login payment capabilities that need to be handled by yourself.

In other words, if the developer already has 微信小程序, you can use native development and use the migration tool. Baidu's migration tool has four major characteristics:

Code relocation. The same code will be relocated as it is, keeping the number of lines and columns consistent, which is convenient for developers to directly develop.

Convert log. Do a series of code conversions, and eventually output the log to the developer to assist the developer in secondary development.

View conversion. The Wx instruction is converted to an s- directive that converts non-standard label syntax, import and include reference resource conversions.

Syntax conversion. API conversions in logical expressions, API conversions in unary operators, and removal of unsupported APIs.

## Development Tool Chain

After choosing the solution, we need to develop 小程序. We need to use the development tool chain when developing. This is an indispensable process in 小程序 development. In this regard, Baidu Smart 小程序 provides developer tools, which include Editors, simulators, debuggers, engine debugging, compilation previews, and more.

xx 由于小程序用于手机，因此手机的开发和调试体验并不好。为了方便大家的发展，智能小程序支持PC端的开发，因此PC上有一个模拟器，模拟效果和手机的运行效果几乎没有。与众不同，百度智能小程序支持多平台切换，可以切换到Android，Apple，也可以模拟不同的网络环境，如wifi2G，3G和无网络。

百度智能小程序编辑器是根据小程序代码深度定制的，主要是代码提示，如果你在这个编辑器的开发过程中使用一些API，它会帮你自动完成，它还可以支持css，js，Highlighting多种文件格式如天鹅。

在开发之后，调试是必不可少的，调试是Web开发人员最常用的功能，而智能小程序自然也不少，主要包括：

天鹅节点样式调试

控制台输入和输出调试

源代码断点调试

网络捕获调试

存储编辑显示调试

AppData编辑显示调试

传感器指南针，重力感应调试

还有远程调试。在PC上进行开发后，首先使用远程调试，因为它在真机上运行，PC上有一个调试面板，真机运行，这与真机运行相同。在开发人员工具中，模拟开发没有问题，然后进行远程调试和调试。调试后，再次使用预览，然后再次阅读。您可以毫无问题地上传它。

百度智能小程序还有一个编译工具，支持CMD模式编译，AMD模式编译，自定义编译条件，热编译和增量编译。

有关百度智能小程序的更多信息，请参阅以下文章：

什么是百度最新发布的智能小程序？

苏宁：我们开发了百度小程序

遇到的“坑”