UniApp面试题

最新推荐文章于 2025-06-28 22:16:17 发布

原创最新推荐文章于 2025-06-28 22:16:17 发布 · 498 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #面试

1、UniApp是什么

UniApp是一个使用vue.js开发的跨平台框架，可以编译到ios、安卓、H5等各种小程序（微信，支付宝等）。

特点：一次开发，多端部署，支持丰富的组件和api。

2、UniApp的页面生命周期是？

onLoad：页面加载时触发。
onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。

3、UniApp中如何处理异步数据请求？

使用uni.request方法进行HTTP请求。

举例代码：

uni.request({
   
  url: 'https://yuedata.net/data' //接口地址
  method: 'GET',
  success: (res) => {
   
    console.log(res.data);
  },
  fail: (err) => {
   
    console.error(err);
  }
});

4、UniApp中数据如何绑定？

UniApp使用Vue.js的响应式数据绑定，通过data属性定义数据，使用{{ }}语法在模板中引用。

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

<script>
export default {
  data() {
    return {
      message: 'Hello, UniApp!'
    }
  }
}
</script>

5、UniApp的项目结构是怎样的？

src：存放源代码，包括页面、组件、静态资源等。
pages：存放页面文件，每个页面通常有一个对应的 .vue 文件。
components：存放自定义组件。
static：存放静态资源，如图片、字体等。
uni.scss：全局样式文件，可以在此定义全局样式变量。

6、UniApp中如何创建自定义组件？

在components目录下创建一个.vue文件，使用<template>、<script>和<style>标签定义组件。使用props和emit来实现父子组件之间的通信。

<template>
  <view>{
  { msg }}</view>
</template>

<script>
export default {
  props: {
    msg: String
  }
}
</script>

7、UniApp中如何进行页面跳转？

uni.navigateTo:实现页面的普通跳转。

uni.redirectTo：实现页面的重定向跳转

uni.reLaunch：实现关闭所有页面，打开到应用内的某个页面

8、UniApp中如何进行数据缓存？

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

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

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

9、UniApp中如何使用组件？

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

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

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

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

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

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

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

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

11、UniApp中如何进行微信支付？

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

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

12、UniApp中如何获取用户地理位置信息？

uni.getLocation方法

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

13、UniApp中如何进行音频的播放和控制？

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

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

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

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

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

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

14、UniApp中如何获取设备信息?

uni.getSystemInfo方法获取设备信息，包括设备型号、操作系统版本等。

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

15、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>

16、UniApp中如何实现页面间的数据传递？

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

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

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

17、UniApp中如何实现图片预览功能？

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

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

18、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('表单验证通过');
}

19、UniApp中如何实现页面的分享功能？

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

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

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

20、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);
  }
});

21、UniApp中如何实现页面的转发功能？

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

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

22、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'
  };
});