微信小程序学习（二）：常用样式和组件

最新推荐文章于 2024-06-19 21:59:01 发布
最新推荐文章于 2024-06-19 21:59:01 发布
阅读量256 收藏
点赞数 1
分类专栏： 前端学习 微信小程序 文章标签： 微信小程序 学习 小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/john1516/article/details/139808604
版权

常用样式和组件

  • 在小程序中不能使用HTML标签，也就没有DOM和BOM，同时仅仅支持部分CSS选择器。
  • WXML 充当的就是类似 HTML 的角色，只不过在 WXML 中没有div、p、 span、img、a 等标签，在 WXML 中需要使用 小程序提供的 view、text 、image、navigator 等标签来构建页面结构，小程序提供的这些标签，我们称为 “组件”，开发者可以通过组合这些基础组件进行快速开发。
  • WXSS 则充当的就是类似 CSS 的角色，WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改，新增了尺寸单位 rpx、提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分CSS选择器。
  • 小程序规定任何型号手机：屏幕宽都为 750 rpx。
  • 🔗WXML官方文档
  • 🔗WXSS官方文档
  • 🔗基础组件官方文档
激洪
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序 CSS 选择器::after和::before的简单使用
03-29
前两天看文档看到选择器那块儿的时候，前面4个基本都能理解：.class，#id，element，element, element，但后面两个::after和::before（文档中说，分别表示在view 组件的后面和前面插入内容），表示有点没有理解。...
微信小程序小组件：仿直播点赞气泡效果，基于Canvas
03-29
先撸一发效果图为敬： (此图片来源于网络，如有侵权，请联系删除!... /* 三阶贝塞尔曲线第二个控制点坐标值*/ var p13= data[0][3]; /* 三阶贝塞尔曲线终点坐标值*/   var p20= data[1][0]; var p21= dat
微信小程序开发核心：样式，组件，布局，矢量图标
景天科技苑
04-30 8461
本文详细讲解了微信小程序开的流程步骤，包括微信小程序中尺寸单位，样式布局，矢量图标的引入等等。
微信小程序开发（超详细保姆式教程）
热门推荐
m0_64875238的博客
11-10 32万+
微信小程序开发（超详细保姆式教程）
微信小程序自定义组件：组件间通讯
sayyy的专栏
04-18 752
略
微信小程序开发学习笔记②组件和API
tutgxu的博客
01-01 1493
微信小程序开发组件与API
微信小程序开发教程：项目六媒体组件 课后习题
WHT869706733的博客
04-12 6886
《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 请简单列举音频接口API创建的InnerAudioContext 实例属性和方法。 六、编程题 1.请在音乐小程序项目中实现切换到上一曲功能。 2.请在音乐小程项目中实现音乐推荐页面的数据绑定和列表渲染。 一、单选题 1.下列选项中关于tabBar 的说法错误的是（B）。 A.wx.setTabBarltem动态设置tabBar某一项的内容 B.w.
【微信小程序开发】学习小程序的模块化开发(自定义组件和分包加载)
陈橘又青的博客
12-06 1万+
自定义组件是小程序提供的一种组件化开发方式，可以将可重用的部件封装为一个组件，以便在不同的页面中使用。自定义组件的开发方式类似于Vue.js中的组件开发方式，可以包含模板、JS文件和样式文件。在开发一个自定义组件时，需要在对应的JS文件中定义组件的数据和属性，并在模板中使用这些数据和属性进行渲染。自定义组件可以大大提高代码的复用率，同时也方便了小程序的维护。自定义组件是指开发者可以根据自己的需要，将一些常用的UI组件封装成自定义的组件，以便在不同的页面中复用。
微信小程序：在父组件中修改子组件的样式
weixin_42645716的博客
06-30 2038
微信小程序：在父组件中修改子组件的样式
微信小程序 | 小程序组件化开发
CoderHing的博客~
12-26 1万+
​ 🖥️ 微信小程序 专栏：小程序组件化开发 🧑‍💼 个人简介：一个不甘平庸的平凡人🍬 ✨ 个人主页：CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ ​
微信小程序开发教程：项目二微信小程序开发基础 课后习题
WHT869706733的博客
04-01 1万+
《微信小程序开发教程》主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一、单选题 二、多选题 三、判断题 四、填空题 五、简答题 1.请简单描述页面样式的单位rpx与px的关系。 2.简单地介绍开发常用页面组件。 六、编程题 1.请编写一个商品列表页面，展示商品名称和价格。 ​2.请编写一个用户登录页面，提示输入用户名和密码进行登录。 一、单选题 1.在微信小程序的页面组件中，视图容器组件用(C)表示。 A.<block> B.<text> C.&
微信小程序组件开发示例：上传图片组件
03-29
上传图片的功能，微信小程序已经提供了相应的组件和API，结合 weui 样式，如果不考虑复用的话，很容易实现（官方 demo 就可以拿来用 ^_^ ）。 如果要复用，可以利用模板，但是会面临微信小程序的很多限制。 限制  ...
微信小程序实用组件：自定义弹框toast
03-29
小程序提供的提示弹框没有错误，警告的样式只有success和loading的,但是在实际需求中需要很多的这样的提示框，简单的做了一个，供大家参考  效果预览： (此图片来源于网络，如有侵权，请联系删除! ) 代码介绍：  ...
微信小程序uniapp银行卡卡片样式组件
05-09
微信小程序uniapp银行卡卡片样式组件
微信小程序接入lottie动画
u010194271的博客
06-18 362
由Airbnb开发并开源。允许设计师将复杂的矢量动画导出为JSON文件，并通过lottie库在移动应用或者Web上无缝地渲染这些动画。这些动画可以在iOS、Android和Web等多个平台上使用，并且可以以高性能和高质量进行呈现。和传统的GIF、Canvas有什么区别：矢量动画：lottie动画是基于矢量图形的，动画中的所有元素都是以数学形式描述的，可以无限缩放而不会失真。GIF和Canvas动画通常是基于位图的，因此在缩放时可能会失去清晰度。文件大小：相同动画的产生的文件，lottie的更小。
微信小程序学习（六）：常用原生 API
最新发布
激洪的博客
06-19 999
微信小程序学习：常用原生 API
uniapp 微信小程序更改轮播图指示点
qq_61869009的博客
06-17 283
【代码】uniapp 微信小程序更改轮播图指示点。
微信小程序---支付
weixin_47808575的博客
06-18 935
获取订单编号再次请求后端接口，拿到wx.requestPayment()需要的参数。如果没有登录，走前端登录流程，不再赘述。跟自己的后端商议入参，然后获取订单编号。
微信小程序修改自定义组件样式
10-27
微信小程序中修改自定义组件样式有两种方法：一种是通过在组件的js文件中将wxml中需要修改的标签class暴露出来，然后在引用组件时对暴露出来的class进行class覆盖；另一种是通过设置组件的styleIsolation属性来控制样式隔离。其中，第一种方法可以实现样式的局部修改，而第二种方法可以实现样式的全局修改。 具体实现方法如下： 1. 局部修改样式： 在组件的js文件中将需要修改的标签class暴露出来，例如： ``` Component({ externalClasses: ['my-class'] }) ``` 在组件的wxml文件中找到需要修改的标签，例如： ``` <view class="my-class">我是组件内部标签</view> ``` 在引用组件的页面中使用组件，并对暴露出来的class进行class覆盖，例如： ``` <my-component class="text"></my-component> ``` 在引用组件的wxss文件中修改样式，例如： ``` .text { color: red; } ``` 2. 全局修改样式： 在组件的js文件中设置options属性，例如： ``` Component({ options: { addGlobalClass: true } }) ``` 在引用组件的页面中使用组件，例如： ``` <my-component></my-component> ``` 在引用组件的wxss文件中修改样式，例如： ``` .my-class { color: red; } ``` 其中，addGlobalClass属性等价于设置styleIsolation属性为apply-shared，但是如果设置了styleIsolation属性，则addGlobalClass属性会失效。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

激洪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值