uniapp一课一得

<template>

    <view class="content">
        <uamhead :title="title"></uamhead>
        <view class="head">
            <img :src="playlist.coverImgUrl" alt="" class="img1">
            <text class="headtext1">{{playlist.playCount}}</text>
            <img src="../../static/播放.png" alt="" class="imgbf">
        </view>


        <text class="headtext2">
            {{playlist.name}}
            {{playlist.description}}
        </text>


        <text class="bofang">播放全部(共{{playlist.trackCount}}首)
            <img src="../../static/播放.png" alt="" class="bofangtp">


        </text>
        <view class="gedan" v-for="(item,index) in playlist.tracks">
            <text class="gedan-text">
                {{index+1}}
            </text>
            <text class="gequ" @tap="ListToplayer(item.id)">
                <p>{{item.name}}</p>
                <!-- 歌曲名字 -->
                <p class="gequ-p">
                    <img v-if="privileges[index].maxbr == 999000" src="../../static/sq.png" alt="">
                    <img v-if="privileges[index].flag > 60 && privileges[index].flag < 70" src="../../static/dujia.png"
                        alt="">
                    {{item.ar[0].name}}
                </p>
                <!-- 作者 -->
            </text>

            <img src="../../static/播放.png" alt="" class="gequbf">
        </view>

    </view>

</template>

<script>
    import uamhead from '../../components/uamhead/uamhead.vue'
    import {
        list
    } from '../../common/api';
    
    
    export default {
        data() {
            return {
                title: "榜单列表",
                playlist: [],
                privileges: [],

            }
        },
        onLoad(options) {

            let listId = options.id;

            list(listId).then((res) => {
                this.title = res.data.playlist.name;
                this.playlist = res.data.playlist;
                this.privileges = res.data.privileges;
                console.log(res.data.playlist)

            });
        },
        methods: {
            ListToplayer(id){
                uni.navigateTo({
                    url:'/pages/player/player?songId=' + id
                })
            },
            
        }
    }
</script>

<style>
    .content {}

    .head {}

    .head .imgbf {
        position: relative;
        bottom: 157px;
        right: 215px;
        width: 20px;
        height: 20px;
        opacity: 0.4;
        border-radius: 15rpx;
    }

    .headtext1 {
        position: relative;
        bottom: 160px;
        right: 100px;
        color: aliceblue;
    }

    .gequ p img {
        width: 30rpx;
        height: 21rpx;
    }

    .headtext2 {
        white-space: pre-line;
        display: flex;
        position: relative;
        bottom: 185px;
        left: 230px;
        width: 300px;
        color: darkgrey;
    }

    .head .img1 {
        position: relative;
        top: 20px;
        width: 200px;
        height: 200px;
        border-radius: 15rpx;
    }

    .gedan {
        display: flex;
        margin-bottom: 15px;
        margin-left: 35rpx;
        align-items: center;
    }

    .gedan-text {
        position: absolute;
        left: 0rpx;
    
        margin-right: 15rpx;
        color: darkgrey;
    }

    .bofang {
        position: relative;
        bottom: 20px;
        left: 20px;
    }

    .gequ {
        position: relative;
        left: 15px;


    }

    .bofangtp {
        width: 20px;
        height: 20px;
        position: relative;
        top: 5px;
        right: 155px;
    }


    .gequbf {
        width: 20rpx;
        height: 20rpx;
        /* float: right; */
        position: absolute;
        right: 50rpx;
    }
</style>

print（'Hello word'）

1.掌握Vue.js基础知识

作为uniapp的基础底层框架，Vue.js的掌握程度直接决定了你能够如何使用uniapp，特别是在使用Vue的生命周期函数时，更是需要深入理解Vue的整个生命周期。此外，掌握slot（插槽）、computed（计算属性）和watch（监听属性变化）等Vue的高级特性也非常重要，这些高级特性可以大大简化你的开发流程和代码量。

2.熟悉uniapp框架的使用方法

uniapp框架提供了大量的组件和API，使用这些组件和API可以快速构建一个高质量的跨平台应用。其中，uniapp提供的页面结构以及页面数据传递的方式都很好用。凭借这些特性，你可以轻松地实现诸如路由跳转、数据通讯、组件订阅等功能。

3.注意跨平台的兼容性问题

uniapp可以构建出多个平台的应用，但是这同时也带来了一些兼容性问题。在开发过程中，你需要时刻关注不同平台的差异，特别是在样式和布局方面，不同平台的兼容性问题尤为突出。另外，uniapp还提供了平台差异性API，通过这些特定平台的API可以实现一些平台特定的功能。

4.合理利用第三方插件

在uniapp中可以使用大量的第三方插件，这些插件可以很方便地引入，减少了我们的开发成本。例如，引入vant-ui可以快速构建出一套美观的界面，引入echarts可以来绘制各种图表统计数据。当然，在使用第三方插件时也需要注意兼容性问题、引用方法、使用方式等。

在进行uniapp开发时，代码的质量及其可维护性非常重要。因此，在开发之前你需要详细地设计应用架构，并将代码分成多个相互独立的组件。同时，也需要时刻关注代码的性能问题，比如减少不必要的重绘、减少DOM的操作等。对于既有的代码，也需要不断地进行优化和重构，以达到更好的开发效率和应用性能。

在使用Uniapp之前，需要具备一些基本的前端开发技能。建议首先学习Vue.js，因为UniApp是基于Vue构建的一个框架。此外，Weex也是一个需要学习的重要技术之一，因为它提供了JavaScript代码和原生UI组件之间的标准化转换方式。掌握这两个技术将为你提供更广泛的知识背景，使你更容易理解和使用Uniapp开发框架。

Uniapp是一个灵活的框架，它具有许多方便的功能，如跨平台UI组件、Native API、 Vuex状态管理和生命周期等诸多关键特点。这些特点直接体现了Uniapp开发的优势和灵活性。因此，建议在掌握Vue.js和Weex之后再深入研究这些特点。并且请阅读Uniapp官方文档。

总结：通过以上学习心得，我认为，掌握vue.js的基础知识和熟练使用uniapp框架、注意跨平台的兼容性问题、合理利用第三方插件、以及重视代码优化和重构，是成为一个优秀的uniapp开发者的基本条件。

Uni-App-学习心得 - 百度文库

uniapp学习心得_阮yuanfeng的博客-CSDN博客

uni-app学习心得和填坑，关于uni-app 打包h5 页面的坑

2020年uniapp学习手记-基础篇，和我一起学uniapp.pdf-原创力文档

《对Uni-app课程的学习收获及心得》_無名嘅人的博客-CSDN博客

学习uni-app心得_weixin_57494029的博客-CSDN博客

移动应用开发——uni-app框架 仿网易云音乐播放器学习心得

Uni-App入门教程学习路线分享-前端开发资讯-博学谷

uniapp小程序快速入门_哔哩哔哩_bilibili