细数百度小程序踩的坑

最近接触百度小程序挺多，开发了几个产品，都快被百度的小程序折磨死。真的是不想吐槽了，接下来我就讲讲我遇到的坑与一些经验。

1. s-for

这个for循环的写法为 s-for='arr' 或者 s-for = 'item,index in arr' 。这些到没什么，主要是s-for不能循环常数。。。这让我从微信小程序转到百度小程序不太习惯。。。官方回应说什么底层diff差别哦，后面会修复。不知道如今修复好没。

2. 自定义组件之命名与路径

引用组件的时候，在json文件中，usingComponents 选项里填入要引入的组件并自定义名称："my-radio":"/components/bd-radio/bd-radio"。须要注意的是：这个组件的名称不支持驼峰和大写写法。路径支持绝对路径和相对路径。

3. 自定义组件之组件通信

子组件 this.triggerEvent('getchange', idx); 触发事件，getchange是父组件须要接收的事件名，第二个参数是须要传回去的数据，最好是object，其它的参数，在2.0.3以前不支持。
父组件 <my-radio bindgetchange='getSex'></my-radio> bindgetchange bind后面的就是子组件传过来的事件名，再后面一个(getSex)就是父组件中定义的函数，接收的时候e.detail，就是自组件传过来的数据

4. 获取索引值

若是要获取s-for中当前点击元素的索引值，只有在元素上添加 data-idx='{{index}}' 自定义属性，而后点击事件里面，经过：e.currentTarget.dataset.idx 获取。

5. swan.request

百度小程序的 swan.request 只支持 https协议。若是你不当心接口弄成了HTTP协议的url，在开发者工具上彻底没问题，可是真机调试的话，若是你运气好，就没问题，运气很差在某些手机上就会出现接口无反应的状况，而且swan.request 的fail打印出： illegal request 非法请求。可是又没报错。因此，这个状况的提示也是不明显的，谁知道那个非法请求是接口仍是url地址的错啊。

还有就是百度好像并无对这个接口中的url进行encodeURIComponent，因此若是有中文，那本身须要进行编码一次。

6. swan.setStorageSync

swan.setStorageSync 这个同步的存储数据接口，官方文档说：参数支持String key, Object/String data。我第一次使用这个接口的时候，没注意看参数，结果传了一个布尔值进去，可是使用swan.getStorageSync获取的时候，始终获取不了，结果发现数据最外层包了一个data属性。即正常是xxx:true，实际上取出来是 data:{xxx:true} 也是醉了。。。不支持的至少给个错误提示啊。。。

7. rich-text

使用rich-text富文本组件的时候

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

并且若是遇到识别不了的标签会中止渲染，而且不会有错误提示。。。

我遇到过几回出现两个相同的内容连在一块儿的状况，忘了截图的，具体怎样出现的也忘了。。。

8. image 组件出现 image load faild

若是遇到某些时候图片路径是正确的，可是出现 image load faild 这个错误，我也不知道怎么解决。官方回答说不影响开发就行。。。特别是从一个页面navgitor或者其它的跳转方式跳转到另外的页面，就有可能会出现这种状况。并且图片仍是本地的。。。

官方回复说：image图片地址只支持https协议，而且在小程序后台进行域名配置，或者百度域名的图片，不知足条件的话，图片将没法正常显示。不过有时候仍是会出现上面的问题。

9. H5支付 转到 百度支付 swan.requestPolymerPayment

关于百度小程序支付：最开始我天真的觉得，web-view嵌套一个已经完善的H5商城，支付的时候也能够直接使用本身对接的H5的支付。由于在本地预览时，无论安卓仍是IOS，均可以支付成功，没问题。可是只要一发布上线，支付的时候就调不起微信或者支付宝的支付弹窗了。都不能跳转到支付弹窗的页面。安卓机所有不得行，IOS没问题。抓包发现结果返回正常，没有错误。我估计是百度官方屏蔽了。官方给出的回答是：为保护用户的资金安全，小程序的web-view不支持自行调用第三方支付服务。若有支付需求，建议接入百度收银台。。。可是，可是，可是。。。我看到苏宁易购的百度小程序就是使用的本身对接的第三方支付，并无使用百度的支付接口。。。我就很奇怪了，为撒子苏宁易购就能够？？？

10. web-view的src也可使用localhost

web-view的src也能够弄成IP地址的状况。好比我本地使用vue-cli运行了一个项目，假设为http://localhost:8087/szxgcs/detail.html。这时我把localhost改为本身的IP地址，而后在web-view的src中：

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

 

11. 使用未申明的变量，有可能会没错误提示

有时候在某些接口中，或者request的data中，使用that.data.xxx的时候，因为我粗心，that没有声明。因此在运行的时候，发现调接口没反应。可是又没有提示哪里有错，就很懵逼。因此必定要检查某些变量是否声明的。不过如今好像改好了，不声明会报错了。

12. swan.setPageInfo接入百度信息流

接入百度信息流的申请，就是在页面配置swan.setPageInfo，若是小程序首页是web-view嵌套的页面，不是百度小程序原生开发的页面。那么就会申请不了。如今默认都是接入了百度信息流的，因此若是没配置，会出现让你配置的警告信息。建议代码写成swan.setPageInfo && swan.setPageInfo({配置内容}) ，若是不这样写，按照官方的写法，在真机调试中，会报错。

13. 发布审核时设置基础库版本高一点。

建议发布审核的时候，把开发者平台 --- 设置 --- 基本设置 --- 基础库最低版本设置 设置高一点。低版本出现了问题，若是是百度的问题，官方是不会给你修复的，这是官方技术人员回复个人原话。通常设置3.xxx以上就能够了，3.xxx之前的没多少用户了。这样也能够避免审核的时候测试人员在低版本测试，出现不清楚缘由的bug。

14. s-if不能和s-for一块儿用。有可能出现不可预知的错误。还有就是 s-if 必定要写在最前面，否则有可能也会出现一些小问题。。。

.假如须要给组件传递内容，这个内容是异步获取的，那么在组件里，获取的时候，有可能会遇到获取不到传过来的内容，这个很正常。在H5的vue中，我使用v-if来避免获取不了的状况。相似：

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

 

15. swan.createSelectorQuery() 有时须要延时获取宽高等信息。

swan.createSelectorQuery()这个获取dom元素的接口，若是获取的dom元素是动态添加的，那么，在调用boundingClientRect获取宽高等信息的时候，是须要延时获取的。这个在组件中更明显，就算组件加了s-if，在数据成功返回以后再渲染组件，可是渲染的过程也须要耗时，因此，不能及时地获取到元素的信息。就算使用swan.nextTick()也没做用，有时候也会获取不到。我设置setTimeout延时通常是150ms

16. swan.nextTick()

swan.nextTick()就是提供一个异步操做。历来就没用过，官方的描述也是云里雾里的。感受和vue的nextTick不太同样。由于我试过相同状况下相同的代码，两个的表现不同。

17. 慎用sConsole

web-view中的h5页面跳转到小程序会打开两次。这个状况是打开了SConsole调试面板的，关闭以后就不会出现这个状况。

其它状况使用sConsole也有可能会出现某些小问题。。。

18. getSwanId

getSwanId在开发者工具上，返回的是SWAN-DEVELOP，而真机上是一段长度为几十个的字母和数字组成的字符串。

19. css单位

css单位基本都支持，不过若是是rpx这种，小程序会自动转换成vw或者vh，因此你会看到控制台里的单位都是vw或者vh

20. getStorage

getStorage获取本地不存在的数据，默认进入success，不会进入fail回调

21. 分享到贴吧

这个功能，官方有说明： 这里是接入文档       这里是简单说明。

在代码中配置好，而且上线小程序后，我觉得这样就能申请分享白名单了。。。然而，按钮居然没给我激活，点不动。。。搞不清楚缘由。。。而后就放弃了

 

上面这些是真实遇到的状况，真的累，原本只花一天的时间搞得定的内容，一路踩坑结果多花了两三倍的时间。。。逐渐怀疑我是否是作程序员的料。。。

后面还会继续开发百度小程序，估计又会折寿了。。。