当前位置:   article > 正文

微信小程序第1讲 -- 视图组件和样式设置_wxml view 的style

wxml view 的style

view视图容器

首先我们先新建一个小程序,按照前面的博客的方法找到AppID
然后选择不使用云开发,选择JavaScript语言,选择自己喜欢的存储路径或者系统默认的路径,点击新建。
如图所示:

在一切都加载就绪之后,我们找到index文件夹。我们要在这个文件夹下写我们今天的代码
首先我们找到index.wxml文件我们按下ctrl+a然后按下del键删除生成的默认代码

如图所示

然后我们就开始写今天的代码了

<view style="width:100%; height:80px; background:blue"></view>
<view style="width:100%; height:80px; background:yellow"></view>
<view style="width:100%; height:80px; background:red"></view>
  • 1
  • 2
  • 3

写好后按下ctrl+s保存并编译 并看到下面效果:

我们来解释一下今天的代码示例:

基础知识:

<view>是一个视图组件可以理解为一个色块
在小程序中:像这样由<></>成对出现的代码语言,我们叫做标签语言
微信小程序前端是由wxml语言写的,wxml语言是一种标签语言,
它的特点是成对出现<view></view><view>标签内我们可以设置一些属性,style是一种属性,它是决定标签风格的
一种属性。我们可以在style中设置字体大小,颜色,宽度,高度等各种各样的属性
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

代码注释详解:

<!-- 设置一个视图view 它的风格是宽度占满整个屏幕的宽度,高度占80像素,
背景颜色为蓝色 -->
<view style="width:100%; height:80px; background:blue"></view>
<!-- 同理 -->
<view style="width:100%; height:80px; background:yellow"></view>
<!-- 同理 -->
<view style="width:100%; height:80px; background:red"></view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

你可能会说:如果我需要设置很多样式,比如我想让它外边框是圆角的,我想让它里面的文字居中显示,我想设置很多我想设置的东西。那像这样在标签中写style属性岂不是要写很多?而且代码多了一行写不下,看着比较繁琐,有没有更好的办法设置样式呢?

答案是当时有!!!

这个时候我们要打开index.wxss文件,敲黑板我们换文件了,我们现在要在index.wxss中写代码了。
我们的想法是我们写一个样式类型,在这个类型中规定view的背景色,设置边框,设置居中对齐,设置宽度高度等等
然后我们回到index.wxml文件中,把我们写好的类引用上。这样不就好了

我们找到index.wxss文件,将里面的代码清空
如图所示:
在这里插入图片描述
我们开始写几个类,就叫justlike1、justlike2、justlike3吧

.justlike1{
   /*设置宽度水平占满*/
   width:100%;
   /*设置高度100像素  单位px*/
   height:100px;
   /*设置行高100px  可以使文字在垂直方向上居中*/
   line-height:100px;
   /*设置色块与上面的距离为10px*/
   margin-top:10px;
   /*设置文字水平居中*/
   text-align: center;
   /*设置背景色*/
   background:#00FFFF;
   /*设置圆角*/
   border-radius:30px;
}
.justlike2{ 
   width:100%;
   height:100px;
   line-height:100px;
   margin-top:10px;
   text-align: center;
   background:#00FF00;
   border-radius:30px;
}
.justlike3{
   width:100%;
   height:100px;
   line-height:100px;
   margin-top:10px;
   text-align: center;
   background:#FFFF00;
   border-radius:30px;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

然后我们回到index.wxml中引用它

<view class="justlike1">微信小程序</view>
<view class="justlike2">微信小程序</view>
<view class="justlike3">微信小程序</view>
  • 1
  • 2
  • 3

编译一下我们看看效果:
在这里插入图片描述
这个时候我们点击编译旁边的预览,用微信扫描二维码可以在手机上看
(由于小程序没有发布,所以只能在自己手机上看)
在这里插入图片描述
总结一下:

  1. 我们今天学习了view组件的使用,了解了标签语言的特点
  2. 我们学会了两种办法设置view组件的样式:(第一种方法:在view标签内写style属性。第二种办法:在index.wxss中定义一个类,然后在view标签内写class引用这个类)
  3. 掌握了微信小程序的编译,熟练工具的使用
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/喵喵爱编程/article/detail/928017
推荐阅读
相关标签
  

闽ICP备14008679号