评论

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

一个普普通通的大二学生 · 一个初入小程序大门的菜鸟开发者 · 一个有所追求与坚持的奋斗者 初试牛刀,参加了2019中国高校计算机大赛·微信小程序应用开发赛

一、初窥门径

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

二、出师未捷

石楠轩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 一行一行的摹,如此,一开始虽更费劲,但效果显著。

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

最后一次编辑于  2019-06-28  
点赞 6
收藏
评论

8 个评论

  • 陈式坚
    陈式坚
    2019-06-06

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

    2019-06-06
    赞同 4
    回复 2
    • x_Qiang
      x_Qiang
      2019-06-06

      挺可爱的??哈哈哈,作者怎么想🙃

      2019-06-06
      回复
    • 在所不辞
      在所不辞
      2019-06-07

      (哭笑不得

      2019-06-07
      回复
  • Cookie
    Cookie
    2019-06-28

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

    2019-06-28
    赞同 1
    回复 1
    • 在所不辞
      在所不辞
      2019-07-01

      嘻嘻,谢谢师兄

      2019-07-01
      回复
  • Fawkes
    Fawkes
    2019-06-07

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

    2019-06-07
    赞同 1
    回复 1
    • 在所不辞
      在所不辞
      2019-06-07

      是的

      2019-06-07
      回复
  • 执掌好运权柄
    执掌好运权柄
    2019-07-02

    666666666666666666666666

    2019-07-02
    赞同
    回复 1
    • 在所不辞
      在所不辞
      2019-07-13
      老哥,稳!
      2019-07-13
      回复
  • HYK
    HYK
    2019-06-09

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

    2019-06-09
    赞同
    回复
  • さよ
    さよ
    2019-06-06

    我说我怎么搜索不到

    2019-06-06
    赞同
    回复 1
    • 在所不辞
      在所不辞
      2019-06-07

      目前只有体验版哈,还没上线呢

      2019-06-07
      回复
  • 杨泉
    杨泉
    2019-06-06



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


    最后怎么过审的??

    2019-06-06
    赞同
    回复 3
    • 小程序技术专员-拉风
      小程序技术专员-拉风
      2019-06-06

      小程序比赛不需要发布作品,可以体验版参赛。

      2019-06-06
      回复
    • 杨泉
      杨泉
      2019-06-10

      哈哈哈,如此如此。。。

      2019-06-10
      回复
    • 杨泉
      杨泉
      2019-06-10回复小程序技术专员-拉风

      如此如此

      2019-06-10
      回复
  • 崔勃
    崔勃
    2019-06-06

    转专业成功,真好

    2019-06-06
    赞同
    回复 1
    • 在所不辞
      在所不辞
      2019-06-07

      运气好,侥幸过了

      2019-06-07
      回复
登录 后发表内容