概述

上一章我们讲了 如何画原型，那小程序原型基本画完了，正确的方式应该是还有UI设计，这里我们直接跳过，直接上手开发。

因为本人不太擅长UI设计，同时也不想浪费时间在UI设计上。

今天我们就讲讲 搭建环境，以及基本的配置。

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

原生开发的话 如果你不明白可以看一下 官方文档 有很详细的开发介绍。

配置

编辑器

编辑器我们就用官方的小程序编辑器就好了 下载地址 下载好以后我们创建一个空项目。

AppID 你用自己的 或者 测试号 都可以 如果要申请自己的AppID 可以 看这里-》 都填好了我们点击确定即可。

这时候我们的初始项目就建立好了 接下来就可以开发了。

UI库

现在开发小程序怎么能不用一个UI库呢？哈哈 用了UI库 画起页面来更加方便 也更加美观 有些功能效果 也是开箱即用。可以说只有好处没有坏处！！！

这里我就安装一个我经常用的UI库 Vant Weapp 进入官网 直接点快速上手 然后看怎么安装

我这里直接采用npm 的方式 我用的 是cnpm cnpm 是一个淘宝镜像 就是安装更快 反正安装成功就好了。

然后你就按照文档一步一步走：修改app.json =》修改 project.config.json =》构建npm 包

一定要仔细阅读文档呦！

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

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

如果都搞完了发现样式还不生效 记得看下 app.json 下是否 lazyCodeLoading 这个项 有的话 记得删除这个配置项 然后重新编译就好了！

公共的配置可以都放到app.json 里面 其余的 各自页面各自引入即可。

下面我们在改下 UI主题，因为我们的主题 是 深绿色 所以我们在把UI主题改为这个颜色

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

OKK 今天先到这里 后面正式开发 我会跟着进度 一点一点讲解！ 如何自定义 底部菜单 ， 如何 编写一个组件， 如何封装接口请求 等等 ，因为现在用不到，等用到的时候我们在讲。

最后我把源代码 放到gitee 上 有需要的童鞋 可以去下载 看看！！！

zilvjun-app 源码地址