评论

【小程序学习记录】-view组件

view组件的使用

前言

做过web开发的都知道HTML,在HTML中使用最多的就是div标签,它是一个容器,可以装一些东西,然后通过布局可以构建一个很美的界面web界面。而在微信小程序中想要构建一个界面出来使用的是WXML,它给我们提供了功能更加强大的组件如:view,button,text等,微信小程序团队将很多我们平时在HTML中用到的标签集成在了一个组件里,很方便,🆗话不多说,现在就来聊聊view的使用!

初识View

1.使用方法

上文说到div是HTML中用到最多的标签,view标签也是小程序中用到最多的标签,所以很重要!!!其实<view>标签可以看作是<div>标签来使用,因为它们的作用基本上一致,所以也很好理解了!使用的方法也基本一样,就是使用开始标签<view>和结束标签</view>将内容包起来就行,如下图:

wxml代码

<!--输出hello world-->

<view class="container">   <!-- class是样式类-->
  hello world
</view>

运行结果预览

2.直观感受

通过改变样式来更加直观的感受一下view到底是什么样子的
css代码

.container{
  height: 500rpx;
  background-color: red; 
}
.container1{
  width: 400rpx;
  height: 400rpx;
  background-color: green;
}
.container2{
  background-color: blue;
}

wxml代码

<view class="container">
  hello world
</view>
<view class="container1">
  hello world
</view>
<view class="container2">
  hello world
</view>

运行结果预览

可以看到当没有设置宽度和高度的时候,view默认的宽度是100%,而高度是根据内容来决定的,也就是说是有内容来撑开的,当设置了宽,高以后,就像我们熟悉的<div>

嵌套使用

wxml代码

<view class="container">
  <view class='Box_son'>
    <view class='Box_grandson'> </view>
  </view>
</view>

运行结果预览


view的嵌套其实也很简单,但是通过嵌套我们可以做很多的事情,小程序每一个界面都是一个一个的view嵌套组成的,当然这里的嵌套不只是view,view标签还可以嵌套很多的其他标签,<text>,<image>等等

结束语

这篇文章只是简单的简绍了一下,view的用法和嵌套,并没有讲布局知识,我的初衷就是想让更多想学习小程序的同学,以最简单的方式入门。所以可能有很多的不足之处,请大家多多在评论区指教。
当然如果觉得我写的还可以,就点个赞呗!!哈哈哈

最后一次编辑于  08-04  (未经腾讯允许,不得转载)
点赞 11
收藏
评论

6 个评论

  • Killer Irving
    Killer Irving
    03-17

    大家提点意见吧!

    03-17
    赞同 1
    回复 1
    • OK电脑办公服务
      OK电脑办公服务
      08-28
      谢谢,对像我这样的小白很有帮助
      08-28
      回复
  • 🌞
    🌞
    6小时前

    很棒,适合啥也不会的新手,谢谢

    6小时前
    赞同
    回复
  • 不想动
    不想动
    03-19

    我想在wechat标题左面加一个后退的图标怎么弄呢?

    03-19
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-19

      使用自定义tabbar

      03-19
      回复
  • 婕儿(Jane)
    婕儿(Jane)
    03-18

    简单实用,期待更多的内容

    03-18
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-18

      谢谢

      03-18
      回复
  • 桑
    03-17

    解释的很直白,像我们这些小白比较容易理解,顶你👍

    03-17
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-18

      谢谢

      03-18
      回复
  • 徐斗明
    徐斗明
    03-17

    顶楼主,给大家推荐一套小程序商城源码,免费开源,挺不错的哦,下载地址:https://github.crmeb.net/u/gitee

    03-17
    赞同
    回复 1
    • Killer Irving
      Killer Irving
      03-17

      谢谢!

      03-17
      回复