uni-app中如何使用5+的原生界面控件(包括map、video、livepusher、barcode、nview)
uni-app中如何使用5+的原生界面控件(包括map、video、livepusher、barcode、nview)
分类:uni-app
uni-app可以调用plus的api操作扩展能力,这块很简单,在app的条件编译里直接写就好了,也不需要plus ready。
但是HTML5 里有很多原生的可视化控件,包括map、video、livepusher、barcode、nview(包括原生头、原生tab),获取这些对象和操作他们需要有特殊写法。
5 app开发时,我们可以用plus.webview.currentWebview获取当前页面,但uni-app里用法不一样,需要这样取当前显示的webview:
复制代码[code]const currentWebview = this.$mp.page.$getAppWebview(); //注意相关操作写在APP-PLUS条件编译下
之前还有一种写法比较冗余,但为了向下兼容也保留着:
复制代码[code]var pages = getCurrentPages(); var page = pages[pages.length - 1]; // #ifdef APP-PLUS var currentWebview = page.$getAppWebview(); // #endif
注意uni-app不需要像5+App那样等待plus ready,可以直接用。
有了这个currentWebview ,我们就可以做很多事情了,比如:
例子1 创建直播推流
因为uni-app暂时还没有封装统一微信的直播推流和app-plus的直播推流,在app里使用直播推流就得用这种写法了。(这里指的是推流,如果是拉流,在app侧可直接使用video标签)
复制代码[code]var pusher = plus.video.createLivePusher("", { url:'rtmp://testlivesdk.v0.upaiyun.com/live/upyunb', top:'100px', left:'0px', width: '100%', height: '300px', position: 'static' }); currentWebview.append(pusher);
在之前的5+app里,可以使用占位div来布局位置,但在uni-app里,因为没有dom,也没有占位id,只能自己设置原生控件的大小和位置了。
例子2 自定义扫码
uni-app自带的扫码界面无法有效自定义,大家可以在一个自己的页面里放置一块区域显示扫码控件。
复制代码[code]var barcode = plus.barcode.create('barcode', [plus.barcode.QR], { top:'100px', left:'0px', width: '300px', height: '300px', position: 'static' }); //此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理 //注意扫码区域需为正方形,否则影响扫码识别率 currentWebview.append(barcode);
例子3 自定义地图
uni-app的原则是vue语法+小程序api。但小程序的api不如plus.map丰富,地图的重度开发者仍然需要plus的map。
uni-app中单独优化了这个地图的获取,通过$getAppMap可直接得到map对象。
然后参考plus.map的api实现更多地图功能。
例子4 给tabbar加个凸起
注意tabbar的获取,不是走
getCurrentPages,而是用
plus.webview.currentWebview()
复制代码[code]var centerButtonOnTab = new plus.nativeObj.View("",{top:'500px',left:'160px',height:'50px',width:'50px',backgroundColor:'#FF0000'}); plus.webview.currentWebview().append(centerButtonOnTab);
这里只是基础演示,大小位置、点击事件,在实际开发中都得自己处理。
这是网友写的一个tabbar中间凸起的开源示例:https://github.com/xiaotimo/uni-app-tabbar
例子5 操作titleNView,给titleNView右上角加个红点
复制代码[code]var nTitle = currentWebview.getTitleNView(); nTitle.drawBitmap("static/reddot.png",{}, {top:'3px',left:'340px',width:'4px',height:'4px'}); //具体尺寸在商用时需自行计算。红点图在附件里。 //nview的api非常多,具体参考:http://www.html5plus.org/doc/zh_cn/nativeobj.html#plus.nativeObj.View
清除刚才绘制的红点
复制代码[code]nTitle.reset();
更新:1.5版的HBuilderX已经支持titleNView的button直接设红点了,hello uni-app的模板里运行到app时也能看到相应示例源码。所以本例子4已经过期,此处纯粹演示用。
5+的plus.nativeObj.view,本质是一种类canvas的画布,可以自由的draw内容上去,更新管理也需要自己维护操作。
包括想在原生控件比如视频、地图上加点什么东西,因为HTML的组件是盖不住原生组件的,都可以使用nview来做。
例子6 uni-app可以在vue页面里写web-view组件,这个组件如何用plus api操作?
vue页面里的web-view 组件其实是一个子webview。
在vue里,通过本文开头的代码,先得到当前页面的webview。
然后调用currentWebview.children()方法来获得所有子webview。
因为执行代码的时机不同,可能执行太早会返回空结果。
如果确定页面里有web-view,则可以再延时一下然后再获取一次children。
这样就能拿到这个子webview。
有了子webview对象后,可以用5+丰富的api来进行前进、后退、拦截资源、禁用schema跳转、注入js等各种操作。具体参考http://www.html5plus.org/doc/zh_cn/webview.html
如需要在vue页面中写代码为web-view组件覆盖内容:
- 比较简单的方式是actionsheet等原生弹出菜单,或者使用plus.nativeObj.view。这里有一个底部图标菜单的示例,可参考http://ext.dcloud.net.cn/plugin?id=69
- 在web-view组件内嵌的网页中弹出z-index更高的div。如果是外部网页,可以在vue中获得子webview对象后,通过evalJS为这个子webview注入一段js,操作其弹出div层。
- uni-app中如何使用5+的原生界面控件(包括map、video、livepusher、barcode、nview)
- (9)uniGUI for C++ builder下如何使用UniPageControl控件做成WEB多页面系统界面框架?
- APP中的 H5和原生页面如何分辨、何时使用
- 一个可以显示图片(包括GIF动画)的ATL控件,以及在RichEdit中如何使用此控件插入图片
- 如何使用App_LocalResources实现界面多语言
- 如何判断一款app使用原生实现,还是Hybrid APP
- appium+python自动化测试实践之使用uiautomatorviewer.bat+webdriver模块查找定位app界面控件(Android)
- 【示例教程】如何使用LEADTOOLS图像标注控件在界面上对图像进行标注
- 没有App_Code,如何使用ASP.NET控件?
- 一个可以显示图片(包括GIF动画)的ATL控件,以及在RichEdit中如何使用此控件插入图片
- APP中的 H5和原生页面如何分辨、何时使用
- 如何使用sencha-touch控件显示平板上的tab界面
- 如何使用MUI框架开发移动APP界面
- APP中的 H5和原生页面如何分辨、何时使用
- 如何使用dotnetbar控件来构造多文档界面
- 使用地图控件MapView如何申请apiKey
- 没有App_Code,如何使用ASP.NET控件?
- 没有App_Code,如何使用ASP.NET控件?
- 使用地图控件MapView如何申请apiKe…
- 使用ActionBar和DrawerLayout纯原生控件,实现侧滑栏和滑动Tab界面