13日下午,2018百度·智能小程序学院首次离线公开课在北京举行。百度的官方数据显示,自今年7月的百度AI开发者大会以来,百度Smart小程序的月度活动已超过1.5亿美元。值得一提的是,Smart小程序已在GitHub上开源,而百度不久将建立一个开源联盟,以促进小程序生态系统的开发和建设。在会议上,百度高级前端工程师张自盟还详细介绍了智能小程序的开发解决方案。以下是他演讲的整理报告。
智能小程序开发流程
首先,存在智能小程序的访问问题,但有两种情况,一种是没有小程序开发经验的开发人员,另一种是具有微信小程序开发经验的开发人员
对于尚未开发小程序的开发人员,百度的解决方案是使用本机或应用程序层框架进行开发。
本土发展
本地开发是指根据百度Smart小程序的规范进行的开发。它分为视图层和逻辑层。在视图层,CSS是标准CSS。像H5一样,有一种标记语言。标记是SWAN文件,它提供了自己的容器,当然,开发人员还可以自定义一些组件。
在逻辑级别,Smart小程序定义了一组自己的生命周期,主要是在页面级别。与Web不同,在切换页面时,它称为页面的生命周期,除了生命周期之外,还有数据管理和数据驱动方法。通过数据驱动,模板设计成本将变得非常低。
应用层框架访问
如今,跨平台开发已成为开发人员关注的焦点。当然,百度Smart小程序自然不会忽略开发人员的需求。当开发人员希望能够使用一组代码同时在Baidu Smart小程序,微信小程序或Web上运行时,跨平台解决方案将派上用场。
在7月我们报告Smart小程序之前,即Smart小程序与网络相似。它使用Web技术,并且可以在浏览器上运行。因为Smart小程序具有逻辑层和视图层,所以逻辑层的核心是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支持。
芋头
使用Vue,React当然是必不可少的。芋头应该更出名。 Taro遵循React语法规范。由于React具有广泛的受众,因此可以降低小程序开发的学习成本。
Taro使用JSX作为模板对它进行了一些JSX处理。与字符串模板相比,它更加自由,自然和富有表现力。它不依赖字符串模板的语法糖,还可以完成复杂的处理。
Taro还具有跨终端解决方案,这可以为Taro的后续多终端开发带来极大的便利。
在下面的图片中,左侧是基于Taro的JD Haowu Street Intelligence小程序,右侧是基于Mpvue的官方小程序实例。您可以打开百度APP并扫描代码以进行体验。
最后,这是对本机开发和应用程序层框架开发的总结和比较。它们的优点和缺点之间没有区别,只是它们是否合适。开发人员可以根据实际情况进行选择。
如果您开发了微信小程序
我相信许多开发人员已经开发了微信小程序,那么我们如何从微信小程序切换到百度智能小程序?您可以观看下面的视频:
左侧是微信小程序,在微信开发人员工具中运行。转换后,输入微信小程序的原始代码以生成目录,然后开始静态编译,静态转换,然后在百度开发人员工具中将其打开。在输出目录中,没有任何代码行。迁移后,效果完全相同,但是您需要自己处理一些登录和付款功能。
换句话说,如果开发人员已经拥有微信小程序,则他可以使用本机开发,而仅使用迁移工具。百度的迁移工具具有四个主要功能:
##开发工具链
选择解决方案后,我们需要开发小程序。在开发时,我们需要使用开发工具链。这是小程序开发中必不可少的过程。在这方面,提供了百度智能小程序开发人员工具,包括编辑器,模拟器,调试器,引擎调试,编译预览等。
由于小程序用于手机,因此手机的开发和调试经验不佳。为了方便您的开发,智能小程序支持在PC端进行开发,因此PC上有一个模拟器,其模拟效果与手机的运行效果几乎没有区别,而百度智能小程序 ]支持多平台切换,可以切换到Android和Apple,还可以模拟不同的网络环境,例如wifi2G,3G和no 网络。
百度智能小程序的编辑器根据小程序的代码进行了深度定制,主要用于代码提示。如果在使用此编辑器的开发过程中使用了某些API,它将自动为您完成该编辑器。它还可以支持突出显示css,js,swan和其他文件格式。
调试在开发之后是不可分割的。调试是Web开发人员最常用的功能,并且不乏智能小程序,主要包括:
还有远程调试。在PC上进行开发后,请先使用远程调试,因为它在真实计算机上运行,并且PC上有一个调试面板。在真实计算机上运行的效果与真实计算机相同。开发人员工具中的模拟开发没有问题后,请转到远程调试进行调试,然后在调试后使用预览,然后再次观看,就可以毫无问题地进行上传。
百度Smart小程序还具有编译工具,该工具支持CMD模式编译,AMD模式编译,自定义编译条件,热编译和增量编译。
有关百度智能小程序的更多信息,请查看以下文章: