微信小程序写个人主页、增加分割线、布局&样式（源代码示例）

最新推荐文章于 2025-02-10 21:51:15 发布

健敲代码

最新推荐文章于 2025-02-10 21:51:15 发布

阅读量1.7k

点赞数 6

文章标签：微信小程序小程序 json

本文链接：https://blog.csdn.net/zhang___jian61/article/details/136692369

版权

本文详细展示了如何使用纯WXML和WXSS代码创建移动应用的页面布局，包括容器、图片、文本等元素的样式和组织结构。作者分享了从新手到熟练掌握的基本步骤和注意事项，鼓励读者进行学习和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

纯wxml wxss代码编写，效果如下：

记得所有的页面必须在app.json中创建修改，否则一切编写都是徒劳（吐血获得的真知）

wxml:

<!-- 分割线 -->
<view class="divLine" style="height: 2rpx;width: 100%;background-color: grey;"></view>
<!-- 盒子1 -->
<view class="container1">
  <view class="portrait">
    <image src="https://jiackjian.asia/ctm/me-img/4.png"></image>
  </view>
  <view class="nickname">
    <text style="font-size:large;">懒得起名</text>
    <text style="font-size: x-small;margin-top: 20rpx;">ID：3091212151</text>
  </view>
  <view class="setting">
    <image src="https://jiackjian.asia/ctm/me-img/icon/setting.png"></image>
  </view>
</view>

<view class="container2">
  <view class="item">
    <image src="https://jiackjian.asia/ctm/me-img/icon/point.png"></image>
    <text>积分</text>
  </view>
  <view class="item">
    <image src="https://jiackjian.asia/ctm/me-img/icon/wallet.png"></image>
    <text>钱包</text>
  </view>
  <view class="item">
    <image src="https://jiackjian.asia/ctm/me-img/icon/hobby.png"></image>
    <text>喜好</text>
  </view>
  <view class="item">
    <image src="https://jiackjian.asia/ctm/me-img/icon/order.png"></image>
    <text>订单</text>
  </view>
</view>
<!-- 分割线 -->
<view class="divLine" style="height: 2rpx;width: 100%;background-color: grey;margin-top: 38rpx;"></view>

<!-- 盒子2 -->
<view class="container3">
  <view class="item1">
    <text class="detail">个人资料</text>
    <image class="img1" src="https://jiackjian.asia/ctm/me-img/icon/self.png"></image>
    <image class="img2" src="https://jiackjian.asia/ctm/vip-img/icon/right.png"></image>
  </view>
  <view class="item1">
    <text class="detail">我的消息</text>
    <image class="img1" src="https://jiackjian.asia/ctm/me-img/icon/message.png"></image>
    <image class="img2" src="https://jiackjian.asia/ctm/vip-img/icon/right.png"></image>
  </view>
  <view class="item1">
    <text class="detail">收藏夹</text>
    <image class="img1" src="https://jiackjian.asia/ctm/me-img/icon/collect.png"></image>
    <image class="img2" src="https://jiackjian.asia/ctm/vip-img/icon/right.png"></image>
  </view>
  <view class="item1">
    <text class="detail">发票管理</text>
    <image class="img1" src="https://jiackjian.asia/ctm/me-img/icon/invoice.png"></image>
    <image class="img2" src="https://jiackjian.asia/ctm/vip-img/icon/right.png"></image>
  </view>
  <view class="item1">
    <text class="detail">口味定制</text>
    <image class="img1" src="https://jiackjian.asia/ctm/me-img/icon/tableware.png"></image>
    <image class="img2" src="https://jiackjian.asia/ctm/vip-img/icon/right.png"></image>
  </view>
  <view class="item1">
    <text class="detail">礼品卡</text>
    <image class="img1" src="https://jiackjian.asia/ctm/me-img/icon/gift-card.png"></image>
    <image class="img2" src="https://jiackjian.asia/ctm/vip-img/icon/right.png"></image>
  </view>
</view>

wxss:


/* 盒子样式 */
.container1 {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.container1 image {
  width: 150rpx;
  height: 150rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
}

.nickname {
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
  margin-top: 30rpx;
}
.setting  image{
  width: 60rpx;
  height: 60rpx;
  margin-left: 250rpx;
  margin-bottom:90rpx;
}


.container2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 18rpx;
}

.item {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.item image {
  width: 90rpx;
  height: 90rpx;
}

.item text {
  font-size: small;
  margin-top: 6rpx;
}

.container3 {
  display: flex;
  flex-direction: column;
}
.item1 {
  display: flex;
  flex-direction: row;
  align-content: center;
  margin-top: 40rpx;
  margin-left: 20rpx;

}

.detail {
  font-size: larger;
  margin-top: 10rpx;
}

.img1 {
  width: 60rpx;
  height: 60rpx;
  margin-left: 30rpx;
}

.img2 {
  width: 80rpx;
  height: 80rpx;
  display: flex;
position: absolute;
right: 0;

}

欢迎有兴趣的同学借鉴学习，图片资源换成自己的就行，本地外链都可。

记得刚开始编写的时候较为生疏，如今基本能做到看到效果写出源代码。

每天进步一点，学习永无止境~