开始动手,做一个wordpress小程序:开发过程中,我踩的坑

开发过程中,我踩的坑
这个章节主要记录在开发过程中的一些坑,以及我所采用的解决方案。
1. Tab Bar 的图片问题
小程序官方宣称支持 SVG 图片,但 tab bar 并不支持 SVG 图片。
官方推荐采用 81 px × 81 px 尺寸的 PNG 图片,但这个依然有点坑。
建议在设计 icon 的时候,为 tab bar 的图标稍微留点透明的 padding,不然,图标在真机上会放得很大。
2. 图片防盗链的 referer 设置
如果你托管图片的服务器有防盗链处理,那么得将 servicewechat.com 放入白名单中。记得,这个白名单不是 qq.com
3. image 组件的绝对路径,必须以 HTTPS 开头
image 组件的 src 绝对路径,在 web 开发中是允许类似 //example.com/pic.png 这种省略协议名的存在。
这种图片路径,在微信 web 开发者工具也能正常显示。但是,在真机上就不能正常加载了。在真机上必须是 HTTPS 开头的绝对路径。

服务端数据侧不好处理的话,可以通过下面的函数处理:

《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》

4. 开发者工具的小程序 UA 与实际 UA 不同
开发工具中模拟的小程序 UA 类似这样:

《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》

而通过 Nginx 的 log,我们可以知道,真机运行的 UA 其实就是微信的 UA:

《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》

某些情况下需要注意这些不同。
5. 默认的 Flex 布局
如果你是在官方例子的代码基础上开发你的小程序的,建议先删掉 app.wxss 的 Flex 布局相关代码。这样做,会降低你遇到奇葩样式问题的概率。
6. wxParse 的坑
小程序使用到的富文本转化是用 wxParse 这个第三方库,用的时候发现有不少坑(但目前是这个库最为实用了)。
其中一个,就是全局的 code 字符都被替换为 wx-codexxx,作者本意应该是对 code 标签进行这个替换,但可能一不小心写错了。
解决方案,只能是暂时删掉那段代码。
另外,使用 wxParse 的时候,image 组件中的 src 属性,会多解析出一个逗号。
看图说话:
《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》

上图也很好解释了上面的 referer 坑与图片路径 HTTPS 开头的坑。解决方案,只能先改动源码(html2json.js)来修复:

《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》

关于富文本,好消息是,官方的富文本组件已经发布。
关注「知晓程序」微信公众号,在微信后台回复「富文本」,查看小程序富文本组件新能力解读。
最后的话
至此,我也算是详略得当地,介绍了开发 WordPress 版小程序的过程。接下来的工作,自然是提交到官方并耐心等待审核结果的通知。
整个开发过程其实并不太有难度,如果之前有使用过 Angular、Vue 这类 MVVM 框架,整个开发过程基本上只是看官方文档的问题。
《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》
「DeveWork 极客」小程序使用链接

https://minapp.com/miniapp/3016/
原文地址:https://devework.com/wordpress-rest-api-weixin-weapp.html
关注「知晓程序」公众号,在微信后台回复「开发」,获取小程序开发技巧精选文章。
《开始动手,做一个wordpress小程序:开发过程中,我踩的坑》

▽ 点击「阅读原文」,发现更多优质小程序

点赞

发表评论