zoukankan      html  css  js  c++  java
  • 细数百度小程序踩的坑

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

    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,小程序开启web化功能

    现在落地页(即打开小程序第一眼看到的页面)如果是web-view嵌套的页面,也能配置swan.setPageInfo。而且能通过审核。不清楚是不是改了审核的条件,反正以前是不能审核通过的。swan.setPageInfo只能用于开启web化功能。为什么要配置这个?因为在百度app中,小程序无法被爬虫感知。所以需要配置,这样才能被搜索引擎抓取收录。

    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也有可能会出现某些小问题。。。也有可能会导致出现一个页面,出现两个相同body内容的情况

    18. getSwanId

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

    19. css单位

    css单位基本都支持,不过如果是rpx这种,小程序会自动转换成vw或者vh,所以你会看到控制台里的单位都是vw或者vh

    20. getStorage

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

    21. 分享到贴吧

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

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

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

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

    新增:

    22. swan.getSystemInfoSync().host 一直显示为undefined,不管是真机还是开发者工具都不行

    官方已经回复这个问题,说是:安卓最新版11.10可以获取到的,但是11.10以下的就不行,应该是双端diff。后面会修复

    23. 部分iOS客户端可能出现,setInterval 只执行一次的bug

    问题的源头:点这里 

    24. 控制台答应出来的内容显示的行号和正常console.log打印的行号位置对不上

    官方回复:生成的sourceMap指向的源文件是经过babel转换后的资源,所以会存在行号对不上的情况,我们会后续修复,感谢反馈

    25. 页面用es5开发,项目信息里勾选掉 ES6 转 ES5会报错

    原因不清楚,解决办法就是不要管它,让它一直勾选就行了。。。。。。

    26. 使用2.4.1发布小程序之后,在开发者后台的体验二维码显示的内容和发布的内容不一致。

    这个bug真的是害人,浪费了很多时间。具体是怎么产生的不太清楚,我各种清除缓存,各种删除再预览还是这样,扫描本地的就是正常的,就是刚发布上线的体验版就不一样。。。。。。官方让我刷新页面再看二维码??????你在逗我??????

    最后把开发者工具换成2.4.0 再发布就没问题。。。。。。所以到现在开发者工具都已经2.4.3了,我都还不敢更新。。。。。。

    27.  远程调试打开之后显示404

    解决办法: 首先,百度App 客户端的登录用户和开发者工具的登录用户是当前 appid(智能小程序ID)的开发者。然后,保证在同一网段即处在同一局域网中。如果满足这两个条件,还是404页面,那么就关闭控制面板中的防火墙。一般这个时候就没问题,能自动显示远程调试的控制台了。

  • 相关阅读:
    prototype.js超强的javascript类库
    MySQL Server Architecture
    Know more about RBA redo block address
    MySQL无处不在
    利用Oracle Enterprise Manager Cloud Control 12c创建DataGuard Standby
    LAMP Stack
    9i中DG remote archive可能导致Primary Database挂起
    Oracle数据库升级与补丁
    Oracle为何会发生归档日志archivelog大小远小于联机重做日志online redo log size的情况?
    Oracle Ksplice如何工作?How does Ksplice work?
  • 原文地址:https://www.cnblogs.com/zjjDaily/p/10984696.html
Copyright © 2011-2022 走看看