第3节：微信小程序之hello world_微信小程序 hello world-优快云博客

本文链接：https://blog.youkuaiyun.com/ybb_ymm/article/details/129704476

前面我们讲解了准备工作，也了解了如何下载微信开发者工具以及他的安装，这里默认大家都已经这个开发者工具已经安装完成了

如何使用

小程序开发工具打开后，选择左上角的项目，然后选择新建项目后出现如下图所示的弹窗

（什么鬼，微信开发者工具建项目的页面截图也违规？）

如图所示，根据开发工具的指引，一步一步的填写内容即可！

我们在目录出选择我们要存储项目的目录，然后填写我们自己的项目名称。

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

 <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>

这便是我们第一个微信小程序的基本内容，其他的获取头像的代码暂且忽略不计。因为真正用的时候这样也获取不到信息了。

原因：微信不知道搞什么鬼，对获取用户头像，昵称的接口总是那么纠结，放开了关闭，关闭了有一另一种方式放开，每隔一段时间就会搞一次事情。让人哭笑不得！所以，大家尽可忽略他这个获取头像和昵称的代码！毕竟已经停用了！

认识项目结构

你可以留意到这个项目里边生成了不同类型的文件:

.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，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。