uni-app 5+App中使用picker

uni-app 5+App中使用picker

最近小程序非常火，开发成本低，用完即走等好处使各大厂都开始做小程序，而且大同小异，所以如果我们想使用一套代码开发各家的小程序就可以使用uni-app,还可以做成app，但是uni-app有很多的坑，毕竟还不是很成熟。

编译app时发现picker不能在android和ios正常运行，官方给出的方案是使用mpVue的picker，参考Hello uni-app。我能怎么办，我也很无奈，开启踩坑之旅。

如果只是开发h5+小程序的话请绕道

直接上代码

demo

<template>
	<view>
		<view>
			 <view @tap="showSinglePicker" v-if="shopList.length != 0">门店:{{shopList[index].label}}</view>
			 <mpvue-picker ref="mpvuePicker" :mode="mode" :pickerValueDefault="index" @onChange="onChange" @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="shopList">
			 </mpvue-picker>
		</view>
	</view>
</template>

<script>
	//uni-app的picker不能用于app,
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue'
	export default {
		components: {
			mpvuePicker,
		},
		onLoad() {//本段代码请忽略
			let that = this
			uni.getStorage({
				key:'shopList',
				success(res) {
					that.shopList = []
					for(let i = 0; i<res.data.length; i++){
						let obj = {}
						obj.value = res.data[i].shop_id
						obj.label = res.data[i].shop_name
						that.shopList.push(obj)
					}
				}
			})
		},
		data() {
			return {
				shopList:[],
				index:[0],
				mode: 'selector',
			};
		},
		mounted() {
		},
		methods:{
			showPicker() {
			  this.$refs.mpvuePicker.show();
			},
			onConfirm(e) {
				this.index = e.index
			},
			onChange(e) {
			  this.index = e.index
			},
			onCancel(e) {
				console.log('onCancel')
			  console.log(e);
			},
			selectChange(e){
				this.index = e.detail.value
			},
			showSinglePicker() {
				console.log(this.shopList)
				this.mode = 'selector'
				this.index = [0]
				this.$refs.mpvuePicker.show()
			},
		}
	}
</script>

<style>
</style>

mpVue picker

<template>
	<view class="mpvue-picker">
		<page-head :title="title"></page-head>
		<view class="uni-padding-wrap uni-common-mt">
			<view style="uni-title">选中的值 : </view>
			<view class="uni-textarea uni-common-mt">
				<textarea :value="pickerText" disabled placeholder="请点击下面的按钮进行选择"></textarea>
			</view>
			<view class="uni-btn-v">
				<button type="default" @click="showSinglePicker">单列选择</button>
				<button type="default" @click="showMulLinkageTwoPicker">二级联动</button>
				<button type="default" @click="showMulLinkageThreePicker">三级城市联动</button>
			</view>
		</view>
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
		<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
		 @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
	</view>
</template>

<script>
	// https://github.com/zhetengbiji/mpvue-picker
	import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
	// https://github.com/zhetengbiji/mpvue-citypicker
	import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
	import cityData from '../../../common/city.data.js';

	export default {
		components: {
			mpvuePicker,
			mpvueCityPicker
		},
		data() {
			return {
				title : "mpvue-picker 使用示例",
				pickerSingleArray: [{
						label: '中国',
						value: 1
					},
					{
						label: '俄罗斯',
						value: 2
					},
					{
						label: '美国',
						value: 3
					},
					{
						label: '日本',
						value: 4
					}
				],
				mulLinkageTwoPicker: cityData,
				cityPickerValueDefault: [0, 0, 1],
				themeColor: '#007AFF',
				pickerText: '',
				mode: '',
				deepLength: 1,
				pickerValueDefault: [0],
				pickerValueArray:[]
			};
		},
		methods: {
			onCancel(e) {
				console.log(e)
			},
			// 单列
			showSinglePicker() {
				this.pickerValueArray = this.pickerSingleArray
				this.mode = 'selector'
				this.deepLength = 1
				this.pickerValueDefault = [0]
				this.$refs.mpvuePicker.show()
			},
			// 二级联动选择
			showMulLinkageTwoPicker() {
				this.pickerValueArray = this.mulLinkageTwoPicker
				this.mode = 'multiLinkageSelector'
				this.deepLength = 2
				this.pickerValueDefault = [0, 0]
				this.$refs.mpvuePicker.show()
			},
			// 三级联动选择
			showMulLinkageThreePicker() {
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e) {
				this.pickerText = JSON.stringify(e)
			}
		},
    onBackPress() {
      if (this.$refs.mpvuePicker.showPicker) {
      	this.$refs.mpvuePicker.pickerCancel();
        return true;
      }
      if (this.$refs.mpvueCityPicker.showPicker) {
      	this.$refs.mpvueCityPicker.pickerCancel();
        return true;
      }
    },
		onUnload() {
			if (this.$refs.mpvuePicker.showPicker) {
				this.$refs.mpvuePicker.pickerCancel()
			}
			if (this.$refs.mpvueCityPicker.showPicker) {
				this.$refs.mpvueCityPicker.pickerCancel()
			}
		}
	};
</script>

<style>
	
</style>