小程序开发 · 一个大二学生的成长之旅 - WXOPEN Club

一、初窥门径

大一那年，懵懵懂懂的入学，每天上课学习，下课游戏，奔波于各式活动之内，游走于各大社团之中。直到那天，看到了首届高校微信小程序应用开发赛，心头一动，点滴想法悄然酝酿而生。

二、出师未捷

石楠轩606宿舍内，几个大小伙子讨论得热火朝天：
“我觉得可以，现在学校内还没有这样的小程序，如果做好了，肯定能迅速占领市场。”
“没错，而且我们还能借着比赛的机会学一学小程序开发，有利无害呀”
… …
当晚我们便着手报名，名曰“南柘”，将楠字左边的木嫁接到石字上，隐喻我们住在石楠。
然后…
就没有然后了…
稚嫩的我们终究没有坚持完比赛，甚至连个像样的模块都没搭建出来。
当时我们都是小白，不懂html、不懂js，更别提后台了。比赛开始后，我找了微信小程序的教学视频来看，发现讲得太泛，并不适合我这种初学者。我迫切需要的是手把手的教学视频或书籍，然而，当时自身底子太薄，学起来很慢，而队友们则忙于他事，连教学视频都没看过几眼。
自然而然的，我们默认了失败，这场尚未开战便宣告失败的战役，仿若一根耻辱柱，时时刻刻提醒我，梦开始的地方，不是做梦开始的地方。

三、沉淀

大一下学期，我成功转专业到计算机学院，开始恶补相关知识；
大二上学期，学了数据结构、算法、数据库，还写了个APP；
虽然囫囵吞枣，但也力求搞懂重点，尤其经典的算法。
随后机缘巧合下接触了Django后端开发，感谢这次开发经历，我对于前后端交互有了一个直观的感觉。第二届小程序开赛前，小程序开发于我而言不再是一个遥不可及的梦。

四、再战

去年一个队伍三个人，今年有些变化，一个队伍可以四个人，得益于此，我再次面对小程序比赛。好友薯饼邀请我加入他的队伍，已经有一个后端，一个UI；后来经过讨论，我和薯饼一起担任前端开发。

任何成果的取得，都不是轻而易举的。

1. 前期准备

我们开始讨论要做什么小程序，脑暴，调研，跟已有的校内小程序对比分析，最终我们决定了我们的作品 —— WritByU（writ 取自古英语，并非 write 的错别字）

WritByU 是针对校园用户进行信息分享传播和问答的一个小社区，用户既可以以文字、图片的形式实现信息的即时分享和传播互动，也可以围绕某一话题进行提问、答疑以及讨论。

甚至于，我还用PPT做了简单的界面，现在想想确实好笑。

随后便是确定技术路线，几经周转，也找到了一个高颜值的开源UI库：ColorUi，虽然没有文档用起来稍有不适，只能翻看源码使用。

2. 爆肝开发

前期开发并不顺畅，毕竟万事开头难，一开始使用 ColorUi 就遇到了不少问题，因为没有文档，之前也没使用过 Component，为了解决问题，我找到了 ColorUi 的开发者，进行了交流群，虽然没有直接解决我的问题，但看群里大佬的交流却给我提供了不少思路，受益匪浅。

此外，前期开发也比较容易拖沓，心里总想着不急，还有时间，（这为我们后面的通宵爆肝埋下了伏笔）有时间也是慢悠悠的写，或者把时间分配给了其他事情。

一些技术难点：(对于初学者来说想实现这样的小功能并不容易，但是耐下性子多看看别人的源码就可以解决。)
【富文本编辑器】
一开始写这个小程序的时候还没有出 editor，当时想着实在找不到可用的组件就手撸吧，结果还真的没找到（捂脸）。
最后勉强实现了图文混排，当然远不如现在的editor强大，结果富文本编辑器做得差不多的时候 editor发布了（求心理阴影面积）
当然愉快的尝鲜，结果发现 editor 的文档，也太简陋了吧，无奈之下翻看源码，折腾了半天总算搞定初始化、获取内容、更新内容等方法。

编辑框如下图，上方是 editor 强大的控件板，我们保留了一部分常用的功能，下方加入了插入封面和标题（input），分享内容则使用了 editor 。

【瀑布流】
广场页面为了实现瀑布流，我上网找了不少例程和方法，无奈没有可以直接用的轮子，理清了demo的思路就自己操刀开始干。

渲染层：使用 leftData 和 rightData，分左右两边渲染。

逻辑层：

本markdown编辑框的代码解析似乎出了点问题，输入左箭头会变成 &lt，如下所示，因此这里还是截图。

for (let index = 0; index < array.length; index++)

中期开发过程则比较艰辛，有段时间课内作业很多，大家都在今天赶这个实验报告，明天赶那个实验报告，大家很难凑在一起开发，童心，我们的后台小伙伴只好自行吭哧吭哧写接口，后续也因为一些逻辑没有提前沟通好修改了不少接口。

我们的API文档：

3. 提交作品

5.30晚，BUG基本都改完了，队友们也在进一步完善文档，凌晨四点多，我给小程序的使用方法录屏后，开始配音，剪辑视频，果然也是个技术活，几个小时后，终于捣鼓完了，不禁松了口气。打包代码、上传体验版，提交作品，这一阶段结束。几个人吃了个早餐上课的准备上课，我则回宿舍安心睡会觉。

五、给初学者的技术建议

掌握基础知识：html、css、JavaScript，写几个小页面快速上手
看微信小程序的API文档，setData、bindtap，了解数据渲染、方法绑定；
了解 ajax 请求，找懂后端的师兄师姐或者同学开个简单的get请求接口给你练习（当然自己开个后端服务就更好了，比如Django什么的，上手方便，也可以用小程序云开发功能），然后自己阅读微信小程序API文档，试着使用wx.request。
此时已经基本掌握写一个单页面小程序的能力了，紧接着可以找一些开源的UI库，美化自己的界面，了解小程序页面、组件的生命周期找一些demo进心学习。

书法学习有临与摹，临，是照着原作写；摹，是用薄纸蒙在原作上面写。写代码也一样给，建议掌握必要的基础知识后，通读 demo 源码，了解大概思路，然后自行临写，而非对着别人的 demo 一行一行的摹，如此，一开始虽更费劲，但效果显著。