如何获取微信小程序picker为值而不是下标(仅需一行代码实现)

前言：

近期写一个微信小程序form表单提交的页面，在用到文档中的pick选择器中，发现获取只能成下标，导致与后端交互很不好，于是研究了一下，具体实现请看下面，先附上官网地址：微信小程序表单组件picker

一、直接上步骤

官网上面有很多类型例：普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器等等...
参数解析

**1.xhtml部分**

   <view>
              <picker mode="selector" range="{
   
   {shoparray}}"  range-key="name"   bindchange="shoppick">
                <text value="{
   
   { shopindex.name }}"> </text>
              </picker>
            </view>

2.js部分

 shoparray:[
      {
   
   
        id: 0,
        name: '美国'
      },
      {
   
   
        id: 1,
        name: '中国'
      },
      {
   
   
        id: 2,
        name: '巴西'
      },
      {
   
   
        id: 3,
        name: '日本'
      }
    ],
    //事件方法
     shoppick:function(e) {
   
   
    console.log(e); 
    this.setData({
   
   
      shopindex:e.detail.value
    });

    },

这样我们只能获取到下标

获取的是下标，我们想要数组的数据，这时候你e.detail.value没有什么用。你要注意到你的数组在data里边，所以你需要data.array[e.detail.value]，本以为这样就成功了，但是这是js语言，data无法直接获取，需要用this获取上一层对象（不理解的话看一下js语言吧），这样就可以直接获取了
核心代码

this.data.shoparray[e.detail.value]

把我们的事件代码替换下

 shoppick:function(e) {
   
   
    console.log(e); 
    this.setData({
   
   
      shopindex:this.data.shoparray[e.detail.value]
    });
    },

这样就完美解决了

提交表单

注意：

我这里用的是官方的 objectArray，不是arry的，