weui开发文档_微信小程序云开发挑战赛之体验

前提介绍：

https://cloud.tencent.com/act/event/cloudbase-acccloud.tencent.com

职业赛道，团队2人，均为前端开发一位(我)负责UI+客户端，一位(L)负责云端。

8.25日开始注册小程序，8.26日开始写代码，9.20日提交成果。我是全职，L是兼职。尽管如此，在这个小程序上耗时总共不超过20人·日。L兼职除了三个周末（也并没有全部时间在做该项目），加工作日晚上我偶尔会催他改bug，我全职在图书馆泡了一个星期基本就结束了，后面就是改改bug+UI微调了。

最终效果：

产品没有发布，审核问题。这里牵出一个很有争议性的问题：非经营ICP备案，是需要对域名备案的。我使用云开发的产品，是没有域名的，连IP都没有。你要我拿什么去备案？

看社区有人问了同样的问题，并没有什么建设性解决方案，我决定只好先随便整个域名备案一下吧。关于《非经营性互联网信息服务备案核准》，我使用云开发，没有域名可供备案怎么办？ | 微信开放社区并没有什么建设性解决方案，我决定只好先随便整个域名备案一下吧。

关于《非经营性互联网信息服务备案核准》，我使用云开发，没有域名可供备案怎么办？ | 微信开放社区

小程序交流专区 | 微信开放社区developers.weixin.qq.com

小程序还在审核中，官方表示体验版也可参赛，那就看看截图和视频吧

技术实现

云开发==Nodejs+MongoDB+Server，最后呈现给开发者的都是function——云函数，所以技术实现上毫无深度可讲，我就讲下在没有产品和设计师的前提下，如何简单有效将自己的想法开发出来。

选一个喜欢且实用的UI框架

先不说没有设计师的产品该有多丑，对于一个前端开发而言，没有设计稿的开发，也是无从下手啊……

我开发过4个小程序，分别用了WeUI（微信官方UI）、Vant Weapp（有赞）、Taro UI（京东）、以及现在用的ColorUI。也试用了所有能搜出来的UI框架，总结下来：

第一点，大部分的小程序UI框架都适用于商城，以商城为中心创建的。所以组件很全，但是由于商城需要展示的东西特别多，因而组件都特别小，非常不大方。而且商城的特色是要推广产品，吸引注意力，因而设计上都浓浓的卖货气息，很有压迫感。比如Taro和Vant Weapp。

而我是喜欢Material UI那一挂的，简洁大方、让人感觉舒适轻松（做一个安静的美侣纸）。但是Material UI主要是针对PC端，以及Android移动端。那套UI用在IOS上就特别奇怪，一眼能看出是Android的APP……

以及，我并没有找到可用的MaterialUI风格的小程序UI框架。

而WeUI，用起来很方便，但，真的很难谈得上好看。其实也不丑也能用，奈何现在的应用都太好看，衬托得它实在是不能看。

第二点，我不需要多端适配，想简单点，不想处理兼容问题，希望用纯微信小程序语言编写，不用写React或者Vue代码再进行一道编译生成微信小程序的代码。

最后选择了ColorUI，缺点是组件太少，毕竟是个人开发者，优点是满足以上两点。目前用下来还行，但没达到理想状态，理想状态可能是用antdesign和material-ui的爽。

2. 客户端先行，直接开始画UI

先做功能页，对我的产品而言是「练习」和「测试」。因为你有一个想法，它要实现什么功能，功能是很明确的。而其他如首页、用户页等，都是可以有创造性的设计，有无限种可能。

这两个功能页很简单——万物都是CRUD。列表、表单提交、详情、Reference。但也是耗时最久的，都花在针对这两个功能的文案整理上，将四本心理学的书反反复复的阅读->Copy->整理->Paste，看到我都要吐了。没办法，项目特色导致的，之前做的小程序就没有这个问题。

然后做用户页，用户能拥有的，也只能是产品功能。想到一个方案，开始实施，如果后续有更好的方案再作修改，也只是改改UI。

最后做首页，首页我做了三版。最后那一版也不满意，后续有更好的方案再作修改吧。首页是设计上有最多可能性的页面。也是用户第一眼看到的页面，注定设计开发艰难。。。

3. 客户端接口确定

功能页UI完成之日，就是客户端接口明确之时。列出客户端所需接口，这时服务端可以开始介入开发了。如果是独自开发，也是这样的流程，我之前就是这样的流程。因为UI如果没确定，接口很有可能修改，所以在UI达到满意状态的时候，开始写接口，后面再微调UI。当然后期万一真要大改，那也没办法，在公司上班这种事不也常有，不可避免。

用户页UI确定，新增一批接口。

4. 服务端 Collection创建 + 云函数开发 + 自测

在3中已经说明，两个时机服务端开始开发：1）功能页UI完成；2）用户页UI完成。

关于自测……L偷懒也略过了。好吧，直接联调吧

5. 客户端、服务端联调

由于L用TS写的云函数，有interface，客户端加入调接口的代码还是很easy的，不用翻代码。然后两人坐在一起联调也很快，可能他代码结构写的好吧

6. UI微调、Bugfix

这是持续不断的事情。（但其实我初期完成后发现由于审核问题不能发布，心凉了半截，再也没看过这个小程序。直到20号提交截止日，再改了一版主页……）

7. 文档、视频

随便做做……因为我的目的不是得奖，且这个比赛很明显只是为了推广微信云开发。我是自己想做这样一个小程序，有个比赛会督促我更快更好地完成。正如我虽然热爱跑步，但是如果不报个比赛，我可能永远停留在5K，还一个月就跑那么一次。报个半马你就知道至少要在比赛日子之前，保持跑步频率，至少跑一次15K，多次10K。并不是为了比赛得奖（那也太不可能了），只是为了完赛。

#小程序云开发挑战赛#-自助心理成长-小黑 | 微信开放社区developers.weixin.qq.com