微信小程序开发(四)学习基本组件
2024-09-07 09:37:37
现在我们已经学会使用工具了,再来了解,测试一下微信小程序的常用组件,所谓组件,就是微信团队已经开发好的一些常用标签,我们只需要掌握用法就可以了,当然,以后学得深入了,也可以开发自己的组件,让其他人使用,这是程序员的更高层境界。好了,闲言少叙,进入正题。
微信小程序组件开发文档:https://developers.weixin.qq.com/miniprogram/dev/component/,各位可以参考这个文档,来快速学习。
一、text
显示文本组件,在index.wxml中键入如下代码
<text class="">锦鲤</text><text class="textStyel">杨超越</text>
显示结果
格式怎么办?当然是自己做样式表了!
在index.wxss中键入如下代码:
.textStyel {
color: #f00;
font-size: 60rpx;
padding-left: 50rpx;
}
在index.wxml中修改代码下:
<text class="">test</text><text class="textStyel">test1</text>
显示结果如图示:
很容易,是不是,与做html基本没差别。
对比学习,你会学得更快,理解的更快。
关于rpx:(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
二、view
基本容器组件,与html中的div非常类似,功能也类似,做布局,在html中做布局的方法,在这里同样适用。
好了,为了熟悉环境,我们来做个布局,顺便也理解一下view的用法
先看一下,要完成的效果
如何做呢,先在index.wxml中键入如下代码:
<view class="flexbox">
<view class="flexitem" ></view>
<view class="flexitem" ></view>
<view class="flexitem" ></view>
<view class="flexitem" ></view>
<view class="flexitem" ></view>
</view>
在index.wxss中键入如下代码:
.flexbox {
width: 100%;
height: 700rpx;
background-color: #ccc;
/* 设置流式布局,允许换行 */
flex-wrap: wrap;
}
.flexitem {
margin-top: 25rpx;
width: 40%;
margin-left: 6.5%;
display: inline-block;
height: 200rpx;
background-color: chocolate;
/* 设置圆角 */
border-radius: 15rpx 30rpx 50rpx 5rpx;
}
即可完成此布局的制作,是不是与html做布局一样呢。
至于其他的常规组件,我就不过多赘述了,大家可以查阅文档学习。在以后的文章中,如果用到,我也会讲一下。
如果各位在学习过程中有任何问题,欢迎留言与我交流。
最新文章
- 【C#】ConcurrentBag<;T>; 方法
- 拿什么拯救你,我的代码--c#编码规范实战篇
- java中包命名常见规则
- [爬虫学习笔记]用于提取网页中所有链接的 Extractor 模块
- 使用info.plist(或工程名-info.plist)向程序中添加软件Build ID或者版本号信息
- 【HDOJ】4210 Su-domino-ku
- 关于js的callback回调函数的理解
- 基于GDAL的遥感影像显示(C#版)
- 谈谈你对this对象的理解
- 3、Linux连接oracle
- strstr函数的运用
- Ubuntu16.04程序自启动
- CUDA ---- Warp解析
- ML—机器学习常用包(持续更新….)
- SpringMVC温故知新
- 第十篇---javascript函数this关键字
- [翻译] JSAnimatedImagesView
- [19/04/19-星期五] Java的动态性_脚本(Script,脚本)引擎执行JavaScript代码
- Python类总结-反射及getattr,setattr
- lucene的分词器宝典