微信小程序获取用户界面

最新推荐文章于 2025-06-16 16:10:17 发布

lujiebin

最新推荐文章于 2025-06-16 16:10:17 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：用户界面

本文链接：https://blog.youkuaiyun.com/lujiebin/article/details/89852774

微信小程序专栏收录该内容

6 篇文章

订阅专栏

博客围绕微信小程序获取用户界面展开，展示了效果图，并给出了wxml和wcss代码。

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

微信小程序获取用户界面

1.效果图
在这里插入图片描述
2.代码
wxml

<view class='amountBg'>
  <view class='img'>
    <open-data type="userAvatarUrl"></open-data>
  </view>
  <view class='account'>
    <view class='nick-name'>
      <open-data type="userNickName" lang="zh_CN"></open-data>
    </view>
    <view class='address'>
      <open-data type="userCountry" lang="zh_CN"></open-data>·
      <open-data type="userProvince" lang="zh_CN"></open-data>·
      <open-data type="userCity" lang="zh_CN"></open-data>
    </view>
  </view>
</view>

wcss

/* pages/mine/mine.wxss */

.amountBg {
  display: flex;
  flex-direction: row;
  height: 150px;
  background-color:  #4CCCCF;
  align-items: center;
}

.img {
  overflow: hidden;
  display: block;
  margin-left: 100px;
  width: 80px;
  height: 60px;
  border-radius: 50%;
}

.account {
  width: 70%;
  color: #fff;
  margin-left: 10px;
  align-items: center;
}

.nick-name{
  font-family: 'Mcrosoft Yahei';
  font-size: 16px;
}