Web微信小程序开发（一）

微信作为一种通讯工具的使用可以说是越来越频繁了，随之兴起的也有很多，比如服务号，小程序，但是似乎小程序更能符合大众的心意，在面临着越来越多的APP的普及，大家更多的是希望手机上的APP能越来越少

所以菜菜就顺应时代的潮流学习如何做一个简单的小程序（嘻嘻嘻）

---

一、开发环境的准备

首先就是要有自己的权限来开发一个小程序

• 注册一个属于自己的开发者账号
  （由于我们后期需要调用微信端口等功能，即需要一个APPID）
  百度 微信公众平台-- 注册–登录
  要注意的是注册需要一个没有使用过的邮箱（或者在微信小程序官网）

登录之后的界面如图：

• 点击红色方框中的开发设置
  得到如下界面，获取APPID
  （可以先提前复制保存，方便后期使用）
  

到了这里，我们就可以准备我们的微信开发工具了

• 下载对应工具
  写代码：vs code下载地址
  看效果：微信开发者工具下载地址

其界面分别为


选择自己的版本下载即可

---

二、微信开发者工具使用

下载完成之后，打开微信开发者工具，微信扫一扫授权登录得到如下界面

第一个小程序

在桌面建一个文件夹命名为01-demo

注意：
文件夹名称应该与项目名称一致
我使用的语言是Js
可选择使用测试号
再点击新建即可

认识我们的界面

• 1区域
  基本工具栏，对当前工具进行设置，比如改变外观
• 2区域
  显示界面，可在这里看到效果
• 3区域
  文件区，我们需要的所有文件
• 4区域
  代码区，我们在里面进行一系列操作
• 5区域
  调试区，上面的一些选项可点开，看到类似HTML的代码

大家可试着自己各种点击一下了解其功能

（为绿色，表示可见，可自行操作选择自己喜欢的显示方式）

对于小程序模式，普通编译我们一般不改变
编译，预览我想大家都明白
真机调试：对于我们不能在该界面找到的bug，可以通过手机扫描二维码来体验
其余的方框内的内容可自行了解

---

在对微信小程序的开发中我们对于软件的安装使用有了一定的基础了解了，我们后面就将认真的学习如何开发小程序

第一篇Web微信小程序开发的学习就到此结束啦！