uni-app 一周 D 报 （2019-01-18）

发布于 1周前 作者 bupafengyu 来自 Uni-App

uni-app 一周 D 报 （2019-01-18）

Harmonyos Next教程
1 回复

针对您提到的 uni-app 一周开发日报（2019-01-18），作为一个IT专家，我将通过分享一些实际的代码案例来展示在 uni-app 开发中可能遇到的功能实现或问题解决。请注意，这些案例是基于假设的场景，旨在提供具体的代码实践而非泛泛的建议。

1. 页面导航与传参

在 uni-app 中，页面导航和参数传递是非常常见的需求。下面是一个简单的示例，展示如何在两个页面间导航并传递参数。

首页（index.vue）

<template>
  <view>
    <button @click="navigateToDetail">跳转到详情页</button>
  </view>
</template>

<script>
export default {
  methods: {
    navigateToDetail() {
      uni.navigateTo({
        url: '/pages/detail/detail?id=123&name=uni-app'
      });
    }
  }
}
</script>

详情页（detail.vue）

<template>
  <view>
    <text>ID: {{ id }}</text>
    <text>Name: {{ name }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      name: ''
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.name = options.name;
  }
}
</script>

2. 网络请求封装

在进行网络请求时，通常会封装一个统一的请求方法，以便于管理和错误处理。

请求封装（request.js）

export function request(url, method = 'GET', data = {}, header = {}) {
  return new Promise((resolve, reject) => {
    uni.request({
      url,
      method,
      data,
      header,
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data);
        } else {
          reject(new Error('请求失败'));
        }
      },
      fail: (err) => {
        reject(err);
      }
    });
  });
}

使用封装后的请求（在某个页面或组件中）

import { request } from '@/utils/request.js';

request('https://api.example.com/data', 'POST', { key: 'value' })
  .then(data => {
    console.log(data);
  })
  .catch(err => {
    console.error(err);
  });

总结

以上代码案例展示了如何在 uni-app 中实现页面导航与参数传递，以及如何封装网络请求。这些是在日常开发中非常基础且重要的功能。根据项目的具体需求，您可能还需要进一步扩展和优化这些功能，比如增加请求的超时处理、错误重试机制等。希望这些示例对您有所帮助！

回到顶部