uniapp内嵌h5如何获取应用权限？

前言

通常为了开发效率，我们会使用uniapp开发，同时编译部署到多个平台。比如微信小程序、app…假如有这么个需求，需要上传媒体文件到服务器，就涉及到了系统权限的请求问题。

如果上传文件的逻辑是写在uniapp项目里，uniapp自有一套api可供使用，这里不做讨论。但如果逻辑是写在h5页面中，如何获取手机的应用权限呢？

获取app的应用权限

通常app内嵌的h5需要获取应用的原生方法或者其他信息，会引用应用提供的各种bridge方法。（由于不了解app开发，这种方法是否只适用于app的webview直接渲染的h5页面，如果有知道的jy欢迎评论区留言，感谢）。

app内嵌uniapp，uniapp使用webview渲染的h5这种情况，由于uniapp的app端已经集成html5 plus规范，所以可以调用plus方法获取app的各种状态。这里又涉及到uniapp和h5的通信问题，刚好uniapp的webview给我们提供了这种通信方法。在h5页面中调用uni.postMessage方法可以向uniappp通信(h5页面要引用相关的uniapp js文件)，同时在uniapp的项目中通过监听webview的onPostMessage方法，可以获取到h5的通信，获取通信后再调用plus方法获取权限。plus方法只有在app端才有效，要注意条件编译。

示例代码

//h5页面
export default {
    setup(){
        var userAgent = navigator.userAgent;
        let isApp = true;
        loadScript('https://static.jingrizf.com/js/c76c848a15a248e0902761747f449865.js')
        if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
            loadScript('https://res.wx.qq.com/open/js/jweixin-1.4.0.js')
            isApp = false;
        }
        
        
       // uniapp的环境js 创建script标签插入到body后，加载js
        loadScript('https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.4.js')；
        
        //获取权限
        const getAuth = ()=>{
        if(isApp){
            return uni.webView.postMessage({
                    data: {
                        type:"permission",
                        data:{
                            permissionID: 'photoLibrary'
                        }
                    }
                });
           }
        }
    }
}

// uniapp wenview
<template>
    <view>
        <!-- #ifdef MP -->
        <web-view ref="webview" :src="src" />
        <!-- #endif -->
        <!-- #ifndef MP -->
        <web-view  ref="webview" :src="src" @message="handlePostMessage"  @onPostMessage="handlePostMessage"/>
        <!-- #endif -->
    </view>
</template>

<script>
export default {
    data () {
        return {
            src: ''
        }
    },
    onLoad ({ r }) {
        this.src = decodeURIComponent(r)
    },
	methods:{
	    async handlePostMessage(e){
          // #ifndef MP
          const {type,data} = e.detail.data[0];
		if(type == 'permission'){
                //示例代码 获取安卓手机的定位权限 https://www.html5plus.org/doc/zh_cn/android.html#plus.android.requestPermissions
                plus.android.requestPermissions(['android.permission.ACCESS_FINE_LOCATION'], function(e){
                    if(e.deniedAlways.length>0){	//权限被永久拒绝
                            // 弹出提示框解释为何需要定位权限，引导用户打开设置页面开启
                            console.log('Always Denied!!! '+e.deniedAlways.toString());
                    }
                    if(e.deniedPresent.length>0){	//权限被临时拒绝
                            // 弹出提示框解释为何需要定位权限，可再次调用plus.android.requestPermissions申请权限
                            console.log('Present Denied!!! '+e.deniedPresent.toString());
                    }
                    if(e.granted.length>0){	//权限被允许
                        //调用依赖获取定位权限的代码
                            console.log('Granted!!! '+e.granted.toString());
                    }
                }, function(e){
                    console.log('Request Permissions error:'+JSON.stringify(e));
                });

                }
            }
            // #endif
		},
	}
}
</script>

结束

其实方法很简单，但是对于没接触这块的同学（我有一个同学…），要找到具体方法，可能会花费一点时间。