移动Web应用开发学习笔记

1.http协议常用的请求方式是什么，有什么区别，http与https的默认端口是什么？

[!速记]
GET 用来查，POST 用来增，PUT 用来改（全量），PATCH 改一部分，DELETE 用来删。

常用的请求方式：常见的是GET，PUT，PATCH，OPTIONS，POST，DELETE，HARD
区别：GET是作用是查询服务器资源，从服务器获取资源，POST是作用是向服务器提交数据，创建服务器资源，PUT作用是替换服务器上的资源，PATCH作用是修改服务器资源的部分字段，DELETE作用是删除服务器资源，HARD作用是和 GET 一样，但不返回响应体，OPTIONS作用是查询服务器支持的请求方式
默认端口：http的端口默认是80，https的默认端口是443

2.请简述ReactNavite Flex box 布局

React Native 使用 Flexbox 作为默认布局方式，默认主轴方向为 column。通过 flexDirection、justifyContent、alignItems 控制子元素在主轴和交叉轴上的排列方式，使用 flex 属性按比例分配空间，适合多尺寸、多设备的自适应布局。

3.请简述git 工具的作用及介绍五个常用的git命令

[!速记]
Git 是一种分布式版本控制工具，用于管理项目代码的版本和协作开发。常用命令包括 git init、git status、git add、git commit 和 git push，分别用于仓库初始化、查看状态、添加文件、提交版本和推送代码。

Git 是一种分布式版本控制工具，主要用于对源代码和文件进行版本管理。
它可以记录文件的每一次修改历史，支持多人协作开发，方便代码的回退、分支管理以及合并操作，提高软件开发的效率和安全性。

git init

作用：初始化一个Git仓库，用于在当前目录创建 .git 目录，使其成为一个 Git 项目。

git status

作用：查看当前仓库状态，可以查看文件是否被修改、是否已暂存、是否未被 Git 管理。

git add 文件名
git add .

作用：将文件添加到暂存区，用于把工作区的修改加入到暂存区，为提交做准备。

git commit -m "提交说明"

作用：提交代码到本地仓库，将暂存区内容保存为一个新的版本记录。

git push origin main

作用：推送代码到远程仓库,用于将本地仓库的提交同步到远程仓库（如 GitHub、GitLab）。

4.请简述下 React Native 的 JSX语法，并且举一个JSX语法的示例
JSX（JavaScript XML） 是一种在 JavaScript 中编写类似 XML/HTML 结构的语法扩展。
在 React Native 中，JSX 用来描述界面结构，将 UI 与逻辑结合在一起，最终会被编译成普通的 JavaScript 代码。
JSX 的主要特点包括：

使用类似 HTML 的标签来描述界面
可以在 {} 中嵌入 JavaScript 表达式
标签必须闭合
组件名必须以 大写字母开头
使用 JSX 可以提高代码的可读性和维护性
示例：

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const name = "React Native";

  return (
    <View>
      <Text>Hello {name}!</Text>
    </View>
  );
}

5.移动web应用项目中App.vue、main.js、manifest.json、pages.json几个文件作用

[!速记]
main.js 启动应用，挂载 App.vue；App.vue 是全局入口组件，负责页面显示和全局逻辑；manifest.json 定义应用基本信息和打包配置；pages.json 定义页面路由和窗口样式，是页面导航的核心。

1️⃣ `App.vue`

作用：项目的全局入口组件

定义整个应用的布局框架和全局样式
可以在这里挂载全局组件或配置全局状态
负责控制页面之间的跳转和生命周期
典型内容：

<template>
  <view>
    <slot></slot> <!-- 页面显示位置 -->
  </view>
</template>

<script>
export default {
  onLaunch() { /* 应用启动生命周期 */ },
  onShow() { /* 应用显示 */ }
}
</script>

<style>
/* 全局样式 */
</style>

2️⃣ `main.js`

作用：项目的入口脚本文件

用来初始化应用实例
将 App.vue 挂载到应用
配置全局插件、状态管理、路由等
典型内容：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const app = new Vue({
  ...App
})
app.$mount()

可以理解为 程序启动的第一行 JS，决定整个应用如何加载。

3️⃣ `manifest.json`

作用：应用的全局配置文件

定义应用基本信息，如：
- 应用名称、版本、图标
- 打包平台（H5、iOS、Android、微信小程序等）
- 权限配置（定位、相机等）
打包工具和框架会根据此文件生成平台对应的原生配置
典型字段：

{
  "name": "my-app",
  "appid": "__UNI__XXXX",
  "versionName": "1.0.0",
  "app-plus": {
    "distribute": {
      "android": {},
      "ios": {}
    }
  }
}

简单理解：告诉打包系统你的 App 是什么、怎么运行的。

4️⃣ `pages.json`

作用：页面路由和窗口配置文件

定义项目的页面路径和顺序
配置每个页面的窗口样式（导航栏、标题、背景色等）
控制 tabBar、分包加载、路由跳转等
典型内容：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/about/about",
      "style": {
        "navigationBarTitleText": "关于"
      }
    }
  ],
  "globalStyle": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  },
  "tabBar": { /* 底部 tab 配置 */ }
}

6.vuex的五大核心属性有哪些? 有什么作用

[!速记]
Vuex 通过 State 存储状态，通过 Getter 派生状态，通过 Mutation 同步修改状态，通过 Action 处理异步逻辑，最后通过 Module 实现状态的模块化管理。

Vuex 是 Vue 的状态管理工具，其五大核心属性分别是：

State、Getter、Mutation、Action、Module

1️⃣ State（状态）

作用：存储应用的共享状态数据

类似组件中的 data
用于保存多个组件需要共同使用的数据

state: {
  count: 0
}

2️⃣ Getter（派生状态）

作用：对 State 中的数据进行计算和过滤

类似组件中的 computed
不直接修改 state

getters: {
  doubleCount: state => state.count * 2
}

3️⃣ Mutation（同步修改）

作用：唯一允许修改 State 的方式

必须是同步操作
用于状态变更的记录和追踪

mutations: {
  increment(state) {
    state.count++
  }
}

4️⃣ Action（异步操作）

作用：处理异步逻辑，最终提交 Mutation

可以包含异步代码（如接口请求）
不直接修改 State

actions: {
  asyncIncrement({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

5️⃣ Module（模块化）

作用：将 Store 拆分成多个模块，便于管理

每个模块拥有自己的 state、mutation、action、getter
适合大型项目

modules: {
  user,
  cart
}

7.请简述 Promise 语法作用及特点，并且举一个使用Promise的示例

Promise 是 JavaScript 中用于处理异步操作的对象，它可以将异步操作的结果（成功或失败）以一种更清晰、可控的方式表示出来，避免传统回调函数造成的"回调地狱"，提高代码的可读性和可维护性。

特点：

三种状态
- pending（进行中）
- fulfilled（已成功）
- rejected（已失败）
状态不可逆
- 状态一旦从 pending 变为 fulfilled 或 rejected，就不能再改变
支持链式调用
- 通过 .then() 实现连续的异步操作
- 通过 .catch() 统一处理错误
将异步逻辑与回调分离
- 逻辑更加清晰，避免嵌套回调

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("操作成功");
    } else {
      reject("操作失败");
    }
  }, 1000);
});

promise
  .then(result => {
    console.log(result); // 操作成功
  })
  .catch(error => {
    console.log(error); // 操作失败
  });

8.用于描述尺寸单位的rpx、px、em、%、vh、vw有何区别

px 是绝对单位，rpx 根据屏幕宽度自适应；em 和 % 是相对单位，分别相对于字体大小和父元素；vh 和 vw 相对于视口大小，常用于响应式和全屏布局。

9.uniapp页面的生命周期方法有哪些，各自有何作用

[!速记]
uni-app 页面生命周期用于控制页面从加载、显示、渲染到卸载的全过程，其中 onLoad 用于初始化，onShow 用于刷新，onReady 用于页面渲染完成后的操作，onHide 和 onUnload 用于资源释放和状态清理。

uni-app 的页面生命周期主要分为 应用生命周期 和 页面生命周期，实际开发中最常用的是页面生命周期。

生命周期	触发时机	常见用途
onLoad	页面加载	初始化数据、接收参数
onShow	页面显示	刷新数据
onReady	首次渲染完成	DOM 操作
onHide	页面隐藏	暂停操作
onUnload	页面卸载	清理资源
10.列举uniapp跳转不同页面的方式以及区别

[!速记]
uni-app 通过 navigateTo、redirectTo、switchTab 和 reLaunch 实现页面跳转，其中 navigateTo 会保留当前页面，redirectTo 会关闭当前页面，switchTab 用于 tabBar 页面跳转，reLaunch 用于重置页面栈。

uni-app 提供了 4 种主要的页面跳转方式，每种方式的使用场景和限制不同。

1️⃣ `uni.navigateTo`

作用：跳转到非 tabBar 页面（保留当前页面）

当前页面 不会被销毁
页面栈 +1（最多 10 层）
可返回

uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})

适用场景：
👉 详情页、普通页面跳转

2️⃣ `uni.redirectTo`

作用：重定向到非 tabBar 页面（关闭当前页面）

当前页面 会被销毁
页面栈不增加
不可返回原页面

uni.redirectTo({
  url: '/pages/login/login'
})

适用场景：
👉 登录页、权限页

3️⃣ `uni.switchTab`

作用：跳转到 tabBar 页面

只能跳转到 pages.json 中配置的 tabBar 页面
会关闭所有非 tabBar 页面
不支持传参

uni.switchTab({
  url: '/pages/home/home'
})

适用场景：
👉 首页、分类、个人中心

4️⃣ `uni.reLaunch`

作用：关闭所有页面，重新打开一个页面

页面栈清空，只保留一个页面
可以跳转到 tabBar 或普通页面

uni.reLaunch({
  url: '/pages/index/index'
})

适用场景：
👉 退出登录、重置应用状态

移动Web应用开发学习笔记

1️⃣ App.vue

2️⃣ main.js

3️⃣ manifest.json

4️⃣ pages.json