2024年最全微信小程序入门解读-①_miniprogram-demo，2024年最新四轮面试完后希望大吗

基础学习：

前端最基础的就是 HTML , CSS 和 JavaScript 。

网页设计：HTML和CSS基础知识的学习

HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。

动态交互：JavaScript基础的学习

JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。

导入时，需要给小程序起一个名字，并且填写项目代码所在的目录，以及前面申请的 AppID。

五、 hello world 示例

下面，就请大家动手，跟着写一个最简单的小程序，只要五分钟就能完成。

第一步，新建一个小程序的项目目录。名字可以随便起，这里称为**wechat-miniprogram-demo**。

你可以在资源管理器里面，新建目录。如果熟悉命令行操作，也可以打开 Windows Terminal（没有的话，需要安装），在里面执行下面的命令，新建并进入该目录。

> mkdir wechat-miniprogram-demo
> cd wechat-miniprogram-demo

第二步，在该目录里面，新建一个脚本文件**app.js**。这个脚本用于对整个小程序进行初始化。

**app.js**内容只有一行代码。

App({});

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

第三步，新建一个配置文件**app.json**，记录项目的一些静态配置。

**app.json**采用 JSON 格式。JSON 是基于 JavaScript 语言的一种数据交换格式，只有五条语法规则，非常简单，不熟悉 JSON 的同学可以参考这篇教程。

**app.json**文件的内容，至少必须有一个pages属性，指明小程序包含哪些页面。

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

上面代码中，**pages**属性是一个数组，数组的每一项就是一个页面。这个示例中，小程序只有一个页面，所以数组只有一项pages/home/home。

**pages/home/home**是一个三层的文件路径。

1. 所有页面都放在**pages**子目录里面。
2. 每个页面有一个自己的目录，这里是**pages**下面的home子目录，表示这个页面叫做home。页面的名字可以随便起，只要对应的目录确实存在即可。
3. 小程序会加载页面目录**pages/home里面的home.js文件，.js后缀名可以省略，所以完整的加载路径为pages/home/home。****home.j**s这个脚本的文件名也可以随便起，但是习惯上跟页面目录同名。

第四步，新建**pages/home**子目录。

$ mkdir -p pages/home

然后，在这个目录里面新建一个脚本文件**home.js**。该文件的内容如下。

hello world

到这一步，就算基本完成了。现在，打开小程序开发工具，导入项目目录**wechat-miniprogram-demo**。如果一切正常，就可以在开发者工具里面，看到运行结果了。

点击工具栏的"预览"或"真机调试"按钮，还可以在你的手机上面，查看真机运行结果。

这个示例的完整代码，可以到代码仓库查看。

六、WXML 标签语言

上一节的**home.wxml文件，只写了最简单的一行hello world**。实际开发中，不会这样写，而是要加上各种标签，以便后面添加样式和效果。

小程序的 WXML 语言提供各种页面标签。下面，对**home.wxml**改造一下，加上两个最常用的标签。

<view>
  <text>hello world</text>
</view>

上面的代码用到了两个标签：<view>和<text>。

**<view>标签表示一个区块，用于跟其他区块分隔，类似 HTML 语言的<div>标签。<text>表示一段行内文本，类似于 HTML 语言的<span>标签，多个<text>**标签之间不会产生分行。

注意，每个标签都是成对使用，需要有闭合标记，即标签名前加斜杠表示闭合，比如**<view>的闭合标记是</view>**。如果缺少闭合标记，小程序编译时会报错。

由于我们还没有为页面添加任何样式，所以页面的渲染效果跟上一节是一样的。后面添加样式时，大家就可以看到标签的巨大作用。

七、小程序的项目结构

总结一下，这个示例一共有4个文件，项目结构如下。

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

这就是最简单、最基本的小程序结构。所有的小程序项目都是这个结构，在上面不断添加其他内容。

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

八、项目配置文件 app.json

顶层的**app.json**文件用于整个项目的配置，对于所有页面都有效。

除了前面提到的必需的**pages属性，app.json文件还有一个window属性，用来设置小程序的窗口。window**属性的值是一个对象，其中有三个属性很常用。

* navigationBarBackgroundColor：导航栏的颜色，默认为#000000（黑色）。
* navigationBarTextStyle：导航栏的文字颜色，只支持black（黑色）或white（白色），默认为white。
* navigationBarTitleText：导航栏的文字，默认为空。

下面，改一下前面的**app.json，加入window**属性。

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

上面代码中，**window**属性设置导航栏的背景颜色为红色（#ff0000），文本颜色为白色（white），标题文字为"小程序 Demo"。

开发者工具导入项目代码，就可以看到导航栏变掉了。

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】