Next.js

<hr style="display: none;"> <h2 style="display: none;">theme: awesomeGreen</h2> <h2>前言</h2> <p>通常为了开发效率，我们会使用uniapp开发，同时编译部署到多个平台。比如微信小程序、app...假如有这么个需求，需要上传媒体文件到服务器，就涉及到了系统权限的请求问题。</p> <p>如果上传文件的逻辑是写在uniapp项目里，uniapp自有一套api可供使用，这里不做讨论。但如果逻辑是写在h5页面中，如何获取手机的应用权限呢？</p> <h2>获取app的应用权限</h2> <p>通常app内嵌的h5需要获取应用的原生方法或者其他信息，会引用应用提供的各种bridge方法。（由于不了解app开发，这种方法是否只适用于app的webview直接渲染的h5页面，如果有知道的jy欢迎评论区留言，感谢）。</p> <p>app内嵌uniapp，uniapp使用webview渲染的h5这种情况，由于uniapp的app端已经集成<a href="https://www.html5plus.org/doc/zh_cn/accelerometer.html#">html5 plus</a>规范，所以可以调用plus方法获取app的各种状态。这里又涉及到uniapp和h5的通信问题，刚好uniapp的webview给我们提供了这种通信方法。在h5页面中调用<em>uni.postMessage</em>方法可以向uniappp通信(h5页面要引用相关的uniapp js文件)，同时在uniapp的项目中通过监听webview的<em>onPostMessage</em>方法，可以获取到h5的通信，获取通信后再调用plus方法获取权限。<strong>plus方法只有在app端才有效，要注意条件编译</strong>。</p> <h2>示例代码</h2> <pre><code class="language-js">//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 = ()=&gt;{
    if(isApp){
        return uni.webView.postMessage({
                data: {
                    type:"permission",
                    data:{
                        permissionID: 'photoLibrary'
                    }
                }
            });
       }
    }
}

} </code></pre>

<pre><code class="language-js">// uniapp wenview <template> <view>  <web-view ref="webview" :src="src" />   <web-view ref="webview" :src="src" @message="handlePostMessage" @onPostMessage="handlePostMessage"/>  </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> </code></pre> <h2>结束</h2> <p>其实方法很简单，但是对于没接触这块的同学（我有一个同学...），要找到具体方法，可能会花费一点时间。</p>