2018年5月，应百度邀请，苏宁首次入驻百度小程序平台。作为微信小程序的开发工程师，我接手了百度智能小程序(以下简称百度小程序)的“开荒”任务。自5月初开发以来，我用一个多月的时间完成了Suning.cn百度小程序的开发，并在7月初的“百度开发者大会”上作为第一批小程序提供服务。

5月至今，作为百度小程序的主要开发，总结了以下开发经验。

百度小程序初探

入驻百度小程序

百度小程序的进入方式和微信小程序几乎一样。准备一个百度账号，登录百度智能小程序后台，选择录入申请，选择合适的类型，填写表格信息并提交审核，24小时内即可审核通过。当然，如果你有百度小程序的邀请码，也可以走邀请码渠道入驻。这里需要特别注意的是，目前应用只对企业、政府、媒体等非个人主体开放，个人用户没有办法入驻。进入平台后，可以看到自己的小程序。

开发前的准备

使用注册的管理员账号登录后台，在成员管理中设置项目组成员的权限。百度小程序的用户权限主要分为：开发者权限、开发管理、开发设置、服务暂停设置、推广设置、流量拥有者、数据统计、小程序介绍、小程序头像。在设置-开发设置中，获取小程序的AppID、AppKey、AppSecret，设置服务器域名、业务域名、代理域名(小程序在web中使用)。在设置-基本设置中设置小程序名称、头像和个人资料。

开发人员工具

在百度小程序官网点击【文档】-【开发】-【左侧导航栏工具】-【界面】，下载开发工具。开发者工具启动后，有一个类似微信开发者工具的界面，区别如下：

百度小程序不集成类似微信小程序Tgit、腾讯云、云开发平台等功能。开发人员需要自带代码管理工具、服务器以及服务器所需的其他资源。

目前百度小程序IDE的新功能只支持新建一个DEMO。开发者需要在此基础上进行修改才能得到自己的项目，或者使用移动工具将微信小程序转换成百度小程序，这些都是不能从零开始创建的。微信小程序新功能从输入appID开始。百度的appid只能在项目建成后手动修改。

百度小程序IDE不需要独立设置代理。微信小程序IDE需要配置单独的代理。在复杂的网络环境下，可能会出现内外网不能同时访问的情况，但百度小程序不需要单独设置代理。

发展文件

百度小程序有丰富的文档，详细介绍了百度小程序从申请居留到小程序发布，从组件到API的各个方面。可以自己去官网看。

前端开发者眼中的百度小程序

因为百度小程序和微信小程序都是同时开发的，我就对比一下微信小程序，讲讲百度小程序开发中遇到的一些问题。

组件和API几乎和微信一样，框架分为逻辑层、视图层、自定义组件和基础能力，还支持分包和加载能力。百度小程序的组件也分为视图组件、基础组件、表单组件、导航组件、媒体组件、地图组件、画布组件和开放的相关组件。

在API方面，百度小程序也分为网络、媒体、文件、数据存储、位置、接口(包括绘图)、设备和开放接口。下面是我们发现的百度小程序和微信小程序的一些区别。

不同的组件

百度小程序列表渲染与微信不一致：

Viewwx: for=' { array } } ' wx : for-index=' idx ' wx 3360 for-item=' item name ' { idx } } : { { item name . message } }/view//也可以缩写为view wx : for。

查看s-for=' p in persons ' { p . name } }/查看/查看百度小程序的判断和循环不能再在同一个组件上。

比如微信小程序可以这样写：

如果=' { { item }，则为=' {array} '的Viewwx:iswx}}' {{index}} : {{item。message } }/view//或者类似的，view wx 3360 for=“{ array }”wx

而百度小程序则必须写成这边这个样子：

API 的不同

百度小程序提供了 AI 的能力，可以实现文字识别、文本审核、语音合成、图像审核、图像识别和语音识别功能。

Swan.request 能力。request 的问题主要体现在对单引号, 以及 URL 的汉字的兼容上. 百度小程序 request 能力并未对请求 UR 中的汉字做 encodeURIComponent 处理, 导致手百客户端发送请求直接失败，这边建议开发者自己对 get 请求的入参做 encodeURIComponent 处理. 单引号的问题也是这样, 具体表现出来, 请求发送出去之后, 通过抓包可以看到请求正常的发送了, 也正常返回了, 但是小程序既不会走进 success 分支, 也不会进入 error 分支, 报错也不能被 catch, 这个问题后期百度官方已经修复了。

分包体积限制不同

微信小程序目前的限制规则是，每个包不超过 2M ，总包不超过 8M，而百度小程序目前的限制规则是主包不得超过 4M，每个分包不得超过 2M，总包不得超过 8M，这个规则和目前微信程序的限制规则差别较大，在方便了开发者的同时，可能会在性能方便有所损耗。

在 CSS 和 JS 处理的上的细微差异

百度小程序不支持 css 的 > 选择器, 建议样式直接使用 class 选择器。

百度小程序支持的长度单位是 CSS3 的 vw，当然也支持微信小程序的 rpx。

使用伪元素实现的 0.5px 边框在百度小程序下会有异常，建议不要使用这种方法。

百度小程序不支持类似于微信小程序 WXS 的写法。百度小程序没有提供类似于微信小程序 WXS 的写法, 但是提供了 Filter 过滤器。Filer 代码可以编写在 swan 文件中的标签内，或以 .filter.js 为后缀名的文件内。

登录方式的区别

因为微信客户端是强制要求用户登录的，但是手百不需要，所以在联合登录时，针对此场景，百度小程序需要作出特别的开发。在百度小程序联合登录前，需要使用 swan.isloginsync api 进行手百客户端的登录状态判断，手百没有登录的，不能使用联合登录，所以建议开发者还需要准备一套独立账号登录体系。

支付方式的区别

微信小程序使用的是微信支付，而百度小程序使用的是百度聚合收银台，在接入流程和开发流程上都和微信小程序不一样，当然百度小程序官方也贴心的提供了微信直联和支付宝直联的能力，大家可以根据自己的需要选用适合自己的付款方式。

打包方式及发布的区别

百度小程序点击预览按钮生成的开发版小程序是可以给其他用户扫码查看的，并未像微信一样严格要求开发者权限才能打开开发版小程序，也没有体验者这一角色，这一点对于测试同学来说还是很方便的。

百度小程序 IDE 提供了两种编译模式: 依赖分析、普通编译。 依赖分析模式 : 无用文件不会被打包到产出中，支持 node_modules 的使用 ; 普通编译模式 : 不支持 node_modues 的使用，打包全部文件。

PhoneX 等机型样式适配

目前微信小程序并没有提供对 iphoneX，iphoneXS 等机型底部 bar 的适配，但是百度小程序提供了这样一个适配方案。

.swan-security-padding-bottom {padding-bottom:34px; }.swan-security-margin-bottom {margin-bottom: 34px;}.swan-security-fixed-bottom {bottom: 34px;}

该组样式会自动在需要适配安全区的场景动态注入，开发者不需要自行添加，只要在.swan 文件中使用这组类名即可。效果如下图所示：

如果你之前有开发微信小程序开发，百度小程序提供了一个搬家工具。 搬家工具，是基于 Abstract Syntax Tree 开发的辅助工具，可以帮助您把微信小程序的部分代码迁移到百度智能小程序上。

工具可进行静态语法上的转换，根据一些规则去转换代码，抹平微信小程序语法和百度智能小程序语法上的差异，为大家减少因平台差异带来的苦恼。需要注意的是：工具做不到运行时 diff 的抹平，也做不到一个 API 从无到有的过程。所以，需要大家根据转换 log，进行二次开发。

网络的虚拟性导致信任关系难以建立，交易决策困难。对于小程序这种轻便、易传播的特性，如何让用户能够更容易的决策，并且给用户适合他的商品。这无疑是十分重要的一环，而与百度合作的手百小程序中，百度的基于用户操作行为的大数据商品推荐系统可以处理信任评估中的主观因素，提高交易预测的准确性。

基于双方协同过滤的思想建立一个模糊信誉管理系统，突出对商品信息的处理与个性化推荐。上线以来，百度推荐模块的数据对比于原有苏宁内部的推荐来看，更贴合于用户在基于百度强大的搜索端的行为数据。对垂直行业的定制化推荐，满足不同行业的需求，让我们看到了百度推荐的智能化、专业化。

以上是我在苏宁开发百度小程序的一些经验，各公司也可以尝试一下，百度小程序也在不断的迭代中，每一次迭代都能感觉到进步，感觉百度小程序开发组的同学，远程帮我们解决了很多问题，特别感谢百度方的李嘉辉来苏宁驻场提供技术支持，没有你我们的开发之路不会这么顺利，以及百度的 QA 同学，对我们小程序提出宝贵的建议。