微信小程序从入门到精通-基础篇（1）

前言

我是一名全栈开发工程师，从毕业到现在一直从事开发相关的岗位，差不多也有6-7年了，先后从事过后端和前端相关的开发工作。回过头来看自己这一路还是走了不少弯路。但在这过程中也总结了自己的经验和技巧，希望能够分享给大家，让大家在这个行业少走弯路，走的更快，走的更远。

首先给大家带来的是微信小程序相关的内容，后续还会陆续更新更多技术相关的内容。

正文

在开发小程序之前我们还有一些准备工作要做。有些和文档重复的部分就不再做重复介绍了，大家直接通过我给出的链接进去查看即可。

1、查看微信小程序文档

微信小程序的文档还是很详细的，建议大家在学习之前先看一遍。 https://developers.weixin.qq.com/miniprogram/dev/framework/

2、申请帐号

开发小程序的第一步，你需要拥有一个小程序帐号，通过这个帐号你就可以管理你的小程序。以及获取到微信小程序的appid等相关信息。
https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/getstart.html#%E7%94%B3%E8%AF%B7%E5%B8%90%E5%8F%B7

3、安装开发者工具

微信小程序有自己的开发工具，我们需要先下载。
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

如果你是新手，建议根据自己的操作系统下载对应的【稳定版】安装包进行安装。

有关开发工具的详细介绍地址https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html

4、获取小程序appid

创建项目之前我们需要首先获取到我们注册的小程序appid

小程序后台登录地址 https://mp.weixin.qq.com/

在“开发” -> “开发设置” 下可以查看到我们小程序的appid

创建我们第一个微信小程序

打开我们安装的微信开发者工具填入对应信息，AppID要填自己注册的，选择不使用云服务（云服务后续会单独介绍），然后点击新建。

这个时候开发者工具会自动帮我们创建一些目录和文件，以及自动预览我们的小程序。

然后点击界面上的“预览”按钮，通过手机上微信的扫一扫，来让我们的小程序在手机上进行预览。

目录和文件介绍

├── app.js                  //全局js
├── app.json                //全局配置
├── app.wxss                //全局样式
├── pages                   //存放页面的目录
│   ├── index               //页面目录
│   │   ├── index.js        //页面js
│   │   ├── index.json      //页面配置
│   │   ├── index.wxml      //页面结构
│   │   └── index.wxss      //页面样式
│   └── logs
│       ├── logs.js
│       ├── logs.json
│       ├── logs.wxml
│       └── logs.wxss
├── project.config.json     //编辑器配置文件
├── sitemap.json            
└── utils                   //工具函数存放文件
    └── util.js             //配置小程序及其页面是否允许被微信索引

总结

相信大家通过上面的操作对小程序开发的流程已经有了大概的了解，如果有小程序相关的问题或者其他技术相关问题都可以加我微信交流