如何入门微信小程序开发（了解工具篇）

这是我参与新手入门的第1篇文章

名言说：“每一个成功者都有一个开始。勇于开始，才能找到成功的路。”

所以我开始了，希望我的文章能带给您进步。

微信小程序文档

此处微信小程序向你扔来一条链接 小程序文档

说实话，如果你有耐心看完全部文档内容，我觉得，你没有必要继续往下读了，你的功力已经达到九成，不在是入门的小白了

如果您时间不够或者读文档感觉枯燥无味，而又想快速入手微信小程序开发（原生框架开发），这篇文章或许对你有用，请往下看

安装

1.申请帐号（非必要步骤，现在开发工具支持生成测试APPID）

• 小程序注册按照页面内容填写资料提交即可
• 注册完后，即可登录公众平台里面有小程序的配置及发版审核等

2.安装开发工具

• 首先去官网下载 微信开发者工具 建议下载 稳定版
• 下载完成像正常软件安装即可，无需配置环境

恭喜您，完成上面的步骤即可进入开发队列了

使用

1.创建第一个demo

• 打开安装好的微信开发者工具，按照工具内容填写即可（如果看见有云开发选项，请选择不使用云开发，上手先来简单的，不然一上手就放弃）

• 第一个demo就是如此的快捷完成了,你的Hello World已经上线 （这是默认的，还不是自己手动敲的）
• 接下来，我将会讲下常用开发工具的功能，下面截图红色圈住是我们经常使用的功能

了解工具常用功能（图片请看上面，功能讲解也是按照上面圈出的功能来解说）

1.模拟器：

• 模拟手机页面，修改代码按ctrl+s保存直接可以看效果，展示效果和手机小程序几乎一样。

2.编辑器：

• 普通的ide编辑器一样，用于编写代码，修改代码的工具，有直接提示语法功能，可以帮助我们开发速度。

3.调试器：

• 控制台，用于调试bug，或者打印逻辑输出内容，也可以查看接口发送内容及接口返回的参数内容等，开发c测试必不可少的调试工具。

以上三个按钮在开发工具是可以点击的，绿色说明已经选中，在界面会显示出来，灰色则表示隐藏。

4.普通编译：

• 点击普通编译则会出现四个选项

• 第一个普通编译就是默认的，用于首页展示效果
• 添加编译模式：你可以点击添加自己想要的页面路径，添加完后默认选中该模式，模拟器就会展示该路径下的页面，有利于开发而不用代码修改切换展示开发页面
• 通过二维码编译：用于生成的二维码调试使用，点击然后选中二维码即可在onLoad函数回调里面输出二维码内容，页面会跳到二维码设定的页面路径（可能看得有点懵，建议手动尝试）
• 通过URLScheme编译：这个URLScheme地址，可以用于在浏览器中跳转到目标小程序（生成方式可以登录公众平台，右上角“工具”选项即可，如果想用代码去生成请看urlscheme文档）

5.预览：

• 点击预览默认会快速生成一个二维码，手机扫描二维码即可打开你写的小程序，只不过它是开发版，不能所有人都看得见

6.真机调试：

• 点击之后会向预览一样快速生成一个二维码，不同点在于扫码后手机看界面效果，控制调试台在电脑看，这样分开显示有利于寻找bug问题

前面5和6点不一定扫码才能用手机预览，也可以自动调起你手机小程序，不需任何扫码，只需点击自动预览，如上图

7.清缓存：

• 这个按钮点击后，会展示很详细告诉你需要清楚什么类型的缓存，平时可以一键全部清除即可，因为这样可以重新测试授权，本地缓存都会清除

8.上传：

• 上传主要是开发完成后，经过无数次的测试，发现没问题即可点击上传，上传后可以登录公众平台查看上传的版本，用于提交审核和发布小程序，如图

9.版本管理：

• 这个看个人是否需要了，git差不多一样的代码仓库管理，好像团队大了也要收费，协同开发使用也不错

10.详情：

• 详情下面包括了基本信息 本地设置 项目配置三大选项
• 基本信息 用于查看小程序基本信息例如appId，代码分包大小 *（单个分包最大2M）*等
• 本地设置 用于切换调试基础库，是否把js转为ES6，不校验域名 （方便测试） 等常用功能配置
• 项目配置 用于查看域名配置情况，配置的安全域名或者业务域名都会显示在这

不知不觉发现文章已经很长了，为了减少阅读疲劳，决定分篇来写，下一篇将是开发敲代码，题目为 “入门微信小程序开发(基础开发篇)

创作不易，有用希望给个赞鼓励下~