第一步：安装【微信web开发工具】。点击上方栏【工具】，选择【设置】，到指定网页安装，安装完成后需手动输入文件路径。
 
 
第二步：点击【运行】，选择【运行到小程序模拟器】，可选择是否【运行到页面】
 第三步：开始编译运行
 
 第四步：小程序界面导出如下
 
 
这里要注意，微信开发者工具需要提前打开服务端口，否则会报错。
 选择设置->安全设置->打开服务端口。
 

账号申请
 后台小程序信息完善
 安装开发工具IDE
 小程序项目搭建
 项目编译
 真机预览调试
 
小程序开发前准备：
 ①申请账号
 ②安装开发工具
 
账号申请
 进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
 网址：https://mp.weixin.qq.com
 
 小程序APPID
 注册完毕后即可登录小程序后台
 AppID：
 在菜单 “开发”-“开发设置” 可以看到个人的小程序 AppID，这个在开发会用到，相当于微信小程序给开发人员的通行证。
 
 后台小程序信息完善
 接下来设置小程序基本信息
 小程序名称、简介、简称、头像、服务类目等
 
 安装开发工具IDE
 小程序开发工具
 编写小程序代码需要专门安装小程序开发工具
 下载版本：
 
 注意：小程序开发工具兼容问题
 需要注意的是小程序开发工具在 Windows上仅支持 Windows 7 及以上版，在 Mac 上支持 OS X 10.8 及以上版本
 安装微信开发者工具
 双击下载完成的安装文件，根据提示点击下一步，即可完成安装，安装成功后，可以在桌面或者开始菜单中找到小程序开发工具的快捷方式，打开即可。
 
 小程序项目搭建
 接下来打开微信小程序开发工具，开始创建小程序项目，使用之前注册小程序所使用的微信扫码登录。
 ①项目名称，英文命名，避免中文及其他特殊符号开头
 ②目录下最后一级，最好改成项目名，方便后期管理浏览
 ③AppID在小程序后台的设置中查看
 ④后端服务选择不使用服务器
 ⑤选择完毕后点击创建，即可生成小程序项目
 
 项目编译
 初次打开后一般都会自动编译预览，如果没有，则点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。
 
 真机预览调试
 小程序开发工具提供了预览和真机测试两种途径来供开发人员在手机上浏览器测试项目，俗称“真机测试/调试”。
 
 

原因： AppId没有填对
 
 
登录网站 微信公众平台 选择注册的小程序邮箱登录，不是选择测试号，如果进入测试号 ,小程序界面没什么东西
 

 
 
修改AppId为开发者的AppId，然后可以立刻看到上传按钮显示
 
后可以立刻看到上传按钮显示
 

一、微信小程序官方开发工具
 
注意，它只是个工具，而不是一个IDE。官方工具中的代码编辑功能，就是将vscode的代码编辑功能嵌入到工具中，不足以支撑开发。
 
 
 
 
  
 
  

   
  
 
 
 
 
 
 
优点
 
因为是官方工具所以有这其它第三方工具有这不可比拟的天然优势，如果不是他代码编辑功能太弱的话。
 
l 官方工具，可调试，可预览
 
l 基本的代码编辑、智能提示、调试等功能都有
 
l 项目管理、创建、手机预览、代码提交审核
 
l 官方维护更新
 
缺点
 
不好的地方也很明显，总体而言是一款工具而不是IDE。糟糕的代码编辑功能，写起代码非常别扭，这是我放弃它的最重要原因。
 
l api提示不全，要一个个查api，影响写代码的速度
 
l 很多必备的快捷键都没有，比如全选关键字、快速复制一行等等
 
l 颜色主题不能选，不喜欢白色风格怎么搞
 
l 没有插件 没有插件 没有插件 重要的事情说三遍
 
评价
 
目前因为需要用到微信web开发工具进行小程序的创建、调试、查看、预览、上传，所以这个工具必不可少。但是代码编辑功能实在太差，推荐使用其它第三方代码编辑工具代替。
 
二、即速应用
 
适合技术小白的小程序开发工具
 
严格来说，即速应用并不是为专业程序员准备的开发工具，但它绝对是一款功能非常强大的微信小程序制作工具。不懂技术不懂编程的人，一定会爱上即速应用这款工具的。目前只要登录www.jisuapp.cn就能使用这款工具。
 
 
 
 
  
 
  

   
  
 
 
 
 
 
 
优点
 
l 可视化操作，直接拖拽组件生成页面
 
l 提供大量可套用的模板
 
l 可将代码打包下载，直接对接到小程序的开发工具
 
l 下载下来后的代码可以任意编辑
 
缺点
 
l 电商模板居多，其他类别的模板较少
 
l 复杂的功能仍然需要专业程序员二次开发
 
评价
 
客观地说，即速应用这款微信小程序制作工具非常适合技术小白。因为它相当于把需要代码的部分都帮你做好了，所以不用太头疼技术方面的问题。当然，如果你是程序员，一样可以在它生成的代码基础上进行二次开发的。
 
三、Sublime Text 3
 
简洁高效的开发工具
 
sublime text 3定位于代码编辑器而不是IDE，在代码提示方面只能算一般般，不过胜在使用起来非常方便。
 
 
 
 
  
 
  

   
  
 
 
 
 
 
 
优点
 
l 打开文件速度倍儿快、UI简洁大方
 
l 代码编辑体验舒适、高效
 
l 拥有大量插件，针对不同需求基本上能找到对应插件来满足
 
l 第三方开发者开发小程序插件用于代码着色和代码提示
 
缺点
 
l 没有调试，没有预览
 
l 因为是第三方开发者编写的插件，代码提示也不是非常全面
 
评价
 
使用门槛不会太高，可以迅速上手。是但如果想实现一些丰富的功能就会比较吃力了。
 
四、WebStorm
 
功能繁多的重度开发工具
 
WebStorm网上有个插件，可以实现代码提示，不能做调试和预览，并且属于重度工具，如果你是，可以尝试一下这个工具。
 
 
 
 
  
 
  

   
  
 
 
 
 
 
 
优点
 
l 有插件可以实现代码高亮，代码提示等功能
 
l 有非常成熟和非常丰富的功能
 
l 各种快捷键
 
缺点
 
l 无法调试预览
 
l 功能比较多、比较臃肿
 
评价
 
Webstorm和上述几个工具相比，代码编辑功能较强大。但是需要插件支持才可以开发小程序，而且体积臃肿。
 
总结
 
这四款工具各有优劣，适用于微信小程序开发过程中的不同情况。到底选择哪一种，就看自己的需求了。如果你想尽快学会开发微信小程序，那么熟练掌握这些开发工具是非常必要的。
 原文作者：朝花吸食
 原文链接：https://zhuanlan.zhihu.com/p/33258938