本文图文讲解如何搭开发环境入门开发小程序。

现在的小程序五花八门，比较流行的有微信小程序、支付宝小程序、QQ小程序，百度、字节跳动、头条、360等厂商也有做小程序，本文主要以微信小程序为主，先用官方的微信开发者工具讲解搭开发环境，再用号称可以开发一次多端覆盖的uni-app讲解搭开发环境。

首先到官网下载微信开发者工具，安装完用微信扫码登录账号

然后点“➕”新建项目

填写项目信息，其中AppID这一项填写注册小程序后生成的AppID，如果没有可以点注册，也可以点测试号生成一个测试ID，但最好还是申请个小程序号，毕竟后面发布也要用到。

点新建后可以看到默认的项目结构

包含一个描述整体程序的 app 和多个描述各自页面的 page，其中app.js是写逻辑的、app.json是公共配置、app.wxss是公共样式，这三个不想放在项目根目录。页面由四个文件组成：js(页面逻辑，必需有)、wxml(页面结构，必需有)、json(页面配置，非必需)、wxss(页面样式表，非必需)，这四个文件必须具有相同的路径与文件名。更多信息查看官方文档。接下来就可以开始开发自己的小程序了。

点预览可以用微信扫码在手机上看

接下来讲解用uni-app开发小程序，首先到官网下载HBuilderX，安装后新建项目：

你会发现新建项目后可以预览但却不能在微信开发工具上预览，控制台提示微信开发者工具没打开端口。

在微信开发者工具的设置里打开服务端口然后HBuilderX点重启运行即可在微信开发者工具上预览了，然后就可以开始开发自己的小程序了。

需要说明的是，用uni-app开发小程序会遇到各种莫名其妙的问题，也不可能写完一套代码就什么都不用改、不用调就可以发布到各厂商的小程序服务器中运行，单位也是很蛋疼的问题，一开始是用px的，但发现在小屏手机会显得很丑，uni-app提供的upx会自动将px转化成微信的rpx，现在uni-app好像将rpx作为默认单位了，所以后来我把很多单位都换成了rpx，当然这在其他厂商的小程序里可能不兼容，所以这种开发一次覆盖多端的口号很不靠谱！另外微信的个人小程序没有配置业务域名的功能所有没法直接访问外部网站也就不能直接套网站，所以得全部内容重新开发，调用接口得先到后台 开发->开发设置 配置服务器域名。

当然，要想更好的开发小程序你必须有前端基础(html、css、js、vue)，还要会调样式、布局页面等等，像我整套都是自己做的涉及的东西就更多更广了。其实我的个网站也兼容多端访问的，是用PHP(linux +docker+php+nginx+mysql)做的，虽然快速高效但有点走偏，加上小程序越来越流行所以就决定做个小程序。后台接口采用容器化自动部署架构(linux+docker+springboot+nginx+gradle+svn+jenkins+mysql)也算是个微服务，小程序用uni-app(当初据说这个国产东西写一套代码可以生成各种小程序、app等，所以放弃用微信原生)做的，从界面布局、样式调控到后台接口规划、数据库表设计、还要兼容PHP等等都要一步步实现、一行行敲代码，这期间付出多少心血、踩过多少坑…放心你也会遇到各种莫名其妙的问题、踩无数的坑😄。