@Author：Runsen
很久没有写博客，前端学习到这里真的不容易，那接下来Runsen继续学习微信小程序开发。

首先微信小程序官方开发文档（免费的）、微信开发者工具（免费的）、微信云开发（还是免费的）

环境安装

微信开发者工具下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

安装不说了。

打开的页面是这样子的

Appid获取

下面就是选择注册小程序账号，拿到Appid

注册好了小程序就可以在小程序设置中查看

AppId 跟小程序秘钥必须记录下来。

下载安装完成之后，打开微信开发者工具，使用注册小程序账号的时候绑定的管理员微信扫码登录。

• 项目名称 —— 如 my-project
• 目录 —— 选择你要将这个项目放在那里
• AppId —— 填写我们上面申请的 AppId

点击“新建”，这样我们就快速构建了一个项目名称为 HelloWorld的小程序。这里我先不使用云开发，后面在用。

小程序代码构成

小程序代码构成在微信官方的“小程序开发文档”中有详细的讲解，讲解内容可以通过官方文档方式查看：

可以看出构建小程序项目，根目录下必须要有 app.js,app.json,app.wxss 这3个文件。

pages 目录是用于存放页面，每个页面就是一个文件夹，分别由.json、.wxml、 .wxss、.js 文件构成。

utils 目录主要用于存放各种工具类，全局方法等

下面是具体的说明

创建完一个新的项目后。会出现以下的目录结构：

• project.config.json：项目的配置文件。比如设置项目的名字，设置appid等。
• app.js：小程序逻辑处理。比如小程序加载完成执行的代码。
• app.json：小程序公共配置。比如小程序的页面，是否有tabbar等。
• app.wxss：小程序公共样式。在这个里面写的样式可以被所有页面使用。
• pages：存储小程序页面的。
• index：页面的名称
• index.js：index页面的逻辑处理文件。
• index.json：index页面的配置文件。
• index.wxml：index页面的页面结构。
• index.wxss：index页面的样式。
• 其他页面

官方文档 ：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/

看懂app.json

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

具体的app.json的参数查看官方文档