对表白墙wxml文件解释

一、index.wxml

1.代码

 1 <view class="Beijingse" style="height: 100%;">
 2     <view class="Xinxi">
 3         <view class="XinxiLiebiao" wx:for="{{yhxinxi}}">
 4             <view data-id="{{item.id}}" bindtap="QuXiangqing">
 5                 <view class="liebiaowenben">
 6                     <view class="EwaixxBiankuang">
 7                         <text class="EwaiXinxi">上传用户:{{item.username}}</text>
 8                     </view>
 9                 </view>
10                 <view class="NeirongBiankuang">
11                     <text class="neirong">{{item.neirong}}</text>
12                 </view>
13                 <view class="XinxiTupianBiankuang" wx:if="{{item.tupian2=='https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/1662451260.jpeg'}}">
14                     <image src="{{item.tupian1}}" class="XinxiTupian" mode="aspectFill"></image>
15                 </view>
16                 <view class="XinxiTupianBiankuang2" wx:if="{{item.tupian2!='https://xx.uom.cn/new/img/wx7c24e1e2e2875b2e/1662451260.jpeg'}}">
17                     <image src="{{item.tupian1}}" class="XinxiTupian" mode="aspectFit"></image>
18                     <image src="{{item.tupian2}}" class="XinxiTupian" mode="aspectFit"></image>
19                 </view>
20             </view>
21         </view>
22     </view>
23     <view class="guding"  bindtap="QuFabu">
24         <text class="wenben">发布\n信息</text>
25     </view>
26 </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

 1 <view class="ChuizhiPailie">
 2 <view>
 3 </view>
 4 <!-- 图片 -->
 5 <!-- swiper和swiper-item的组合是轮播图像表格的外边框和内部的分割线组合成了一张表格 -->
 6 <swiper style="height: 500rpx;" autoplay indicator-dots circular>
 7     <swiper-item>
 8     <!-- image存放的是图片 -->
 9         <image src="{{tupian1}}" mode="aspectFit" />
10     </swiper-item>
11     <swiper-item>
12         <image src="{{tupian2}}" mode="aspectFit"/>
13     </swiper-item>
14     <swiper-item>
15         <image src="{{tupian3}}" mode="aspectFit"/>
16     </swiper-item>
17 </swiper>
18
19 <!-- 上传用户 -->
20 <text class="ShangchuangYonghu">上传用户：{{username}}</text>
21 <!-- 介绍 -->
22 <!-- rich-text是富文本,它可以显示比text更多的内容 -->
23 <rich-text nodes="{{neirong}}" class="Zhengwen" user-select="true"></rich-text>
24
25 </view>

三、fabu.html

 1 <!-- 发布信息页 -->
 2 <view class="Beijingse">
 3   <view style="padding: 10rpx;">
 4     <form bindsubmit="formshangchuan">
 5     <view class="Beijingse2">
 6 <!-- 标题和内容 -->
 7
 8         <text>内容：</text>
 9         <!-- placeholder是定义预显示的内容 -->
10         <view>
11           <textarea name="neirong" placeholder="填写内容：" maxlength="-1" style="width: 100%;"></textarea>
12         </view>
13           <!-- 上传图片 -->
14         <text>上传图片：</text>
15         <view style="display: flex; flex-wrap: wrap;">
16           <view>
17             <image wx:for="{{tl}}" src="{{item}}" class="scTubpiandx"></image>
18           </view>
19           <view class="Tubpiansc" bindtap="uploadImage">
20             <text>+</text>
21           </view>
22         </view>
23 <!-- 上传图片截至于此 -->
24 </view>
25         <!-- 按钮 -->
26       <view class="fabuyeAnniu">
27         <!-- button是按钮,bindtap是点击后在js中执行的代码块 -->
28         <button bindtap="chongzhi">重置</button>
29         <button form-type="submit">发布</button>
30       </view>
31     </form>
32   </view>
33 </view>