您的位置 首页 技术专栏

百度小程序开发遇到的那些坑及避坑方法!

相比微信小程序,百度小程序发展要稍晚一些,很多功能还未完善,开发起来坑也是不少,但是春哥团队技术虎子认为任何一个事物发展都妖经历一个过程,相信百度小程序依靠百度强大的技术及流量支撑…

相比微信小程序,百度小程序发展要稍晚一些,很多功能还未完善,开发起来坑也是不少,但是春哥团队技术虎子认为任何一个事物发展都妖经历一个过程,相信百度小程序依靠百度强大的技术及流量支撑会越来越好,下面就讲讲在开发百度小程序中遇到的坑与相关的经验。

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. 分享到贴吧

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

在代码中配置好,并且上线小程序后,我以为这样就能申请分享白名单了…….然而,按钮竟然没给我激活,点不动。

上面这些是真实遇到的情况,还在断探索中,欢迎大家一起吐槽、分享更多!

本文来自网络,不代表24小时课堂在线立场,转载请注明出处:https://www.24ketang.cn/41385.html

为您推荐

返回顶部