小程序之二：HelloWorld

学习教程：https://www.ruanyifeng.com/blog/2020/10/wechat-miniprogram-tutorial-part-one.html

跟着阮一峰老师的教程写个最简单的hello world：

1、新建项目目录wechat-miniprogram-demo，进入项目目录

2、在项目目录中，新建脚本app.js。这个脚本用于对整个小程序进行初始化。

App({});

上面代码中，App()由小程序原生提供，它是一个函数，表示新建一个小程序实例。它的参数是一个配置对象，用于设置小程序实例的行为属性。这个例子不需要任何配置，所以使用空对象即可。

3、在项目目录中，新建配置文件app.json，记录项目的一些静态配置，采用 JSON 格式。至少必须有一个pages属性，指明小程序包含哪些页面。

{
  "pages": [
    "pages/home/home"
  ]
}

小程序会加载页面目录pages/home里面的home.js文件，.js后缀名可以省略，所以完整的加载路径为pages/home/home。home.js这个脚本的文件名也可以随便起，但是习惯上跟页面目录同名。

除了pages属性，还可以加上window属性，定义最上方的导航栏的属性，如：

{
  "pages": [
    "pages/home/home"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff0000",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "小程序 Demo"     
  }
}

比如还有tabBar属性，定制底部选项卡的属性。

4、新建脚本pages/home/home.js，内容如下：

Page({});

上面代码中，Page()由小程序原生提供，它是一个函数，用于初始化一个页面实例。它的参数是一个配置对象，用于设置当前页面的行为属性。这里是一个空对象，表示不设置任何属性。

5、新建脚本pages/home/home.wxml，用于描述小程序的页面。

hello world

6、一个最简单的项目就完成啦。现在导入小程序开发工具看看。

也可以点击“预览”或“真机调试”，扫描二维码在手机上查看效果

小程序项目基础结构

|- app.json
|- app.js
|- pages
   |- home
      |- home.wxml
      |- home.js

这个结构分成两层：描述整体程序的顶层 app 脚本，以及描述各个页面的 page 脚本。