概述

在上一章中，我们讨论了如何绘制原型。小程序原型基本完成。正确的做法应该是同时设计UI。我们这里就跳过，直接开始开发。

因为我不太擅长UI设计，不想把时间浪费在UI设计上。

今天我们就来说一下环境搭建和基本配置。

开发语言我们选择原生开发小程序（当然也有很多开发框架如uin-app taro等），如果是开发多端，建议使用这些框架。

如果你不懂原生开发，可以阅读官方文档，里面有非常详细的开发介绍。

配置

编辑

对于编辑器，我们可以使用官方的小程序编辑器。下载地址下载后，我们创建一个空项目。

您可以使用自己的号码或测试号码。如果你想自己申请，可以看这里——》填写完所有内容后，点击确定。

此时，我们的初始项目已经建立，可以开发了。

用户界面库

现在我们如何在不使用UI库的情况下开发小程序呢？哈哈，我用的是UI库来绘制页面的，这样更方便，也更美观。一些功能和效果也是开箱即用的。可以说只有优点没有缺点！ ！ ！

这里我会安装一个我经常使用的UI库。进入官网，点击快速开始，看看如何安装。

我这里直接使用npm。我用的是cnpm。 cnpm是淘宝镜像，安装速度更快。不管怎样，安装成功了。

然后你按照文档一步一步操作：修改app.json =》修改..json =》构建npm包

一定要仔细阅读文档！

踩坑（记得踩几个地方的坑）：

注意：由于新版本开发者工具创建的小程序目录的文件结构问题，npm构建的文件目录是，开发工具会默认在当前目录下创建的文件名，所以新版本r的版本配置为'./'，即Can

如果全部搞定后发现样式还是不生效，记得检查app.json下是否存在此项。记得删除这个配置项，重新编译！

公共配置可以放在app.json中，其他页面可以单独导入。

接下来我们要更改 UI 主题。因为我们的主题是深绿色，所以我们将 UI 主题更改为这种颜色。

具体详情请参考UI框架=》定制主题文章

OKK今天就先从这里开始，然后我会根据官方开发的进度一步步讲解！如何自定义底部菜单，如何编写组件，如何封装接口请求等等，因为现在不需要，等用到的时候再讲。

最后我把源代码放到了网站上。如果您需要的话，可以下载来看看！ ！ ！

-app源代码地址