需求内容：用户点击用户名后可以直接编辑用户名，保存并实时更新。

效果如图：

初始状态：

点击进入编辑状态：

基本的实现思路：

使用wxml条件渲染模板，绑定bindtap事件，在点击昵称后条件反转渲染出input节点，给input绑定bindconfirm事件，将最后的数据渲染到前端，如有需求，可以调用后端api写入数据库。

1.基本页面结构

 <view class="name" style="font-size:40rpx" >
          <view wx:if="{{!isNameEdit}}">{{nickName}}({{name}})<icon class="iconfont icon-bianji" style="margin-bottom:10rpx"></icon></view>
          <input placeholder="请入输新的昵称" style="border-bottom:1rpx solid gray;box-shadow:#90BA76;color:gray;font-size:40rpx" type="text" wx:if="{{isNameEdit}}" bindconfirm="nameEditConfirm"/>
        </view>

说明:

• isNameEdit 变量，监控是否点击，是否需要显示出input元素,初始值为false；
• 为view节点绑定点击事件处理函数；
• 为input节点绑定确认点击事件处理函数；

2.js逻辑

定义变量：

data : {
    isNameEdit:false,
    nickName:''
}

绑定事件：

// bindtap 事件
editNickName:function(e) {
    this.setData({
      isNameEdit:true
    })
  }

nameEditConfirm:function(e) {
    app.globalData.nickName = newName;
    this.setData({
      isNameEdit:false,
      nickName:e.detail.value
    })
  }

完成！