第3节：微信小程序之hello world
前面我们讲解了准备工作，也了解了如何下载微信开发者工具以及他的安装，这里默认大家都已经这个开发者工具已经安装完成了
如何使用
小程序开发工具打开后，选择左上角的项目，然后选择新建项目后出现如下图所示的弹窗
（什么鬼，微信开发者工具建项目的页面截图也违规？）
如图所示，根据开发工具的指引，一步一步的填写内容即可！
我们在目录出选择我们要存储项目的目录，然后填写我们自己的项目名称。
AppID就是我们之前注册的小程序的appID，默认选择小程序，并且不使用云开发（稍微有点复杂），然后模板选择我们第二个JavaScript基础模板即可！最后点击确定完成
不知道appID的同学可以看过来了：登录我们小程序后台，左侧最下方的设置，点进去下拉到账号信息即可看到我们小程序的AppID了！
查看一下新创建的项目运行后的效果图嘛？来吧！（当然，你可以暂时忽略上方这个助手管家，后续会知道在哪里配置的。）
认识工具
接下来我们认识一下微信开发者工具的各个区域：
在右侧详情中，我们可以看到我们具体的一下配置及信息
第一个小程序（Hello world）
新创建的项目就是一个hello world的模板，我们来看一下，具体代码
data: {motto: 'Hello World',userInfo: {},hasUserInfo: false,canIUse: wx.canIUse('button.open-type.getUserInfo'),canIUseGetUserProfile: false,canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false},此处我们关注在js中定义了变量motto为Hello World，字wxml文件中通过获取变量motto展示了Hello World
{{motto}} 这便是我们第一个微信小程序的基本内容， 其他的获取头像的代码暂且忽略不计。因为真正用的时候这样也获取不到信息了。
原因：微信不知道搞什么鬼，对获取用户头像，昵称的接口总是那么纠结，放开了关闭，关闭了有一另一种方式放开，每隔一段时间就会搞一次事情。让人哭笑不得！所以，大家尽可忽略他这个获取头像和昵称的代码！毕竟已经停用了！
认识项目结构
你可以留意到这个项目里边生成了不同类型的文件:
.json后缀的JSON配置文件.wxml后缀的WXML模板文件.wxss后缀的WXSS样式文件.js后缀的JS脚本逻辑文件
从下方的目录结构中，我们可以看到，的几个文件，那么他们是什么含义呢？
json
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
这里说一下小程序里JSON配置的一些注意事项。
JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
- 数字，包含浮点数和整数
- 字符串，需要包裹在双引号中
- Bool值，true 或者 false
- 数组，需要包裹在方括号中 []
- 对象，需要包裹在大括号中 {}
- Null
还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
wxml
从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
wxss
WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
-
新增了尺寸单位。在写
CSS样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS在底层支持新的尺寸单位rpx，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。 -
提供了全局的样式和局部样式。和前边
app.json,page.json的概念相同，你可以写一个app.wxss作为全局样式，会作用于当前小程序的所有页面，局部页面样式page.wxss仅对当前页面生效。 -
此外
WXSS仅支持部分CSS选择器
js
一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。
app.js
小程序全局js配置
app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
app.wxss
小程序全局样式
project.config.json
通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
总结
对一个刚刚接触微信小程序的开发者来说，这款微信开发者工具可能会比较陌生，但是大家尽可以放轻松，毕竟他只是一个工具，就像我们刚刚接触其他的开发工具一样。总有一个熟悉的过程。
当你开发完成一款属于你的小程序，回过头来一看这就是一个为你工作的工具而已，从无到有。就是一个熟练使用的过程！
好了，今天的分享就到这里，欢迎大家点击下方的卡片，关注《coder练习生》