1：打开hublider
新建一个test项目
用于写测试打代码
新建一个uniapp项目，命名为test。
可以看到，在开发工具HBuilderX里面，极速生成的模板目录结构如下
2：选择一个比较好用的ui框架
引入之后，很多代码样式都不需要自己一点点的写了，需要什么样的，直接在UI库里面复制黏贴就行 ，省了很多时间哦，不许呀考虑写出来的页面样式不好看之类的问题了。
小程序组件库ColorUI的使用，一键复制粘贴
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:当提交的时候，打印一下提交的数据
可以了，一件成功将要选择的数据成功提交~
