百度小程序开发实战--踩坑经历
<ol><li>
<p> 文章列表rich-text的图片宽度问题<br> 效果如下<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img src="http://wiki.baidu.com/download/thumbnails/692377852/image2019-2-11_19-40-27.png?version=1&modificationDate=1549885227000&api=v2"><br> 后端返回的数据格式为string，小程序对次采用了rich-text来识别传入的html<br> rich-text推荐使用node的数组模式，字符串模式会影响解析速度（因为最终还是会转换为数组类型），但是后端返回的为string格式，是由后台编辑器传入的。<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-11_19-42-19.png?version=1&modificationDate=1549885339000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692377860" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-11_19-42-19.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/thumbnails/692377852/image2019-2-11_19-42-19.png?version=1&modificationDate=1549885339000&api=v2"><br> 这就导致了无法操作css中 rich-text 里边的图片样式。<br> 解决方法：<br> 1. php端，在返回时修改返回的string<br><span class="hljs-meta">$<span class="bash">info[<span class="hljs-string">'contents'] = str_replace(<span class="hljs-string">"<img ", <span class="hljs-string">"<img style='max-width:100%;height:auto;'", <span class="hljs-variable">$info[<span class="hljs-string">'contents']);</span></span></span></span></span></span></span></span></span></p>
<p> 2. 在js中处理返回的数据，但是增加了处理成本（采用此解决方案）<br>that.setData({ contents: res.data.contents.replace(<span class="hljs-regexp">/\<img/gi, <span class="hljs-string">'<img style="max-width:100%;height:auto"') })</span></span></p>
</li>
<li>
<p>关于跳转外部页面的处理</p>
<p>百度小程序给出了web-view这个标签来跳转外部的链接，但是web-view是自动打开新的页面，无法做到点击某个图片或者button，跳转打开新的页面</p>
<p>由于小程序所有的跳转都是通过navigateTo这个对象来进行跳转的，但是这个对象只能跳转小程序内的page页面或者其他的百度小程序</p>
<p>所以解决方案是，写一个page做一个web-view的承载页</p>
<p> <span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image lazyload" alt="" data-image-src="/download/attachments/692377852/image2019-2-12_15-33-55.png?version=1&modificationDate=1549956835000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692382399" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-12_15-33-55.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-12_15-33-55.png?version=1&modificationDate=1549956835000&api=v2"></span></p>
<p> <span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image lazyload" alt="" data-image-src="/download/attachments/692377852/image2019-2-12_15-34-24.png?version=1&modificationDate=1549956864000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692382405" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-12_15-34-24.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-12_15-34-24.png?version=1&modificationDate=1549956864000&api=v2"></span></p>
<p> 而在调用页，使用一个bindtap的方法执行page的切换，同时把要跳转的url传递过去</p>
<p> <span class="confluence-embedded-file-wrapper"><img class="confluence-embedded-image lazyload" alt="" data-image-src="/download/attachments/692377852/image2019-2-12_15-36-5.png?version=1&modificationDate=1549956965000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692382427" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-12_15-36-5.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-12_15-36-5.png?version=1&modificationDate=1549956965000&api=v2"></span></p>
<p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="57" data-image-src="/download/attachments/692377852/image2019-2-12_15-36-37.png?version=1&modificationDate=1549956997000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692382434" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-12_15-36-37.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-12_15-36-37.png?version=1&modificationDate=1549956997000&api=v2"><br></span></p>
</li>
<li>
<p>还是web-view的问题，直接写src的http链接是可以带参数的，但是通过调用中间页url的参数会报错,原因是传参会解析url 问号后边的参数，解决方法是先encodeURLComponent 一下</p>
<p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-12_19-12-6.png?version=1&modificationDate=1549969926000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692384352" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-12_19-12-6.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-12_19-12-6.png?version=1&modificationDate=1549969926000&api=v2"></span></p>
<p><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="136" data-image-src="/download/attachments/692377852/image2019-2-12_19-14-10.png?version=1&modificationDate=1549970050000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="692384367" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-12_19-14-10.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-12_19-14-10.png?version=1&modificationDate=1549970050000&api=v2"></span></p>
</li>
<li>关于外部字体的引入<br>视觉中有关于特殊字体的引入<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-14_12-57-15.png?version=1&modificationDate=1550120235000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="693653466" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-14_12-57-15.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-14_12-57-15.png?version=1&modificationDate=1550120235000&api=v2"><br>在小程序新建了一个样式表专门引入，但是踩的坑是，具体到组件的css引入后无效(page中是生效的)，最好在最外层的app.css中引入<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail lazyload" alt="" height="95" data-image-src="/download/attachments/692377852/image2019-2-14_12-57-36.png?version=1&modificationDate=1550120256000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="693653470" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-14_12-57-36.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/thumbnails/692377852/image2019-2-14_12-57-36.png?version=1&modificationDate=1550120256000&api=v2"></span></span></li>
<li>标签支持较少 只能限制使用view template button text等几个 ul li 等都不支持使用</li>
<li>不支持根据数据动态引入template 如<template is="template-{{id}}"></template><br>解决方案： 根据block 判断加载不同的template <code><block s-if="{{ id == 1}}"><template is="template-1" data="{{{...detail}}}" /></block></code></li>
<li><code>button 等标签自带默认样式</code><br><code> 需要在css文件中覆盖 最好写一个reset的重置样式表将button等需要自定义的标签重置掉</code><br><code> <span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="118" data-image-src="/download/attachments/692377852/image2019-2-15_17-26-48.png?version=1&modificationDate=1550222808000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="696043170" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-15_17-26-48.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-15_17-26-48.png?version=1&modificationDate=1550222808000&api=v2"></span></code></li>
<li><code>rich-text 遇到不识别的标签会停止渲染，并且不报错</code><br> rich-text 仅支持常规的标签 在联调中后端返回了一个无法识别的link标签<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-21_20-18-38.png?version=1&modificationDate=1550751518000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="699353979" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-21_20-18-38.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-21_20-18-38.png?version=1&modificationDate=1550751518000&api=v2"><br><code><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-21_20-16-50.png?version=1&modificationDate=1550751410000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="699353936" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-21_20-16-50.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-21_20-16-50.png?version=1&modificationDate=1550751410000&api=v2"><br></span></code><br>导致页面无法渲染，关键是不报错<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image confluence-thumbnail lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-21_20-19-22.png?version=1&modificationDate=1550751563000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="699354002" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-21_20-19-22.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/thumbnails/692377852/image2019-2-21_20-19-22.png?version=1&modificationDate=1550751563000&api=v2"><br><br>解决方法（个人想法）：前端或者后端对不支持的标签进行过滤，小程序可以添加一个过滤器，对返回的字符串进行检验（有一个大胆的想法，可以写一个loader插件专门来过滤这些文章）</span></span></li>
<li>异步接口返回到渲染有时间延迟，可以加一个中间的过度页面</li>
<li>关于自定义导航栏没有返回按钮<br>视觉希望的效果是这样，也就是页面的元素顶到导航栏的下边，同时导航栏是透明的，这样页面看起来更漂亮一些<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img alt="" data-src="https://img2018.cnblogs.com/blog/1180321/201905/1180321-20190531154523315-1012093127.png"><br></span></span></span><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><br>百度小程序提供了自定义导航栏的功能，通过配置页面的 XXX.json的 navigationStyle属性为custom,开启自定义模式<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-26_17-47-0.png?version=1&modificationDate=1551174420000&api=v2"></span></span></span>
<p><br>开启后发现导航栏是透明了，视频页顶头了，但是没有了返回按钮（令人窒息），所以只能自己写一个。<br>悬浮在video等原生组件的上层只能使用cover-view或者cover-image标签<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="150" data-image-src="/download/attachments/692377852/image2019-2-26_17-50-36.png?version=1&modificationDate=1551174636000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="704006038" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-26_17-50-36.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-26_17-50-36.png?version=1&modificationDate=1551174636000&api=v2">这些都不是多么复杂，我把自定义的导航栏写为一个公共组件，fixed定位到页面的左上角，令人窒息的事情又出现了，在cover-view上绑定的bindtap的点击事件不生效<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="72" data-image-src="/download/attachments/692377852/image2019-2-26_17-52-31.png?version=1&modificationDate=1551174751000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="704006088" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-26_17-52-31.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-26_17-52-31.png?version=1&modificationDate=1551174751000&api=v2">之前在其他的地方也使用过这个标签，绑定事件也没问题，问题只可能出现在样式上,调试了css代码后，发现定位只要移除导航栏区域点击事件就可以生效，百度开发者工具的模拟器上确实是这个样子。<br>之后又真机调试后发现可以，即使在导航栏区域点击也是生效的<br>总结：这应该算是开发者工具模拟器的一个bug，如果真发现不了代码的问题，建议真机调试 ，开发者工具的模拟并不完全可信</span></span></p>
<p> </p>
</li>
<li>小程序跳转小程序<br>这算是小程序向站外跳转的第二种，也就是除了跳第三方H5页面，这次是跳其他的小程序，针对跳其他的小程序，百度小程序给了自己的api<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-27_16-15-56.png?version=1&modificationDate=1551255356000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="703456338" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-27_16-15-56.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-27_16-15-56.png?version=1&modificationDate=1551255356000&api=v2"><br>同时也有返回上一个小程序的api<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-27_16-17-10.png?version=1&modificationDate=1551255430000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="703456345" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-27_16-17-10.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-27_16-17-10.png?version=1&modificationDate=1551255430000&api=v2"><br>具体的写法，是在util的工具类中封装了一个公共的方法，方便所有的地方调用<br><span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="250" data-image-src="/download/attachments/692377852/image2019-2-27_16-17-41.png?version=1&modificationDate=1551255461000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="703456351" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-2-27_16-17-41.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-2-27_16-17-41.png?version=1&modificationDate=1551255461000&api=v2"></span></span></span></li>
</ol>
<div>13. 自定义导航栏+自定义返回按钮+video原生组件 在ios和安卓下的不同表现</div>
<p><img alt="" width="645" height="204" data-src="https://img2018.cnblogs.com/blog/1180321/201905/1180321-20190531154605050-1068156031.png"></p>
<p> 视觉是需要视频类的顶头，所以需要设置当前页的nav的属性为custom</p>
<p> 但是新的问题又来了，设置为custom后需要自定义返回按钮，而且这个按钮还必须要加在video组件上边，所以只能在video组件中使用cover-view</p>
<p> 在真机测试前都是正常的，模拟器也是正常的显示，但是实际机器测试时发现 ios可以正常显示，并且可以正常返回，但是在安卓上，进入页面后，左上角的返回按钮会逐渐消失，相当于是被视频组件遮挡了</p>
<p> 还有就是 在安卓下 视频全屏播放，返回按钮就会出现，直接从全屏返回会直接返回首页，而不是返回当前列表页面，点击自带的返回按钮返回到列表，安卓下的返回按钮又出现了，并且可以正常点击。</p>
<p> 个人猜测，1是cover+view+自定义导航栏+原生video标签导致层级问题，也尝试调过层级，但是不生效。</p>
<p> 个人猜测，原生组件的层级是1，cover-view的层级可能就是2，但是导航栏区域的层级其实才是全局最高的可能是3，而自己加了的cover-view刚好就在这之间，所以失效了</p>
<p> 目前已经提bug给百度小程序开发组</p>
<p>13 还是rich-text组件，目前总结下遇到的问题</p>
<p> 13.1 返回rich-text无法识别的标签 整个页面停止渲染（这个也只能靠前端发现一个替换一个，比如遇到的section标签，统一替换成p，但是有些自定义的标签，比如说一些表情，目前 无法替换）</p>
<p> 13.2 第三方抓取的标签不完整，比如缺少了一个</p>也是无法渲染的（这个只能发现一篇，下线一篇，目前没有什么好的方法）</p>
<p> 13.3 空的标签是占位置的，这个前端replace把所有的空的html标签都切掉<span class="confluence-embedded-file-wrapper confluence-embedded-manual-size"><img class="confluence-embedded-image lazyload" alt="" height="30" data-image-src="/download/attachments/692377852/image2019-3-5_19-22-57.png?version=1&modificationDate=1551784977000&api=v2" data-unresolved-comment-count="0" data-linked-resource-id="708358599" data-linked-resource-version="1" data-linked-resource-type="attachment" data-linked-resource-default-alias="image2019-3-5_19-22-57.png" data-base-url="http://wiki.baidu.com" data-linked-resource-content-type="image/png" data-linked-resource-container-id="692377852" data-linked-resource-container-version="21" data-src="http://wiki.baidu.com/download/attachments/692377852/image2019-3-5_19-22-57.png?version=1&modificationDate=1551784977000&api=v2"></span></p>
</div>
<div id="MySignature" role="contentinfo">
吾生有涯 而知也无涯矣<br><br>
来源：https://www.cnblogs.com/Sherlock09/p/10955598.html
頁:
[1]