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

发布于 6 年前作者 jxu2440 次浏览最后编辑 6 年前来自 share

一、初窥门径

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

二、出师未捷

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

五、给初学者的技术建议

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

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

以上,是个人的一点小建议,如有更好的想法,可以在下方留言哦,欢迎交流~

8 回复
luona
luona1 楼6 年前

我只好奇,应该是个人主体的吧。。。

最后怎么过审的??

cluo
cluo2 楼6 年前

我说我怎么搜索不到

jiaxiulan
jiaxiulan3 楼6 年前

自从我小学以后 已经很久没见过这种作文了 还挺可爱的 哈哈哈哈

jing83
jing834 楼6 年前

能给demo学习嘛,来自一名大二学生

guiying82
guiying825 楼6 年前

666666666666666666666666

dqiu
dqiu6 楼6 年前

“石楠轩”,“梦开始的地方”,深大的?

maoyong
maoyong7 楼6 年前

原来是校友小师弟,加油加油😁

osun
osun8 楼4 年前

转专业成功,真好