通过微信开发者工具 商城模板 创建新小程序

mini-program/pages/usercenter/name-edit/index.js

@@ -0,0 +1,19 @@
+Page({
+  data: {
+    nameValue: '',
+  },
+  onLoad(options) {
+    const { name } = options;
+    this.setData({
+      nameValue: name,
+    });
+  },
+  onSubmit() {
+    wx.navigateBack({ backRefresh: true });
+  },
+  clearContent() {
+    this.setData({
+      nameValue: '',
+    });
+  },
+});

mini-program/pages/usercenter/name-edit/index.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "昵称",
+  "usingComponents": {
+    "t-input": "tdesign-miniprogram/input/input",
+    "t-icon": "tdesign-miniprogram/icon/icon",
+    "t-button": "tdesign-miniprogram/button/button"
+  }
+}

mini-program/pages/usercenter/name-edit/index.wxml

@@ -0,0 +1,14 @@
+<view class="name-edit">
+  <t-input
+    borderless
+    model:value="{{nameValue}}"
+    placeholder="请输入文字"
+    label="昵称"
+    clearable
+    bind:clear="clearContent"
+  />
+  <view class="name-edit__input--desc"> 最多可输入15个字 </view>
+  <view class="name-edit__wrapper">
+    <t-button block shape="round" disabled="{{!nameValue}}" bind:tap="onSubmit">保存</t-button>
+  </view>
+</view>

mini-program/pages/usercenter/name-edit/index.wxss

@@ -0,0 +1,18 @@
+page {
+  background-color: #f5f5f5;
+}
+page view {
+  box-sizing: border-box;
+}
+.name-edit {
+  padding-top: 20rpx;
+}
+.name-edit .name-edit__input--desc {
+  font-size: 26rpx;
+  padding: 16rpx 32rpx;
+  color: #999;
+  margin-bottom: 200rpx;
+}
+.name-edit .name-edit__wrapper {
+  margin: 0 32rpx;
+}