vant 组件 ---h5使用van-uploader组件上传图片嵌套微信小程序安卓机器不显示相机(因ios不会出现问题,不做处理)
vant 组件
·
<van-field name="photo" label="营业执照" >
<template #input>
<van-uploader :capture="androidAttrs ? 'camera' : null" v-model="parameter.photo" multiple :max-count="1" :after-read="afterReadPhoto"/>
</template>
</van-field>
data(){
return {
androidAttrs:null
}
created(){
// 在页面一进来时就去判断当前使用机型
const model=navigator.userAgent;
// 判断是否是安卓手机,是则是true
this.androidAttrs=model.indexOf('Android') > -1 || model.indexOf('Linux') >-1
}
1:上述方法只适合把h5嵌套在小程序上打开,不能单独打开,如果把H5在安卓机器上单独打开的话,就只能打开打开摄像头不能去图库选择
2:如果希望可以让H5在微信小程序里打开相机(安卓)也希望独立使用(安卓)使用更全面的方法,那么我们就要在代码里首先判断是不是在小程序里,然后再判断系统类型
data(){
return {
androidAttrs:null
}
created(){
this.isWeChatApplet()
}
methods: {
/*判断是否是在小程序中*/
isWeChatApplet() {
const ua = window.navigator.userAgent.toLowerCase();
return new Promise((resolve) => {
if (ua.indexOf('micromessenger') == -1) {//不在微信或者小程序中
resolve(true);
} else {
wx.miniProgram.getEnv((res) => {
if (res.miniprogram) {//在小程序中
resolve(false);
// 在页面一进来时就去判断当前使用机型
const model=navigator.userAgent;
// 判断是否是安卓手机,是则是true
this.androidAttrs=model.indexOf('Android') > -1 || model.indexOf('Linux') >-1
} else {//在微信中
resolve(true);
}
});
}
});
},
}
更多推荐
已为社区贡献4条内容
所有评论(0)