百度小程序开发过程中陷阱很多，我被折磨死了，我给你我的经验

我运行过很多百度小程序，也开发过一些产品，但我都快被百度小程序折磨死了。我真的不想抱怨，所以我就谈谈我发现的陷阱和一些经验。

1。 s-to

对于此循环，可写为 s-to = 'arr' 或 s-to = 'item, index in arr'。这没什么，主要原因是s-for不能绑定常量。 。 。这让我从微信小程序切换到百度小程序很不舒服。 。 。官方回应称，分歧将在稍后解决。不知道现在修复了没有。

2。自定义组件名称和路径

引用组件时，在json文件中，usingComponents选项中填写要引入的组件，并设置名称："my-radio":"/components/bd -radio/bd-收音机”。需要注意的是，这个组件名称不支持驼峰和大写字母。路径支持绝对路径和相对路径。

3。特殊组件组件通信

SubComponent('getchange',idx);触发事件， getchange 是父组件要接收的事件名称，第二个参数是要发回的数据， 最好是对象， 之前不支持其他参数。
父组件bindgetchange bind后面的是子组件传递的事件的名称，接下来是(getSex)是父组件中的一个 接收定义函数时，是从组件

4传过来的数据。获取索引值

如果想获取s-for中当前点击元素的索引值，只需在{{index}}'元素的特殊属性中添加data-idx='即可，然后点击在活动内并通过以下方式获取： 。

5。

百度小程序仅支持https协议。如果不小心将接口改为HTTP协议URL，在开发者工具上是没有问题的。不过，如果你足够幸运能够在真机上调试，那应该不成问题。如果运气不好的话，在某些手机上界面会不正确。响应情况是，并未能打印：非法请求非法请求。但没有报错。因此，这种情况下的方向并不明显。谁知道非法请求是接口错误还是URL地址错误。

另外，百度这个界面的url好像没有encodeURIComponent，所以如果是中文的话就得自己编码了。

6。 swan.setStorageSync

swan.setStorageSync 这个同步数据存储接口，官方文档说：参数支持String key、Object/data String。第一次使用这个接口，没注意参数。结果我在里面传入了布尔值，但是我用它去获取的时候却获取不到。原来数据的最外层包含了数据属性。 。即正常值为xxx:true，但实际数据为：{xxx:true} 这也是醉了。 。 。如果不支持，至少给出错误信息。 。 。

7。 rich-text

如果使用rich-text组件富文本

<rich-text node="{{}}"></rich-text>
//如果a是后台取的，在js的data中初始化的时候，如果a设置为null，有可能会报错，导致页面复制相同的内容，即出现两个相同的内容连在一起。所以最好设置为 {} 空对象。

并且如果发现未知标签，它将停止渲染并且不会出现错误消息。 。 。

我遇到过好几次两个相同内容同时出现的情况。我忘记拍照了，也忘记了它的样子。 。 。

8。图片组件出现图片加载失败

如果图片路径在某些时候是正确的，但是加载图片时出现错误，不知道如何解决。官方的回答是不会影响开发。 。 。特别是当从一个页面导航器跳转或跳转到另一页面的另一种方法时，尤其可能会发生这种情况。还有当地的形象。 。 。

官方回复称：图片图片地址仅支持https协议，并且在小程序后台配置了域名，或者找不到百度域名图片。如果不满足这些条件，图像将无法正常显示。但有时上述问题仍然存在。

9。 H5支付转入百度支付。付款H5。因为本地预览期间，无论安卓还是IOS，都可以支付成功，没有问题。但一发布上线，支付时就无法打开微信或支付宝支付弹窗。无法跳转至支付弹窗页面。 所有安卓设备都不允许，IOS可以。查包发现结果返回正常，没有错误。估计是被百度官方屏蔽了。官方的答复是：为了保护用户的资金安全，小程序的网页视图不支持调用第三方支付服务本身。如果您有支付需求，建议连接百度收银台。 。 。但是，但是，但是。 。 。我注意到苏宁易购的百度小程序使用的是自己的第三方支付接口，并没有使用百度的支付接口。 。 。我很惊讶。我的孩子直接在苏宁易购可以吗？ ？ ？

10。网页视图 src 也可以使用 localhost

网页视图 src 也可以更改为 IP 地址。例如，我使用 vue-cli 运行本地项目，假设它是 http://localhost:8087/szxgcs/。此时，我将localhost更改为我自己的IP地址，然后在webview的src中：

<web-view src='http://192.168.xxx.xxx:8087/szxgcs/'></web-view>
//这样就能运行在本地的代码了

11。使用未声明的变量时，可能不会出现错误信息

有时在某些接口中，或者在请求数据中，使用时，由于我的不小心，导致没有声明。所以在运行的时候，我发现调整界面没有反应。但是没有显示的错误在哪里，所以我很困惑。请务必检查是否声明了某些变量。但现在情况似乎发生了变化。如果不声明就会报错。

12。访问百度信息流

页面配置访问百度信息流的应用。如果小程序的首页是嵌套的网页浏览页面，则不是小程序原始开发的百度页面。那么您将无法申请。现在默认连接百度信息流，所以如果不配置，会出现警告信息要求您配置。建议代码写成&&({内容配置})。如果不这样写，按照官方的写法，真机调试的时候会报错。

13。在发布审核期间将基础库版本设置为更高级别。

建议发布和检查时，将开发者平台---设置---基础设置---基础库最低版本设置设置为较高的值。低版本有问题。如果百度有问题，官方不会给你修复。这是官方技术人员的正式答复。总的来说，以上设置已经足够了，过去使用过的用户并不多。这也可以防止测试人员在审查期间尝试较低版本并导致原因不明的错误。

14。 s-if 不能与 s-to 一起使用。可能会发生不可预测的错误。还有，s-if要写在前面，不然会出现一些小问题。 。 。

。如果你需要向组件发送内容，并且内容是异步获取的，那么在组件中，获取时，可能无法获取到传递的内容。这个是正常的。在H5的vue中，我使用v-if来避免无法获取的情况。等同于：

</ child :sendval='data' v-if='data' >
//data初始化为false，这样，只有在data真实获取到内容的时候，才渲染组件。
//但是，在百度小程序中，判断条件必须写在前面即：
<child  s-if='data' :sendval='data' ></child>
//不然，还是会出现获取不了内容的情况

15。 () 有时需要延迟提供宽度、高度等信息。

() 是一个用于检索 dom 元素的接口。如果元素dom是动态添加的获取的，那么调用boundingClientRect获取宽高等信息时，必须延迟获取。这在组件中表现得更加明显。即使组件添加了s-if，数据成功返回后组件进行渲染，渲染过程也需要时间，因此无法及时获取元素信息。即使使用()也没有效果，有时还无法获取。我设置的setTimeout延迟一般为150ms

16。 ()

() 提供异步操作。从未使用过，官方描述也不清楚。感觉和vue的nextTick不一样。由于我在相同的条件下测试相同的代码，因此它们的行为不同。

17。谨慎使用sConsole

webview中的h5页面跳转到小程序时会打开两次。打开SConsole调试面板时会出现这种情况。关闭后就不会出现这种情况了。

在其他情况下使用sConsole时可能会出现一些小问题。 。 。

18。 getSwanId

getSwanId在开发者工具上返回的是SWAN-DEVELOP，但在真机上它是一串由几十个字母和数字组成的字符串。

19。 css 单位

支持css基本单位，但如果是rpx，小程序会自动转换为vw或vh，所以你会看到控制台中的单位都是vw或vh

20。 getStorage

getStorage 获取本地不存在的数据。它默认记录成功，并且不会记录失败时的回调

21。分享到贴吧

这个功能有官方说明：这是一个接入文档。天气晴朗。插图。

在代码中配置好并启动小程序后，我想我可以申请共享白名单了。 。 。但是，该按钮对我来说处于非活动状态，无法单击。 。 。不知道为什么。 。 。然后我就放弃了

以上是我遇到的真实情况。实在是太累了。我只用了一天的时间就完成了内容，但由于一路上的陷阱，最后又花了两三次。 。 。渐渐地我开始怀疑自己是否适合成为一名程序员。 。 。

以后继续开发百度小程序，我的寿命又要缩短了。 。 。