微信小程序入门day1-1

开始前的准备

小程序的开发有两样东西必不可少，一个是小程序开发的技术文档；还有一个就是小程序的开发者工具。

开发者工具：小程序开发者工具下载地址

大家可以根据自己电脑的操作系统来下载对应的稳定版安装包进行安装。就和我们写Word、PPT文档要用Office的软件一样，我们要在开发者工具上多多动手，技术才能掌握的更加真切。

技术文档：官方小程序技术文档

技术文档了解大致的结构即可，先按照步骤学完之后再来看也不迟。官方的小程序技术文档过于全面而且详细。

多看技术文档和多用开发工具也是我们学习其他编程语言或技术最为重要的两点，凡是脱离技术文档和开发工具看视频、看文章以及搜集再多的资料都是舍本求末的错误做法，而这也是很多初学者的一个通病。

值得注意的是小程序的开发功能更新非常频繁，很多网上的教程内容都比较过时，而只有技术文档才是同步最新的。无论你是初学者还是高手，技术文档都是我们技术开发的基础与落脚点，常读常新。

注册微信小程序

小程序的注册非常方便，打开小程序注册页面，按照要求填入个人的信息，验证邮箱和手机号，扫描二维码绑定你的微信号即可，3分钟左右的时间即可搞定。

注册页面：小程序注册页面

注册小程序时不能使用注册过微信公众号、微信开放平台的邮箱哦，也就是需要你使用一个其他邮箱才行。

当我们注册成功后，就可以自动登入到小程序的后台管理页面啦，如果你不小心关掉了后台页面，也可以点击小程序后台管理登录页进行登录。

后台管理页：小程序后台管理登录页

小程序和微信公众号的登录页都是同一个页面，他们会根据你的不同的注册邮箱来进行跳转。

进入到小程序的后台管理页后，点击左侧菜单的开发进入设置页，然后再点击开发设置，在开发者ID里就可以看到AppID(小程序ID)，这个待会我们有用。

注意小程序的ID（AppID）不是你注册的邮箱和用户名，你需要到后台查看才行哦~

到此处开始前的准备已完成

---

新建一个模板小程序

安装完开发者工具之后，我们使用微信扫码登录开发者工具，然后使用开发者工具新建一个小程序的项目

• 项目名称：这个可以根据自己的需要任意填写，可以是中文；

• 目录：大家需要先在电脑上新建一个空文件夹，然后选择这个空文件夹；

• AppID：就是之前我们找到的AppID(小程序ID)（也可以点击右边的下拉框，下拉选择AppID）

• 开发模式为小程序

• 后端服务选择不使用云服务，注意为了教学的需要，先选择不使用云服务

• 语言为JavaScript

点击新建确认之后就能在开发者工具的模拟器里看到一个简单的Hello World模板小程序，在编辑器里看到这个小程序的源代码。

分别点击开发者工具工具栏上的模拟器、编辑器、调试器，以及下面的手机下拉框、显示百分比，看看有什么效果。找到开发者工具的菜单栏，在项目菜单栏里找到查看所有项目，在设置菜单栏里找到外观设置，切换一下主题、调试器主题（深色、浅色）。

接下来，我们点击开发者工具的工具栏里的预览图标，就会弹出一个二维码，使用你的手机微信扫描这个二维码就能在微信里看到这个小程序啦。以后我们要自己开发一个小程序都可以按照上面的操作新建一个模板小程序，然后在这个的基础上修改开发。

如果你没有使用微信登录开发者工具，以及你的微信不是该小程序的开发者是没法预览的哦。这个Hello World模板小程序非常简单，但是它的文件结构却是完整的。

文件结构与页面组成

文件结构

1. app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等；
2. app.wxss：小程序的公共样式表，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等样式；
3. app.js：小程序的逻辑（这个可以先放着，不用管）
4. pages文件夹：这里存放着小程序的所有页面，展开pages文件夹就可以看到有index和logs两个页面文件夹；

小程序的根目录         
├── image  
│   ├── icon-tab1.png
│   ├── icon-tab1-active.png
├── pages 
├── utils 
├── app.js
├── app.json
├── app.wxss
├── project.config.json
├── sitemap.json

页面组成

在每一个页面文件夹里都有四个文件，这四个文件的名称都是一样的，它们分别为：

1. json文件，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；
2. wxml文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；
3. wxss文件，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；
4. js文件，这个是控制小程序页面的逻辑（这个可以先放着，不用管）

app.json可以对整个小程序进行全局配置，而配置的依据就需要我们参考技术文档了。
说直白点，把wxml当成xml文件，wxss当成css文件