uniapp获取接口数据，渲染在picker选择器里面

1：打开hublider
新建一个test项目
用于写测试打代码

新建一个uniapp项目，命名为test。

image

可以看到，在开发工具HBuilderX里面，极速生成的模板目录结构如下

image

2：选择一个比较好用的ui框架
引入之后，很多代码样式都不需要自己一点点的写了，需要什么样的，直接在UI库里面复制黏贴就行，省了很多时间哦，不许呀考虑写出来的页面样式不好看之类的问题了。

小程序组件库ColorUI的使用，一键复制粘贴
https://www.jianshu.com/p/b816ed9e4df3

3：ui框架框架引入之后，开始写代码
打开pages底下的index.vue的组件，开始写代码了，把代码写好，这里随便写了一个例子。

接口数据
是这样的
json数据数组

{
    "jobs": [{
        "id": -99,
        "jobName": "默认身份"
    }, {
        "id": 1,
        "jobName": "普通员工"
    }, {
        "id": 2,
        "jobName": "经理"
    }, {
        "id": 3,
        "jobName": "总监"
    }, {
        "id": 4,
        "jobName": "总经理"
    }, {
        "id": 5,
        "jobName": "主管"
    }, {
        "id": 6,
        "jobName": "董事长"
    }, {
        "id": 7,
        "jobName": "总裁"
    }, {
        "id": 8,
        "jobName": "实习生"
    }, {
        "id": 10,
        "jobName": "炼钢工"
    }, {
        "id": 11,
        "jobName": "电工"
    }, {
        "id": 12,
        "jobName": "实施工"
    }, {
        "id": 13,
        "jobName": "焊工"
    }],
    "retCode": 1,
    "content": "操作成功"
}

接口链接我就不放出来了
反正就是这么哥数组格式的数据

4：index.vue

<template>
    <view>
        <form>
            <view class="cu-form-group margin-top">
                <view class="title">岗位</view>
                <picker @change="PickerJob" :value="addressData.jobId" :range="JobList">
                    <view class="picker">
                        {{ addressData.jobId >0 ? JobList[addressData.jobId] : JobList[0]}}
                    </view>
                </picker>
            </view>
        </form>
        <view class="padding">
            <button class="cu-btn block bg-blue margin-tb-sm lg" @click="confirm">保存员工</button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                JobList: [],
                JobListId: [],
                modalName: null,
                addressData: {
                    jobId: -99,
                    jobName: "",
                }
            };
        },
        mounted() {     
            this.getJob();
        },
        onLoad() {
        },
        methods: {
            // 获取职位
            getJob() {
                uni.request({
                    header: {
                        'Content-Type': 'application/json'
                    },
                    url: "http://47.xx.xx.7x:8088/chemApp/staff/jobs.action",
                    method: 'POST',
                    data: {
                        "username": "john",
                    },
                    dataType: 'json',
                    success: (res) => {
                        console.log(res.data);
                        this.JobListId = res.data.jobs;
                        this.JobList = res.data.jobs.map(a => a.jobName);

                        console.log(this.JobList);
                    },
                    fail: function(err) {
                        console.log("服务器繁忙")
                        return;
                    }

                });
            },
            PickerJob(e) {
                console.log(e)
                this.addressData.jobId = e.detail.value
                this.addressData.jobName = this.JobListId.filter(a => a.id == e.detail.value)[0].jobName
            },
            confirm() {
                let data = this.addressData

            },
        },
    }
</script>
<style>
    .cu-form-group .title {
        min-width: calc(4em + 15px);
    }
</style>

5:当提交的时候，打印一下提交的数据
可以了，一件成功将要选择的数据成功提交~