微信小程序开发——class和style的区别

    因为在开发小程序时,只有部分在做毕业设计时候的前端经验,很多问题都是遇到后才了解到。

    在制作前端的过程中遇到了修改css样式不起作用的问题。因为代码是从网络上拷贝下来的,最开始如下:

<button class='tr' bindtap='modalinput' style="width:140rpx" data-value='{{item}}'>{{item.classnames}}</button>

    我们可以看到,里面不仅仅有css样式tr,而且还有一句style="widht:140rpx"的语句,最开始的时候我没有留意style,

为了修改使得button的外形更为美观,我对css中的tr进行了widht的修改。

    在测试的过程中发现,无论给他设置为什么,所对应的button按钮没有发生一点变化,这才让我注意到style="widht:140rpx"这句话,印象中,前端读取样式的时候一般是就近原则,因为平时写全局app.css和当前页面的css的时候会注意到这些。

    所以,class和style的最后的目的是一样的,只不过class是对当前容器命名后,在css页面或者wxss页面进行样式的编写,而style是直接在页面语句中的语句中进行编写,在程序执行的时候,style>class;


    
基于微信小程序开发的音乐播放器可以通过JavaScript编源码来实现。这个音乐播放器的基本功能包括播放音乐、暂停音乐、切换音乐、显示歌曲信息和进度条等。 你可以在微信小程序开发者工具中创建一个新的小程序项目,然后将这个音乐播放器的源码复制到项目中。通过微信小程序的API和组件,你可以实现所需的功能和界面展示。 在源码中,你可以找到详细的代码注释和使用方法,以便进行调整和修改。同时,你也可以下载已经完整编好的音乐播放器小程序源码,直接在微信开发者工具中加载运行。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [JavaScript基于微信小程序的音乐播放器源码.zip](https://download.csdn.net/download/weixin_55305220/85525989)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [基于微信小程序开发——音乐播放器](https://blog.csdn.net/WayneLJL/article/details/125291053)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [基于微信小程序开发的音乐播放器小程序源码(毕业设计).zip](https://download.csdn.net/download/chengxuyuanlaow/87463838)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值