对表白墙wxml文件解释

一、index.wxml

1.代码

<view class="Beijingse" style="height: 100%;">
    <view class="Xinxi">
        <view class="XinxiLiebiao" wx:for="{{yhxinxi}}">
            <view data-id="{{item.id}}" bindtap="QuXiangqing">
                <view class="liebiaowenben">
                    <view class="EwaixxBiankuang">
                        <text class="EwaiXinxi">上传用户:{{item.username}}</text>
                    </view>
                </view>
                <view class="NeirongBiankuang">
                    <text class="neirong">{{item.neirong}}</text>
                </view>
                <view class="XinxiTupianBiankuang" wx:if="{{item.tupian2=='https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/1662451260.jpeg'}}">
                    <image src="{{item.tupian1}}" class="XinxiTupian" mode="aspectFill"></image> 
                </view>  
                <view class="XinxiTupianBiankuang2" wx:if="{{item.tupian2!='https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/1662451260.jpeg'}}">
                    <image src="{{item.tupian1}}" class="XinxiTupian" mode="aspectFit"></image> 
                    <image src="{{item.tupian2}}" class="XinxiTupian" mode="aspectFit"></image> 
                </view>
            </view> 
        </view>
    </view>
    <view class="guding"  bindtap="QuFabu">
        <text class="wenben">发布\n信息</text>
    </view>
</view>

 

2.view组件

它像html中的div即容器，我们可以把它当成积木或者拼图，通过设置view的位置和大小，可以搭出整个页面的框架，虽然我们看不到他是有厚度的，但我们可以把它当成有厚度的纸，当我们在不同的小纸片上画了图案（列如：在不同的纸片绘制了“太阳，马儿和草地”），然后将它们按照我们的想法放置在一张大的纸上，也就形成了一张草原的画作。这里的view就承担着纸张的作用。如图（1-1），但是他和纸张不同的地方是它更像一个盒子，在盒子内部的小盒子是不能比外面套着的盒子大的，要么外面的盒子被撑大，要么被外面的盒子紧紧的罩在里面。

 

 （图1-1）

3.image组件

用于显示图片

<image src="{{图片地址}}" class="样式" mode="aspectFit"></image> 

图片地址：可是是url网络地址，也可以是物理的地址

样式：用于给组件设置样式，比如组件 应该多高或者多宽

4.text组件

用于显示文本

 <text>内容</text>

内容：在这里填写你想要它显示的文字

注释：其实大多数给view组件填充的内容，都像image和text组件一样，想绘画一样展示在纸张上。

5.wx:if和wx:for

像c语言的if 和for是一样的，wx:if是一种条件判定，满足条件执行，如果不满足就跳过，比如3>2是正确的他就不会跳过，可以展示text组件中的内容

<view wx:if="条件">
    <text>内容</text>
</view>

wx:for是代表循环，和wx:if一样他也有一个条件，如果条件满足则开始循环

 二、xiangqing.html

<view class="ChuizhiPailie">
<view>
</view>
<!-- 图片 -->
<!-- swiper和swiper-item的组合是轮播图像表格的外边框和内部的分割线组合成了一张表格 -->
<swiper style="height: 500rpx;" autoplay indicator-dots circular>
    <swiper-item>
    <!-- image存放的是图片 -->
        <image src="{{tupian1}}" mode="aspectFit" />
    </swiper-item>
    <swiper-item>
        <image src="{{tupian2}}" mode="aspectFit"/>
    </swiper-item>
    <swiper-item>
        <image src="{{tupian3}}" mode="aspectFit"/>
    </swiper-item>
</swiper>

<!-- 上传用户 -->
<text class="ShangchuangYonghu">上传用户：{{username}}</text>
<!-- 介绍 -->
<!-- rich-text是富文本,它可以显示比text更多的内容 -->
<rich-text nodes="{{neirong}}" class="Zhengwen" user-select="true"></rich-text>

</view>

三、fabu.html

<!-- 发布信息页 -->
<view class="Beijingse">
  <view style="padding: 10rpx;">
    <form bindsubmit="formshangchuan">
    <view class="Beijingse2">
<!-- 标题和内容 -->

        <text>内容：</text>
        <!-- placeholder是定义预显示的内容 -->
        <view>
          <textarea name="neirong" placeholder="填写内容：" maxlength="-1" style="width: 100%;"></textarea>
        </view>
          <!-- 上传图片 -->
        <text>上传图片：</text>
        <view style="display: flex; flex-wrap: wrap;">
          <view>
            <image wx:for="{{tl}}" src="{{item}}" class="scTubpiandx"></image>
          </view>
          <view class="Tubpiansc" bindtap="uploadImage">
            <text>+</text>
          </view>
        </view>
<!-- 上传图片截至于此 -->
</view>
        <!-- 按钮 -->
      <view class="fabuyeAnniu">
        <!-- button是按钮,bindtap是点击后在js中执行的代码块 -->
        <button bindtap="chongzhi">重置</button>
        <button form-type="submit">发布</button>
      </view>
    </form>
  </view>
</view>