刷刷题33(uniapp初级实际项目问题-2)

1. Uniapp 中如何定义全局样式?

App.vue<style> 标签中编写全局样式,或通过 uni.scss 文件定义全局 SCSS 变量(需在 vue.config.js 中配置)。全局样式会作用于所有页面。

2. 如何监听页面的滚动事件?

在页面中使用 onPageScroll 生命周期函数:

javascript 复制代码
onPageScroll(e) {
  console.log('滚动距离:', e.scrollTop);
}

注意:频繁触发时需做防抖/节流处理。

3. Uniapp 的路由配置存放在哪里?如何新增一个页面?

路由配置在 pages.jsonpages 数组中。新增页面需在 pages 数组中添加路径:

json 复制代码
{
  "pages": [
    { "path": "pages/home/home", "style": { ... } },
    { "path": "pages/newPage/newPage", "style": { ... } }
  ]
}

4. Uniapp 中如何实现数据双向绑定?

使用 v-model 指令(与 Vue.js 一致):

xml 复制代码
<input v-model="message" />
<script>
export default {
  data() {
    return { message: 'Hello' };
  }
}
</script>

5. 如何修改导航栏标题和样式?

pages.json 中通过 navigationBarTitleTextnavigationBarTextStyle 配置:

json 复制代码
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#007AFF"
      }
    }
  ]
}

6. 如何实现下拉刷新和上拉加载更多?

  • 下拉刷新 ‌:在页面配置中开启 enablePullDownRefresh,使用 onPullDownRefresh 监听事件。
  • 上拉加载 ‌:通过 onReachBottom 监听页面触底事件,手动加载更多数据。

7. Uniapp 中如何上传文件或图片?

使用 uni.chooseImage 选择图片,再通过 uni.uploadFile 上传:

javascript 复制代码
uni.chooseImage({
  success: (res) => {
    uni.uploadFile({
      url: 'https://api.example.com/upload',
      filePath: res.tempFilePaths,
      name: 'file',
      success: (uploadRes) => { console.log(uploadRes.data); }
    });
  }
});

8. 如何处理不同平台的 API 差异?例如,H5 和小程序的支付接口不同。

使用 ‌条件编译 ‌ 或 ‌平台判断‌:

scss 复制代码
// 条件编译
// #ifdef H5
h5Payment();
// #endif

// #ifdef MP-WEIXIN
wxPayment();
// #endif

// 或运行时判断
if (uni.getSystemInfoSync().platform === 'h5') {
  h5Payment();
}

9. 如何调试 Uniapp 应用?如何解决真机调试时的常见问题?

  • 调试工具‌:H5 端用浏览器开发者工具,小程序用对应平台的 IDE(如微信开发者工具)。
  • 真机调试‌:通过 HbuilderX 的"真机运行"功能,确保手机和电脑在同一网络,并开启 USB 调试模式。
  • 常见问题‌:检查端口占用、证书信任问题或网络权限。

10. 在 Uniapp 中如何获取设备信息?

使用 uni.getSystemInfoSync() 或异步方法 uni.getSystemInfo()

arduino 复制代码
const systemInfo = uni.getSystemInfoSync();
console.log('设备型号:', systemInfo.model);
console.log('系统版本:', systemInfo.system);
相关推荐
不能只会打代码14 分钟前
六十天前端强化训练之第十七天React Hooks 入门:useState 深度解析
前端·javascript·react.js
何包蛋H23 分钟前
分享vue好用的pdf 工具实测
javascript·vue.js·pdf
PagiHi29 分钟前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js
曾富贵41 分钟前
【eslint 插件】导入语句排序
前端·eslint
NaZiMeKiY1 小时前
HTML5前端第八章节
前端·html·html5
远之喵1 小时前
js基础知识-考点
前端
SuperHua10011 小时前
还在用Pyinstaller打包python?试试轻量级的LightCode吧!
javascript·python
如此风景1 小时前
TS装饰器
前端
鱼樱前端1 小时前
React完整学习指南:从入门到精通(从根class->本hooks)16-19完整对比
前端·react.js
紫琪软件工作室1 小时前
ElementUI 级联选择器el-cascader启用选择任意一级选项,选中后关闭下拉框
前端·elementui·vue