刷刷题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);
相关推荐
惊鸿287几秒前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
蓝翔认证10级掘手6 分钟前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
做梦都在学习前端7 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz24 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini27 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆27 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户408128120038128 分钟前
大文件分片上传和断点续传
前端
极客悟道28 分钟前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅29 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖32 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js