一、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>
