如何从零开始构建一个小程序?

事故背景

前几天老师给我们布置了一个团队任务,即三人组队来完成腾讯2021LIGHT公益创新挑战赛的比赛,可是我们上学期只学过JavaWeb的开发,仅仅算是前端三大件的入门水平,完成最基础的增删改查,从来没有接触过如何开发微信小程序,这真是一件令人头大的事情。

为此,我不得不查阅了很多资料,大概上弄清楚了如何入门开发小程序以及如何进一步学习。

开发方式

当我们开发项目时,选择开发语言与开发方式是重要的,就像开发一个JavaWeb的增删改查,使用最基础的jsp+servlet+tomcat开发时非常麻烦的,有时我们不得不要写一些重复许多的代码,降低了开发的效率,随着SSM框架的出现及流行,简单的增删改查只需要注重业务逻辑即可,完全不需要那些多余的工作,随后发展的SpringBoot以及SpringCloud更是极大地减小了程序员的工作量。

故当我们开发微信小程序时,也会有原生以及框架的开发方式之分,一下列举几种比较流行的方式(都以开发微信小程序举例):

  1. 原生开发——直接下载官方的开发者工具,参照官方提供的文档、视频教程和语法。

    优点:上手相对容易,开发语法与api均能在文档中查到;出问题更容易定位和解决。

    缺点:代码量大、组件少、语法不灵活、开发效率很低,且不同小程序平台语法不同。

  2. 框架开发——各种界面库与框架。

    界面库如如腾讯的weui、有赞的vantUI。直接按照文档学习、引入文件,选择自己需要的组件,搬运代码即可。

    框架如腾讯的wepy、uniapp、美团mpvue均可使用类似前端vue开发框架的语法。

    而熟悉react的同学,可尝试阿里的remax,京东的taro。

    优点:使用代码更少甚至是直接使用现成的代码,采用前端编程语法和框架,提高了开发效率与代码的可维护性,使得代码更简洁。

    缺点:问题的排查成本高;框架有bug或无法支持的功能时,就很被动。

  3. 跨端开发(最主流)——在多个平台同步发布一个小程序。

    跨端开发框架使得写一套代码即可自动生成支持多个平台的小程序和h5页面。

    如uniapp(语法简单、组件库和插件丰富、生态好,受新手与vue开发者喜爱)、remax、taro(受react开发者喜爱)和chameleon均支持,部分还支持条件编辑(针对不同平台编写特殊逻辑)。

由于框架开发学习成本比较低,所以我选择使用DCloud的uni-app

开发平台

既然开发方式选择了使用跨平台开发,所以开发平台就选择最受欢迎的HBuilderX

快速入门