一，下载并安装开发共工具

　　1，下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

　　　　

　　　　点击如图所示地方，浏览器会自动下载开发工具安装包。

 

　　2，开发工具的安装

　　　　

 

　　　　双击如图所示的安装包，执行安装。之后我们会来到下图所示的界面：　　

　　　　

在图4中，我们可以修改软件的安装路径，在这里,我们把他的安装路径改为D盘，然后点击“安装”,将会看到下面这样的安装画面。

 

二，创建项目

　　　　点击图6中的“完成”按钮，耐心等待几分钟（中间可能会无响应，软件界面黑屏等），完全进入开发工具后，界面如下图7所示　　　

　　　　在图7中，我们依次点击1，2，就来到了图8。

　　　　图8中，关于项目的创建，有六个可供用户输入或者选择的项，下面我们逐一介绍一下：

　　　　1，项目名称：本项目的名称。

　　　　2，目录：项目被创建以后，在磁盘上存放的位置。

　　　　3，AppID:本小程序的ID号。每个小程序对应着一个ID，每个ID只能对应一个小程序。我们可以到这个网站去申请一个小程序

　　　　　 AppID：https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　　　　  在本例中，因为我们是以游客的身份在登录使用开发者工具，因此开发工具默认给我们分配了一个游客小程序账号。 

　　　　4，开发模式：在这里我们选择默认的“小程序”即可。

　　　　5，后端服务：在这里我们选择“不使用云服务”。云服务就是微信提供的一套API接口，无需我们搭建服务器，就可完成需要服

　　　　　 务器，才能实现的项目。

　　　　6，语言：我们选择默认的JavaScript。

 

　　依次点击图8中的3，4，我们来到了如下图所示的界面：　　

　　　　至此，一个完整的项目就创建完成了。

　　　　图9中的标注，是开发过程中最常用的几个功能，下面逐一解释一下：

　　　　注释1：此时的图标是绿色的，表示我们要在开发工具界面上显示手机模拟器，帮助我们查看设计的界面。如果有一天您不小心

　　　　　　　　操作导致模拟器不见了，就可以点击此处，界面会将模拟器显示出来。

　　　　注释2：编辑器，也就是我们写代码的地方，将来我们的Js代码，css样式表，html元素，Json配置等等文件资源都会显示在这

　　　　　　　里，供我们编辑。

　　　　注释3：调试器，他类似于我们在浏览器中按下F12使用的“检查”功能，可以查看一些程序的运行数据，可以显示我们在js中打印

　　　　　　　　输出的调试信息。

　　　　注释4：模拟器配置，我们可以点击此处，选择一个手机型号，来显示我们的界面展现效果。本例中选择的是IphoneX，您也可

　　　　　　　 以选择Iphone7，Nexus 5等手机型号。

　　　　注释5：编译，当我们编辑完一段代码，或者是修改了json配置后，可以点击此处，开发工具会执行编译，在模拟器上更新我们

　　　　　　　 最新的程序。或者我们按下Ctrl+S，也能达到一样的效果。

　　　　注释6：上传，将我们的项目上传到微信公众平台。我们可以看到这个“上传”按钮是灰色不可用的状态，那是因为我们是以游客

　　　　　　　 的身份使用开发工具的，如果我们使用申请小程序账号时绑定的微信号登录开发工具，此处将不再是灰色不可用的状态。

　　　　　　　 若我们只使用申请小程序时绑定的微信号登录，而不输入有效的AppID，那么“上传”按钮，将是不可见的。

　　　　注释7：在此区域，我们可以查看一些调试信息。如果在js中写下：console.log("Hello")，并且选择了调试器中的Console，那么

　　　　　　　在此处，我们将会看到js程序输出的“Hello”。

　　　　

 

三，真机调试

　　1，小程序AppID的使用

　　　　①现在，我们已经有了一个完整的项目，但是不能在真机上运行，总觉得好像少点什么。我们先来申请小程序测试号，并且登

　　　　　录开发工具。https://mp.weixin.qq.com/wxopen/waregister?action=step1

 

　　　　　打开上面的网址，打开的网页长这个样子：　　　

　　　　

点击立即申请后，打开的网页长这个样子：　　

　　　　拿起我们的手机，用微信扫描这个二维码，之后在您的手机上点击确认，电脑网页会提示您已有测试号，然后点击“前往登录”

　　　　

 

　　　　鼠标点击后，浏览器将会跳转至微信公众平台的登录页面：　　　

　　此时，拿出您的手机，扫描这个二维码，然后按照如下顺序操作：

　　

 

　　在手机上点击之后，浏览器网页将跳转至如下界面：　

　　如图19中的红色标注所示，我们已经成功的申请到了一个小程序测试ID。把他复制出来。

 

　　然后我们再回到开发者工具中，点击界面左上角的这个图标。　

　　

会弹出一个二维码，长这个样子：　　

　　用我们注册小程序时使用的微信，扫描这个二维码，意思是用自己的微信登录开发者工具，我们的微信头像，将会显示在此。

 

　　再来到界面的右上角，点击右上方的“详情”按钮，您将会看到下面这个界面：　　

 

　　点击完毕后，我们会来到如下界面：

　　将我们刚刚申请并且复制出来的小程序测试ID，复制到图23的红色标注处，然后点击确定。等待开发工具联网确认小程序ID。

　　

　　等开发平台验证完小程序ID后，我们会发现，图24中“预览”和“真机调试”两个按钮，由灰色的不可用状态，变成了可用状态。

　　下面，就说一下这两个按钮的功能。

 

　　②真机调试

　　1，打开我们的手机微信，停留在微信界面，不要有任何的操作，也不能让手机熄屏。

　　2，点击图24中的预览按钮，我们会看到下图所示的界面：　　　

　　　　点击图25中的红色标注“编译并预览”按钮，然后把视线转移到我们的手机，您会发现，手机界面自己变成了图26这个样子

　　　（手机和电脑无须在同一局域网。反应速度视手机网速而定）：

　　　　

　　　　这个界面，就是我们刚刚新建的小程序。当修改过小程序后，再次执行上述操作，手机界面将会再次重新显示我们修改后的小

　　　　程序。

 

四，小程序的审核和发布

　　1，小程序的发布，需要我们申请一个真实有效的微信小程序ID，即AppID。

　　　我们可以到这个网站去申请：https://mp.weixin.qq.com/wxopen/waregister?action=step1

　　　下面假定我们已有了一个真实有效的小程序ID。当用微信号登录开发工具后，且使用的是同一个微信号关联的小程序ID登录以

　　　后，将会看到下面的界面：　　

　　　　注意对比右上角红色标注处的变化：

　　　　

 

　　　　在此，我们点击“上传”按钮，将会看到下面这个界面：　　　　

　　　　在弹出的对话框中，填写我们的信息，然后单击弹窗上面的“上传”按钮，等待开发工具将项目上传至微信公众平台。

 

　　2，在微信公众平台中，管理您的小程序。

　　　　打开下面这个网址，用小程序ID关联的微信，扫描网页中的二维码，登录微信公众平台

　　　　https://mp.weixin.qq.com/

　　　　扫码确认登录以后，在电脑浏览器中，我们将会看到下图所示的网页：　　

　　　　点击图29中红色标注的1，然后我们将会看到红色标注的2，他就是刚刚上传的微信小程序。点击红色标注3中的白色箭头，授

　　　　权给我们的测试人员，来测试小程序。

　　　　点击蓝色标注的“提交审核”按钮，按照微信要求，填写我们的请求审核信息，等待微信审核结果的通知。结果会在微信公众平

　　　　台和手机微信上通知。

 

　　　　待我们收到审核通过的信息后，来到微信公众平台的如下界面：　　　

　　　　先点击红色注释1，再点击红色注释2，下载您的小程序码，把他推广出去。

　　　　您也可在此修改其他内容，如红色标注3，小程序头像，给您的微信小程序设置一个有意义，且富有创意的头像。

 

 

至此，一个微信小程序已完全成功的发布了，感谢您的阅读。

由于时间仓促，忽略了一些细节，且难免有错误之处，欢迎您在评论区留言指正。

 

 

 

 

电脑查看不方便？试试关注公众号吧，本博文已同步至微信公众号，欢迎关注。