uniapp 面试题

1. 什么是 UniApp？它有什么特点？

答案：UniApp 是一个基于 Vue.js 的跨平台应用开发框架，可以使用 Vue.js 的开发语法编写一次代码，然后通过编译生成可以在多个平台（包括iOS、Android、H5 等）上运行的应用。UniApp 具有以下特点：

1. 跨平台：开发者可以使用相同的代码基底构建多个平台的应用，避免了针对不同平台的重复开发。
2. 高性能：UniApp 在运行时使用原生渲染技术，具有接近原生应用的性能表现。
3. 开放生态：UniApp 支持原生插件和原生能力的扩展，可以调用设备的硬件功能和第三方原生 SDK。
4. 开发便捷：UniApp 提供了丰富的组件和开发工具，简化了应用开发和调试的流程。

2. 请解释 UniApp 中的生命周期钩子函数及其执行顺序。

答案：在 UniApp 中，每个页面和组件都有一系列的生命周期钩子函数，用于在特定的时机执行代码。以下是 UniApp 中常用的生命周期钩子函数及其执行顺序：

onLoad：页面/组件加载时触发。

onShow：页面/组件显示在前台时触发。

onReady：页面/组件初次渲染完成时触发。

onHide：页面/组件被隐藏在后台时触发。

onUnload：页面/组件被销毁时触发。

执行顺序为：onLoad -> onShow -> onReady -> onHide -> onUnload。

3. 请解释 UniApp 中的全局组件和页面组件的区别。

答案：在 UniApp 中，全局组件和页面组件是两种不同类型的组件。

全局组件：在 App.vue 中注册的组件，可以在应用的所有页面和组件中使用。可以通过 Vue.component 方法进行全局注册。

页面组件：每个页面都有自己的组件，用于描述页面的结构和交互。页面组件只在当前页面有效，不能在其他页面中直接使用，但可以通过组件引用的方式进行复用。

4. 请解释 UniApp 中的条件编译是如何工作的。

答案：UniApp 中的条件编译允许开发者根据不同的平台或条件编译指令来编写不同的代码。在编译过程中，指定的平台或条件将会被处理，并最终生成对应平台的可执行代码。条件编译通过在代码中使用 #ifdef、#ifndef、#endif 等指令进行控制。例如，可以使用 #ifdef H5 来编写只在 H5 平台生效的代码块。

5. 请解释 UniApp 中的跨平台兼容性问题和解决方案。

答案：由于不同平台的差异，UniApp 在跨平台开发时可能会遇到一些兼容性问题。为了解决这些问题，可以采取以下几个方面的策略：

1. 使用条件编译：根据不同的平台，编写对应平台的代码，使用条件编译指令来控制代码块的执行。
2. 使用平台 API：UniApp 提供了一些平台 API，可以通过条件编译指令来使用特定平台的功能和能力。
3. 样式适配：不同平台的样式表现可能有差异，使用 uni-app-plus 插件中的 upx2px 方法来进行样式适配，使得在不同平台上显示一致。
4. 原生扩展：使用原生插件和扩展来调用设备的原生功能和第三方 SDK，以解决特定平台的需求。

uniApp中如何进行页面跳转？

答案：可以使用uni.navigateTo、uni.redirectTo和uni.reLaunch等方法进行页面跳转。其中，uni.navigateTo可以实现页面的普通跳转，uni.redirectTo可以实现页面的重定向跳转，uni.reLaunch可以实现关闭所有页面，打开到应用内的某个页面。

// 在某个页面的点击事件中跳转到其他页面
uni.navigateTo({
  url: '/pages/otherPage/otherPage'
});

uniApp中如何进行数据绑定？

答案：可以使用双花括号{{}}进行数据绑定，将数据动态展示在页面上

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniApp'
    };
  }
};
</script>

uniApp中如何发送网络请求？

答案：可以使用uni.request方法发送网络请求，通过设置url、method、data等参数来实现不同的请求

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

uniApp中如何进行数据缓存？

答案：可以使用uni.setStorageSync方法进行数据缓存，将数据存储到本地缓存中。

// 存储数据到本地缓存
uni.setStorageSync('key', 'value');

// 从本地缓存中读取数据
const data = uni.getStorageSync('key');
console.log(data); // 输出：value

uniApp中如何使用组件？

答案：可以在页面中引入组件，并在components属性中注册组件，然后在页面中使用。

<template>
  <view>
    <my-component></my-component>
  </view>
</template>

<script>
import myComponent from '@/components/myComponent.vue';

export default {
  components: {
    myComponent
  }
};
</script>

uniApp中如何实现下拉刷新和上拉加载更多？

答案：可以使用uni.onPullDownRefresh方法实现下拉刷新，使用uni.onReachBottom方法实现上拉加载更多。

// 在页面的onPullDownRefresh方法中实现下拉刷新
onPullDownRefresh() {
  // 执行刷新操作
  console.log('下拉刷新');
  // 刷新完成后调用uni.stopPullDownRefresh()方法停止刷新
  uni.stopPullDownRefresh();
}

// 在页面的onReachBottom方法中实现上拉加载更多
onReachBottom() {
  // 执行加载更多操作
  console.log('上拉加载更多');
}

uniApp中如何获取用户地理位置信息？

答案：可以使用uni.getLocation方法获取用户的地理位置信息。

uni.getLocation({
  success: (res) => {
    console.log(res.latitude, res.longitude);
  },
  fail: (err) => {
    console.error(err);
  }
});

uniApp中如何进行微信支付？

答案：可以使用uni.requestPayment方法进行微信支付，通过设置支付参数来实现支付功能。

示例代码：

uni.requestPayment({
  provider: 'wxpay',
  timeStamp: '1234567890',
  nonceStr: 'abcdefg',
  package: 'prepay_id=1234567890',
  signType: 'MD5',
  paySign: 'abcdefg',
  success: (res) => {
    console.log(res);
  },
  fail: (err) => {
    console.error(err);
  }
});

uniApp中如何进行音频的播放和控制？

答案：可以使用uni.createInnerAudioContext方法创建音频实例，通过调用实例的方法来实现音频的播放和控制。

示例代码：

// 创建音频实例
const audio = uni.createInnerAudioContext();

// 设置音频资源
audio.src = 'http://example.com/audio.mp3';

// 播放音频
audio.play();

// 暂停音频
audio.pause();

// 停止音频
audio.stop();

uniApp中如何进行图片的懒加载？

答案：可以使用uni.lazyLoadImage组件实现图片的懒加载，将图片的src属性设置为需要加载的图片地址。

示例代码：

<template>
  <view>
    <uni-lazy-load-image src="http://example.com/image.jpg"></uni-lazy-load-image>
  </view>
</template>

<script>
export default {
  components: {
    'uni-lazy-load-image': '@/components/uniLazyLoadImage.vue'
  }
};
</script>

当然可以！以下是另外十道uniApp常见面试题的答案和详细代码说明：

uniApp中如何实现页面跳转？

答案：可以使用uni.navigateTo方法实现页面跳转，通过设置url参数来指定跳转的页面路径。

示例代码：

uni.navigateTo({
  url: '/pages/detail/detail'
});

uniApp中如何获取设备信息？

答案：可以使用uni.getSystemInfo方法获取设备信息，包括设备型号、操作系统版本等。

示例代码：

uni.getSystemInfo({
  success: (res) => {
    console.log(res.model, res.system);
  },
  fail: (err) => {
    console.error(err);
  }
});

uniApp中如何实现页面间的数据传递？

答案：可以使用uni.navigateTo方法的url参数中添加query参数来实现页面间的数据传递。

示例代码：

// 页面A跳转到页面B，并传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=123'
});

// 在页面B中获取传递的参数
export default {
  onLoad(options) {
    console.log(options.id); // 输出：123
  }
};

uniApp中如何实现图片预览功能？

答案：可以使用uni.previewImage方法实现图片预览功能，通过设置urls参数来指定要预览的图片地址。

示例代码：

uni.previewImage({
  urls: ['http://example.com/image1.jpg', 'http://example.com/image2.jpg']
});

uniApp中如何实现页面的下拉刷新和上拉加载更多？

答案：可以使用uni.onPullDownRefresh方法实现页面的下拉刷新，使用uni.onReachBottom方法实现页面的上拉加载更多。

示例代码：

// 在页面的onPullDownRefresh方法中实现下拉刷新
onPullDownRefresh() {
  // 执行刷新操作
  console.log('下拉刷新');
  // 刷新完成后调用uni.stopPullDownRefresh()方法停止刷新
  uni.stopPullDownRefresh();
}

// 在页面的onReachBottom方法中实现上拉加载更多
onReachBottom() {
  // 执行加载更多操作
  console.log('上拉加载更多');
}

uniApp中如何实现表单的提交和验证？

答案：可以使用uni.request方法发送表单数据，使用正则表达式或内置的验证方法对表单进行验证。

示例代码：

// 表单提交
uni.request({
  url: 'https://api.example.com/submit',
  method: 'POST',
  data: {
    username: 'admin',
    password: '123456'
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.error(err);
  }
});

// 表单验证
const username = 'admin';
const password = '123456';

if (!username || !password) {
  console.log('用户名和密码不能为空');
} else if (username.length < 6 || username.length > 20) {
  console.log('用户名长度必须为6-20个字符');
} else if (password.length < 6 || password.length > 20) {
  console.log('密码长度必须为6-20个字符');
} else {
  console.log('表单验证通过');
}

uniApp中如何实现页面的分享功能？

答案：可以使用uni.showShareMenu方法开启页面的分享功能，使用uni.onShareAppMessage方法设置分享的标题、路径等。

示例代码：

// 开启页面的分享功能
uni.showShareMenu();

// 设置分享的标题、路径等
uni.onShareAppMessage(() => {
  return {
    title: '分享标题',
    path: '/pages/index/index'
  };
});

uniApp中如何实现页面的转发功能？

答案：可以使用uni.share方法实现页面的转发功能，通过设置title、path等参数来指定转发的标题和路径。

示例代码：

uni.share({
  title: '转发标题',
  path: '/pages/index/index'
});

uniApp中如何实现页面的登录授权？

答案：可以使用uni.login方法获取用户登录凭证，然后将凭证发送到后端进行验证，根据验证结果来判断用户是否登录。

示例代码：

// 获取用户登录凭证
uni.login({
  success: (res) => {
    const code = res.code;
    // 将凭证发送到后端进行验证
    uni.request({
      url: 'https://api.example.com/login',
      method: 'POST',
      data: {
        code: code
      },
      success: (res) => {
        console.log(res.data);
        // 根据验证结果来判断用户是否登录
        if (res.data.success) {
          console.log('用户已登录');
        } else {
          console.log('用户未登录');
        }
      },
      fail: (err) => {
        console.error(err);
      }
    });
  },
  fail: (err) => {
    console.error(err);
  }
});

uniApp中如何实现页面的分享到朋友圈功能？

答案：可以使用uni.showShareMenu方法开启页面的分享功能，然后使用uni.share方法设置分享的标题、路径等。

示例代码：

// 开启页面的分享功能
uni.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
});

// 设置分享的标题、路径等
uni.onShareAppMessage(() => {
  return {
    title: '分享标题',
    path: '/pages/index/index'
  };
});

uni.onShareTimeline(() => {
  return {
    title: '分享标题',
    path: '/pages/index/index'
  };
});

Uniapp 中常用的指令语句

v-for：循环渲染 （注意加：key）

v-if ：控制元素的删除添加

v-show：控制元素的显示隐藏

v-model：双向数据绑定

v-on：事件绑定（简写@）

v-bind：属性绑定（简写：）

Uniapp 中常见的组件(说几个即可)

view：视图容器。

属性名 类型 默认值 说明

hover-class String none 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果

hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）

hover-start-time Number 50 按住后多久出现点击态，单位毫秒

hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒

icon：图标

Uniapp 应用的生命周期、页面的生命周期、组件的生命周期.

一、应用的生命周期

1.onLaunch------当uni-app 初始化完成时触发（全局只触发一次）

2.onShow------当 uni-app 启动，或从后台进入前台显示

3.onHide------当 uni-app 从前台进入后台

4.onError------当 uni-app 报错时触发

5.onUniNViewMessage------对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

6.onUnhandledRejection------对未处理的 Promise 拒绝事件监听函数（2.8.1+）

7.onPageNotFound------页面不存在监听函数

8.onThemeChange------监听系统主题变化

二、页面的生命周期

1.onInit------监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad

2.onLoad------监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例

3.onShow------监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面

4.onReady------监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发

5.onHide------监听页面隐藏

6.onUnload------监听页面卸载

7.onResize------监听窗口尺寸变化

三、组件的生命周期

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同

1.beforeCreate------在实例初始化之后被调用。

2.created------在实例创建完成后被立即调用。

3.beforeMount------在挂载开始之前被调用。

4.mounted------挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档

5.beforeUpdate------数据更新时调用，发生在虚拟 DOM 打补丁之前。

6.updated------由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7.beforeDestroy------实例销毁之前调用。在这一步，实例仍然完全可用。

8.destroyed------Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。