1 小程序简介 微信小程序开发教程：起步-下载并安装vsCode编辑器-熟悉项目结构并创建home页面

     略！详见微信开放平台小程序文档！

2 申请账号、创建项目

      开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。本节的主要内容有：

      （1）申请微信小程序账号

      （2）安装微信小程序开发者工具

      （3）在开发者工具中创建一个小程序项目

      本教程参考微信开放平台小程序官方文档，如下截图部分内容：

2.1 申请微信小程序账号

      进入小程序注册页根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。

      有了小程序账号后，我们就可以通过管理员微信号（注册小程序账号的时候会要求用微信号绑定小程序账号，这个微信号就成为了管理员微信号！）登陆进入小程序管理平台。在小程序管理平台你可以管理你的小程序的权限，查看数据报表，发布小程序等操作。

      登录小程序后台后，我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 和 AppSecret 了 。小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID （注意这里要区别于服务号或订阅号的 AppID）。

2.2 下载并安装微信小程序开发者工具

      有了小程序帐号之后，我们需要一个工具来开发小程序。前往开发者工具下载页面，根据自己的操作系统下载对应的安装包进行安装。

      下载成功之后，双击安装包，一路点点点就完成安装了！安装后桌面图标如下：

2.3 创建第一个微信小程序项目

      创建小程序项目步骤：

      （1）打开小程序开发者工具客户端，并用管理员微信号扫描登录开发者工具。

      （2）新建项目选择小程序项目，给你的项目起一个好听的名字，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，勾选 “不使用云服务” （注意: 你要选择一个空的目录才可以创建项目）

      （3）点击新建按钮，你就得到了你的第一个小程序项目了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

虽然微信开发者工具提供编写代码的全部功能，但是仍然没有vsCode强大和使用方便。我们可以通过vsCode软件来编写小程序代码，同时通过微信开发者工具来预览页面效果，完美搭配~

      下面我们演示一下vsCode开发软件的安装过程！

      如果需要同款vsCode软件安装包。关注微信公众号：IT特靠谱，发送"我要vsCode安装包"免费领取吧~

1 打开vsCode官网

      https://code.visualstudio.com/进入vs官网，根据不同电脑系统选择不同版本下载安装包。

      下载的安装包：

2 安装vsCode软件

      双击安装包，一路点点点即可完成安装！安装后需要重启下电脑，使得环境变量生效。

      安装后的桌面图标如下：

3 打开vsCode软件

      双击桌面vsCode的图标打开软件。软件欢迎页如下，下面我们就可以用vsCode来写小程序代码了！

1 项目初始化结构

      创建小程序项目后，初始化项目结构如下:

      （1）pages目录：存放所有小程序页面

      （2）utils目录：存放通用js工具

      （3）app.js：app项目入口

     （4）app.json：全局（公共）配置文件。小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。详见官方文档：            https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E5%85%A8%E5%B1%80%E9%85%8D%E7%BD%AE

      （5）app.wxss：全局（公共）样式文件。

      （6）project.config.json：项目配置文件。配置项目参数，如：appid等配置。里面的参数其实就是右上角“详情”页面展示的配置信息。既可以修改详情页的参数，也可以修改project.config.json来达到同样目的！

2 创建一个home页面

      上面项目结构中可以看到初始化项目时有两个页面：index和log。那么我们如何创建一个页面呢？

      可以安装如下步骤进行创建新page：

   （1）打开app.json全局配置文件，在pages配置里面新增"pages/home/index"；注意小程序的所有页面都要配置到app.json中！

      （2）ctrl + s保存，小程序工具会自动给我们生成home页面的4要素（index.js、index.wxml、index.wxss和index.json）文件。

3 默认启动显示home页面

      上面成功新建了一个home页面。但是编译项目后，默认打开的还是index页面。如何让项目启动的时候默认打开的是我们创建的home页面呢？答案是：将app.json全局配置文件中pages配置的"pages/home/index"移动到最上面。这样小程序启动后，默认打开的就是home页面了！

      调整后，配置如下：

      重新编译下，可以看到小程序默认显示home页面

本文来源:标梵互动(https://www.biaofun.com/)