uni-app心得体会

原创已于 2024-04-23 20:22:17 修改 · 1.2k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-04-16 16:58:02 首次发布

uni-app利用Vue.js语法实现一次开发、多端发布的高效开发模式，强调其性能、组件库、扩展性、文档支持和社区活跃度。本文还展示了如何处理异步请求的Promise实现。

uni-app作为一种基于Vue.js的跨平台开发框架，具有许多优点和我个人的心得体会：

一次开发，多端发布：
uni-app允许开发者使用同一份代码基于Vue.js语法编写程序，然后编译成适用于多个平台的应用程序，包括Web、iOS、Android等。这极大地简化了开发流程，节省了时间和精力。
性能优秀：
uni-app的渲染性能和用户体验都非常出色，借助原生渲染能力和高效的编译器优化，可以确保应用程序在各种设备上运行流畅。
丰富的组件和插件库：
uni-app提供了丰富的组件和插件库，包括官方提供的uni-ui以及社区贡献的各种插件，这些组件和插件可以帮助开发者快速构建丰富多样的界面和功能，提高开发效率。
灵活的扩展性：
uni-app支持自定义组件和插件，开发者可以根据项目需求编写自己的组件和插件，从而实现更多样化、个性化的功能，并且能够在不同平台上保持一致的表现。
完善的文档和社区支持：
uni-app官方提供了详细的文档和教程，涵盖了从入门到进阶的各个方面，帮助开发者快速掌握框架的使用技巧。同时，uni-app拥有庞大的社区支持，开发者可以在社区中获取到及时的帮助和解决方案。
生态系统丰富：
uni-app生态系统不仅包括了uni-ui等官方组件和插件，还涵盖了各种第三方库和工具，开发者可以根据项目需求选择合适的工具和解决方案，实现功能扩展和优化。

综上所述，uni-app作为一款跨平台开发框架，具有快速高效、性能优秀、丰富的组件和插件库、灵活的扩展性、完善的文档和社区支持以及丰富的生态系统等优点，适合用于开发各种类型的移动应用程序。

：

一次开发，多端发布：

<!-- 页面示例：index.vue -->
<template>
  <view>
    <text>Hello World!</text>
  </view>
</template>

<script>
export default {
  // 页面生命周期钩子函数，在页面加载时执行
  onLoad() {
    console.log('页面加载完成')
  }
}
</script>

<style>
/* 样式代码 */
</style>

在我的使用中，我发现了一些具体的细节和代码示例，进一步体现了uniapp的优越性和便利性在这个示例中，我们只需要编写一份代码，就能够在不同平台上运行。通过onLoad生命周期钩子函数，可以在页面加载时执行相应的操作，无需考虑不同平台的差异。

多种插件和组件支持：

在uniapp开发中，我们可以轻松地引用第三方插件和组件DCloud 插件市场，以提高开发效率。

插件市场因防刷排名机制需要登录才可下载插件。另外登录后可对插件赞赏、购买、评价。

点击下载后会有弹窗，点击打开即可。
然后选择好设置即可创建

文档和社区支持：

在uniapp的官方文档和社区中uni-app官网，有丰富的教程、示例和解决方案，可以帮助开发者快速上手并解决遇到的问题。同时，也可以通过社区与其他开发者进行交流和分享经验。

综上所述，uniapp作为一款跨平台开发框架，具有快速高效、多样化的插件支持、自定义灵活以及完善的文档和社区支持等优势，适合用于开发各种类型的移动应用程序。

关于异步请求的处理方法：

api.js 文件中的 topList 函数应该返回一个 Promise 对象，以便在 onLoad 方法中正确处理异步请求的结果。可以使用 resolve 和 reject 来实现这一点。

下面是修改后的 api.js 文件：

export function topList() {

    return new Promise((resolve, reject) => {

        uni.request({

            url: 'http://10.92.40.9:3000/toplist/detail',

            success: (res) => {

                const data = res.data.list.slice(0, 4);

                    resolve(data);

            },

            fail: (err) => {

                reject(err);
    
            }

        });

    });

}

在 <script> 部分中，需要将从 topList 函数获取的数据赋值给 this.playlist。由于 topList 返回的是一个 Promise 对象，需要在 onLoad 方法中使用 then 方法来获取数据。

修改后的 <script> 部分如下：

onLoad() {

    topList().then(data => {

        this.playlist = data;

    }).catch(err => {

        console.error('Failed to fetch top list data', err);

    });

},

通过以上修改，你应该能够正确地获取榜数据。