百度资深前端工程师张自萌：智能小程序开发解决方案

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

百度资深前端工程师张自萌：智能小程序开发解决方案

13日下午，2018百度智能小程序学院首期线下公开课在北京举行。 百度官方数据显示手机h5制作小程序，自今年7月百度AI开发大会以来，百度智能小程序月活跃用户已突破1.5亿，值得一提的是，智能小程序已经在互联网上开源，并且百度即将成立开源联盟，推动小程序生态的发展和建设。 会上，百度高级前端工程师张子萌还详细讲解了智能小程序的开发方案。 以下是他的演讲摘要。

智能小程序开发流程

**个是智能小程序的接入问题，但这又可以分为两种情况，一种是没有开发小程序经验从头开始的开发，另一种是有开发微信经验的开发小程序。

对于从未开发小程序开发来说，百度的解决方案是原生开发或者使用应用层框架。

原生开发

原生开发是指按照百度智能小程序的规范进行开发。 它分为视图层和逻辑层。 在视图层，CSS是标准CSS。 它有像H5这样的标记语言，标记是SWAN文件。 它提供了自己的容器，当然开发也可以开发一些组件。

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

应用层框架接入

如今，跨平台开发已经成为开发关注的焦点。 当然，百度智能小程序也不会忽视开发的需求。 当开发想要使用一套可以同时运行在百度智能小程序、微信小程序或Web上的代码时，跨平台解决方案就派上用场了。

我们之前7月曾报道过智能小程序多端运行的原理，即智能小程序类似于Web。 他们使用的技术都是Web技术，可以在浏览器上运行。 由于智能小程序有逻辑层，而视图层和逻辑层的核心点就是JS引擎。 无论客户端还是浏览器，都有一个JS引擎，在不同的平台上使用不同的渲染技术进行渲染。 这确保了您编写的代码一旦开发就可以在不同的平台上运行。 。

但实际使用时，需要使用框架层的访问方式来实现。 通过源码框架层开发，在各自的平台上编译运行。 这方面，业界知名的框架有Taro、Mpvue、WePY等。 团队仍在积极维护和迭代。 对此，百度表示，他们愿意拥抱第三方合作，共同构建小程序框架的开发。

下面重点介绍三个框架的特点。

韦皮

WePY 是一个 MVVM 框架。 它在语法上与 Vue 非常相似。 它是一个类似Vue的框架。 它开发与Vue类似，但底层不是Vue。 它支持组件化开发，包括Vue的所有循环、嵌套、组件Props。 、组件通信、自定义事件、第三方组件。

WePY 默认支持标准，包括性能优化（脏检测）、事件参数传递、编译器（Babel、Ts、Less、Sass）、Mixin。 同时还支持NPM资源，可以处理NPM资源的依赖关系。

普维埃

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

芋头

有了Vue，React当然是不可或缺的。 比较出名的大概就是太郎了。 Taro 遵循 React 语法规范。 由于React受众广泛，因此可以降低小程序开发的学习成本。

Taro 对它做了一些 JSX 处理，使用 JSX 作为模板。 与字符串模板相比，它更加自由、自然、富有表现力。 它不依赖字符串模板语法糖，也可以完成复杂的处理。

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

下图中百度资深前端工程师张自萌：智能小程序开发解决方案，左边是基于Taro的京东好物街智能小程序，右边是基于Mpvue的官方小程序示例。 您可以打开百度APP扫码体验。

*后，这是对原生开发和使用应用层框架开发的总结和比较。 它们之间没有什么区别，只有适合不适合。 开发可以根据实际情况进行选择。

如果您开发微信小程序

相信很多开发都开发微信小程序。 那么，我们如何一键从微信小程序切换到百度智能小程序呢？ 您可以观看下面的视频：

左边是微信小程序，运行在微信开发工具中。 转换后，先输入微信小程序的原始代码，生成一个目录，然后开始静态编译，静态转换，在百度开发工具中打开输出目录，不移动一行代码，效果就会一模一样，但有一些登录和支付功能需要自己处理。

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

##开发工具链

选择方案后，我们需要开发小程序。 开发时候，我们必须使用开发工具链。 这是小程序开发中必不可少的流程。 对此，百度智能小程序提供了开发工具。 包括编辑器、模拟器、调试器、引擎调试、编译预览等。

由于小程序是在手机上使用的，因此手机上的开发开发体验并不好。 为了方便大家开发，智能小程序支持PC端开发，所以PC上有模拟器。 模拟效果与手机上运行效果几乎相同。 没有什么区别，而且百度智能小程序支持多平台切换，可以切换安卓和苹果，还可以模拟3G、无网络等不同的网络环境。

百度智能小程序的编辑器是根据小程序的代码深度定制的，主要是代码提示。 如果您在使用此编辑器的开发过程中使用了一些API，它会自动为您完成它们。 它还可以支持css、js、swan等多种文件格式的高亮。

开发完成后，调试是必不可少的。 作为Web开发*常用的功能，调试在智能小程序中自然是不会缺少的，主要包括：

还有远程调试。 在PC上开发完后，首先使用远程调试，因为是在真机上运行。 PC上有调试面板。 如果在真机上运行的话，效果和在真机上运行是一样的。 在开发工具中模拟开发没有问题后，就去远程调试进行调试。 调试完成后，使用预览再观看。 如果没有问题的话就可以上传了。

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

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等