刷刷题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.json 的 pages 数组中。新增页面需在 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 中通过 navigationBarTitleText 和 navigationBarTextStyle 配置：

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);