init

pages/index/index.css

@@ -0,0 +1,62 @@
+/**index.css**/
+page {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+.scrollarea {
+  flex: 1;
+  overflow-y: hidden;
+}
+
+.userinfo {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: #aaa;
+  width: 80%;
+}
+
+.userinfo-avatar {
+  overflow: hidden;
+  width: 128rpx;
+  height: 128rpx;
+  margin: 20rpx;
+  border-radius: 50%;
+}
+
+.usermotto {
+  margin-top: 200px;
+}
+
+.avatar-wrapper {
+  padding: 0;
+  width: 56px !important;
+  border-radius: 8px;
+  margin-top: 40px;
+  margin-bottom: 40px;
+}
+
+.avatar {
+  display: block;
+  width: 56px;
+  height: 56px;
+}
+
+.nickname-wrapper {
+  display: flex;
+  width: 100%;
+  padding: 16px;
+  box-sizing: border-box;
+  border-top: .5px solid rgba(0, 0, 0, 0.1);
+  border-bottom: .5px solid rgba(0, 0, 0, 0.1);
+  color: black;
+}
+
+.nickname-label {
+  width: 105px;
+}
+
+.nickname-input {
+  flex: 1;
+}

pages/index/index.js

@@ -0,0 +1,41 @@
+// index.js
+const defaultAvatarUrl =
+  "https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0";
+Page({
+  data: {
+    motto: "Hello World",
+    userInfo: {
+      avatarUrl: defaultAvatarUrl,
+      nickName: "",
+    },
+    hasUserInfo: false,
+    canIUseGetUserProfile: xhs.canIUse("getUserProfile"),
+    canIUseNicknameComp: xhs.canIUse("input.type.nickname"),
+  },
+  bindViewTap() {},
+  onChooseAvatar(e) {
+    const { avatarUrl } = e.detail;
+    const { nickName } = this.data.userInfo;
+    this.setData({
+      "userInfo.avatarUrl": avatarUrl,
+      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+    });
+  },
+  onInputChange(e) {
+    const nickName = e.detail.value;
+    const { avatarUrl } = this.data.userInfo;
+    this.setData({
+      "userInfo.nickName": nickName,
+      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
+    });
+  },
+  getUserProfile(e) {
+    console.log("user -profile", e);
+    // 推荐使用xhs.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
+    const userInfo = e.detail.userInfo;
+    this.setData({
+      userInfo: userInfo,
+      hasUserInfo: true,
+    });
+  },
+});

pages/index/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/index/index.xhsml

@@ -0,0 +1,27 @@
+<!--index.xhsml-->
+<scroll-view class="scrollarea" scroll-y type="list">
+  <view class="container">
+    <view class="userinfo">
+      <block xhs:if="{{canIUseNicknameComp && !hasUserInfo}}">
+        <button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
+          <image class="avatar" src="{{userInfo.avatarUrl}}"></image>
+        </button>
+        <view class="nickname-wrapper">
+          <text class="nickname-label">昵称</text>
+          <input type="nickname" class="nickname-input" placeholder="请输入昵称" bind:change="onInputChange" />
+        </view>
+      </block>
+      <block xhs:elif="{{!hasUserInfo}}">
+        <button xhs:if="{{canIUseGetUserProfile}}" bindgetuserinfo="getUserProfile" open-type="getUserInfo"> 获取头像昵称 </button>
+        <view xhs:else> 请使用2.10.4及以上版本基础库 </view>
+      </block>
+      <block xhs:else>
+        <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+        <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+      </block>
+    </view>
+    <view class="usermotto">
+      <text class="user-motto">{{motto}}</text>
+    </view>
+  </view>
+</scroll-view>

pages/user/index.js

@@ -0,0 +1 @@
+Page({})

pages/user/index.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/user/index.xhsml

@@ -0,0 +1,6 @@
+<scroll-view class="scrollarea" scroll-y type="list">
+
+sdfsdf
+  
+</scroll-view>
+