参考该效果图，实现点击提交按钮，弹出一个弹窗，内容是表单项的名称和值，如： 姓名：张三 性别：男 专业技能：HTML、CSS 你的意见：微信小程序

要在微信小程序中实现这样的功能，你需要结合WXML、WXSS和JavaScript（js/wxss）文件来构建页面和交互。以下是基本步骤：

1. **WXML** (微信小程序模板语言) - 创建表单元素，比如`<view>`, `<input>`和`<button>`:

<view class="container">
  <label for="name">姓名：</label>
  <input type="text" id="name" value="{{name}}" />
  
  <label for="gender">性别：</label>
  <picker bindchange="bindGenderChange">
    <view index="{{genderIndex}}">{{genderList[genderIndex]}}</view>
  </picker>

  <!-- ... 其他表单项 ... -->

  <button open-type="submit" bindtap="handleSubmit">提交</button>
</view>

2. **JS** (微信小程序脚本) - 添加数据绑定和事件处理函数:

Page({
  data: {
    name: '',
    genderIndex: 0,
    genderList: ['男', '女'],
    // ...其他表单项的数据...
  },
  
  bindNameChange: function(e) {
    this.setData({ name: e.detail.value });
  },
  
  bindGenderChange: function(e) {
    this.setData({ genderIndex: e.detail.value });
  },
  
  handleSubmit: function() {
    const details = {
      name: this.data.name,
      gender: this.data.genderList[this.data.genderIndex],
      // ...其他表单项...
    };
    
    wx.showModal({
      title: '提交信息',
      content: `姓名：${details.name}\n性别：${details.gender}`,
      showCancel: false, // 阻止用户取消
      success(res) {
        if (!res.cancel) {
          // 这里可以进一步处理提交到服务器或做其他操作
        }
      }
    });
  }
});

3. **WXSS** (样式表) - 样式化容器和表单元素，使其看起来更美观:

.container {
  display: flex;
  flex-direction: column;
}

/* ... 根据需求添加更多样式 ... */