开发 | 我的小程序开发「踩坑血泪史」

文 | 沈锐

高晓松说,人生不止眼前的苟且,还有诗和远方。

我说,码农的世界不止 0 和 1,还有红黄蓝。

大概就是这样的一种信念,催生了我的微信小程序 ——「码农也涂鸦之 dA 版」吧。

不同于其他的一些实用性娱乐性很强的小程序,我的这款小程序更像是一种「私人定制」,因为它唯一功能,就是用来方便大家浏览我在 deviantArt 上的 CG 作品。

下面,我来回顾一下,在这个小程序开发过程中所「踩」的坑,以及一些点滴的心得体会。

希望今天我在知晓程序(微信号 zxcx0101)分享的这篇文章,会对大家有所帮助。

关注「知晓程序」公众号,在微信后台回复「开发」,获取小程序开发技巧文章精选。

开发环境

对于我来说,首当其冲的「大坑」,是开发环境。因为,微信小程序开发工具仅支持 Windows 和 macOS 系统,但我的日常操作系统是 Linux。

起初在网上找到的方法,是虚拟机加 Samba 共享,但是这种方法不仅使用麻烦、浪费资源,而且预览的样式也无法完全准确。

之后,我在 GitHub 上找到了一个微信 web 开发者工具的移植,能够真正在 Linux 下开发了。可惜,好景不长,随着小程序组件的一次更新,移植版出现了奇怪的错误。

提交 issue 两天后无人理睬的情况下(怀疑该作者已弃坑),我不得不开始搜索其他可替代方案。幸好,发现另一个移植版是可以用的。

评论功能

显示评论的功能,是在小程序第二次更新时加的。起初,没觉得是个难事,后来发现不太对——deviantArt 的 API 返回的评论内容是 HTML,但小程序无法直接解析它。

通过一番搜索,我找到了 wxParse 框架。使用过后,发现评论里的图片长宽有问题,透明图片的背景居都是白色。

好吧,我只能将它 fork 下来,然后读源代码、查原因、改代码、提交 PR,问题终于解决了。评论区效果如下图。

虽然有些艰难,但这个过程不也正好体现了开源的好处吗?:D

底部标签栏

我将小程序第一个版本形容成是在「裸奔」,因为它没有底部标签栏。

在第二个版本中,我决定为小程序添加自实现的底部标签栏。经过了日夜奋战, 我哼哧哼哧地把它实现了,觉得还挺顺畅的。

测试的时候,发现点了五次就不能点了,我不得不再次查阅资料。结果发现,底部标签栏居然是微信小程序提供的一个功能组件!噗…… 一口鲜血就喷了出来!

好吧,这是一个经验教训,下次开始前,一定要熟悉官方文档,要好好做功课。

关注「知晓程序」微信公众号,回复「解读」,获取小程序官方文档最全解读文章。

这里想顺便谈谈小程序的模板,因为实现底部标签栏大量用到了模板功能。

小程序中的模板功能是用来定义可重用组件的。这功能还不错,但有一点:模板的事件函数,必须定义在调用它的页面对象上(即便这个事件是只局限于模板内部的)。

正因如此,我现在不得不在每个页面的 onLoad 函数开头,将模板里需要的函数都运行一遍。

随着小程序的不断改进,我相信这个问题会得到解决。

图片下载

原本我想在小程序添加的,是把图片下载到用户指定的本地目录的功能。

查看了每个作品的图片链接,发现每张图片的子域名都不同。小程序的下载服务器域名是要提前设置的,这么多的子域名怎么设置?这事困扰了几天。

突然有一天,我想,deviantArt 这么做该不会只是为了「分流」吧?试了试,果然如此。于是我加了段逻辑,用来替换子域名为同一个子域名,问题解决了。

接着,我就顺着文档,开始写下载功能。我调用了小程序 saveFile API,小程序提示文件下载成功了,但是却没有在系统中找到。文件下载到哪儿去了呢?

后来我才知道,原来小程序是把文件保存到它自己的一个「秘密目录」,并且提供了 API,可以加载这个「秘密目录」的文件,这跟我想的「下载」,完全不是一回事啊。

说到这个问题,想到小程序的另一个限制:小程序内无法打开外部链接。本来想让用户可以用外部浏览器直接打开图片,这下也没辙了。

关于这些限制,后来在微信小程序的社区也见到有人吐槽,希望以后能够改进吧。

写在最后

回顾整个开发过程,挺折腾的。这个期间,我碰到了很多问题,也解决了很多问题。不过,最后看到自己的小程序发布的那一刻,还是挺兴奋的。

微信小程序的出现的确大大降低了手机应用的开发门槛。我希望,每个开发者都可以来试试开发微信小程序,体验一下小程序开发的乐趣。

原文地址: http://mp.weixin.qq.com/s/eoIrZceJXvR_y5k0Usz65g

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2017-08-08

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web前端教室

[一对一讲什么] 之 测完了接口、搞好了目录,然后做啥?

接 [一对一讲什么] 之 切图之后做啥?要加入项目和测试接口 上回书说,切完了页面,把HTML文件啊,CSS,JS,IMG图片什么都扔到相应的开发环境目录里,把...

22680
来自专栏编程微刊

小程序新方法 open-type获取头像昵称

小程序自上线以来,官方一直在调整API,因此也出现了一批被废弃的接口,作为程序员的我们,此时此刻千万不能为这不断的变化而感到头疼,应当与时俱进,不断的更新自己的...

47820
来自专栏极乐技术社区

小灯灯实战系列《三》微信小程序:仿今日头条(下)

接着上一篇  上一篇文章中,我们已经完成了头条的新闻列表、新闻详情功能了,但是还存在一些值得优化的地方,以及评论功能没有加上。  欢迎Star Github开源...

35660
来自专栏企鹅号快讯

四大微信小程序开发工具测评结果出炉!

微信小程序开放公测后,很多人已经迫不及待地开始注册账号了。但是在技术开发的问题上,却不知道该如何下手。经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛...

1.8K70
来自专栏liuchengxu

用 Vim 写 Python 的最佳实践

对于一些 Python 的小项目,使用 vim 是一个不错的选择。本文内容整理自我在知乎的回答 用 用 Vim 写 Python 的最佳实践是什么?,下面的内容...

25420
来自专栏小白课代表

跨越距离,一键远控——向日葵远程控制

59640
来自专栏非著名程序员

强烈推荐:一个非常棒的开源库

今天给大家推荐的一个开源库是大家可能会经常遇到的,可能以后会常常用到的一个开源库。

11620
来自专栏QQ会员技术团队的专栏

QQ 会员基于 hybrid 的高质量 H5 架构实践

本文为 SDCC 2016(杭州站)的分享实录,介绍 QQ 会员的前端开发团队在手 Q 的 hybrid 模式下对 H5 页面的性能优化、组件化和持续集成方面的...

61700
来自专栏京东技术

30分钟精通快应用

来这里找志同道合的小伙伴! 阅读全文大约需要10分钟,动手实践大约需要30分钟。 ? 徐建勇 京东Android开发工程师 京东JDReact多端融合平台组 ...

45890
来自专栏人称T客

五款 Slack 开源替代品

所有好用的洋SaaS都有一个致命的缺点:GFW。对于Slack这样的团队协作明星产品来说,一旦套牢退市对于企业的开发团队来说无疑是巨大的风险。况且,Slack并...

99940

扫码关注云+社区

领取腾讯云代金券