注册微信的相关账号并下载开发者工具

三个平台账号

微信的H5页面会涉及到一些功能（登录，分享等）， 所以我们需要事先了解一下微信的产品家族。

几乎无论是新手，还是老手，都会在这里发蒙。 所以大家务必做好必要的笔记。 另外，每申请一个账号， 就要把用户名和密码记录下来。 上面三个平台的账号都是独立的。并且每个账号中几乎都有自己的appid, appkey, app secret 等各种机密的秘钥。 而且每个都不同。 大家一定要妥善保管好。 不能混淆。 否则会为调试带来巨大的困扰。

对于公司来说，需要准备好相关的证照 ，并且在对应的时间内使用公司账号打款给微信。 由于过程比较繁琐，所以申请的步骤略。

各位同学不要打退堂鼓，我们在真实的项目中，几乎每个互联网公司，都是一定会用到微信公众号的功能的。

下面的内容，我们假设已经成功的申请到了微信的相关账户， 公众平台上的是“服务号”。 （具有支付功能）

微信开发者工具

由于微信自带浏览器的特殊性（一定会自带weixin openid等微信独有的信息） ， 这就导致我们平时使用的普通浏览器，在开发微信相关功能的时候（授权， 分享，支付等）是无法使用的。所以我们需要下载微信的开发者工具。 地址： https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

如果上述地址有变化，我们也可以自行百度搜索: “微信开发者工具”。

下载页面如下图所示：

开发者工具下载页面

下载后，双击开始安装， 安装后会出现登录页面， 如下图所示：

开发者工具登录页面

扫描后，可以看到有两个入口， 一个是微信小程序， 另一个是公众号网页项目， 如下图所示：

开发者工具登录后选择入口页面

打开后，可以看到，几乎跟chrome developer tool是一模一样的。 除了：

  • 左上角提供了wifi的信号选择.
  • 右上角提供了 “清缓存” 这个功能。
  • 左上角可以看到当前登录的微信用户的图标

如下图所示：

开发者工具界面

目前虽然网上有一些Linux的开源组件， 但是基本没有windows和mac上的好用。 所以建议Linux的开发同学， 暂时回到windows的开发环境。