DCloud_heavensoft
DCloud_heavensoft
  • 发布:2018-09-20 06:55
  • 更新:2024-07-10 09:30
  • 阅读:172509

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:

const currentWebview = this.$mp.page.$getAppWebview(); //注意相关操作写在APP-PLUS条件编译下

还有一种写法比较冗余,可以获取页面栈中任意一个webview对象:

var pages = getCurrentPages();  
var page = pages[pages.length - 1];  
// #ifdef APP-PLUS  
var currentWebview = page.$getAppWebview(); //页面栈最顶层就是当前webview  
// #endif

注意uni-app不需要像5+App那样等待plus ready,可以直接用。
有了这个currentWebview ,我们就可以做很多事情了,比如:

例子1 创建直播推流

虽然uni-app的nvue页面已经提供了直播组件。但uni-app的vue页面还没有封装,在app里的vue页面使用直播推流就得用这种写法了。(这里指的是推流,如果是拉流,在app侧可直接使用video标签)

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,所以通过js自己设置原生控件的大小和位置。

例子2 自定义扫码

uni-app的扫码api自带的扫码界面无法有效自定义,大家可以在一个自己的页面里放置一块区域显示扫码控件。

var barcode = plus.barcode.create('barcode', [plus.barcode.QR], {  
    top:'100px',  
    left:'0px',  
    width: '300px',  
    height: '300px',  
    position: 'static'  
});  
//此处未演示扫码成功回调的地址设置,实际请参考HTML5Plus API自行处理  
//注意扫码区域需为正方形,否则影响扫码识别率  
currentWebview.append(barcode);

当然如果使用app-nvue的话,有自带的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()

var centerButtonOnTab = new plus.nativeObj.View("",{top:'500px',left:'160px',height:'50px',width:'50px',backgroundColor:'#FF0000'});  
plus.webview.currentWebview().append(centerButtonOnTab);

这里只是基础演示,大小位置、点击事件,在实际开发中都得自己处理。
插件市场有已经做好的例子:https://ext.dcloud.net.cn/plugin?id=251

如果app端想要高性能的tabbar凸起,建议使用nvue在前端自绘tabbar。

例子5 操作titleNView,给titleNView右上角加个红点

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

清除刚才绘制的红点

nTitle.reset();

更新:1.5版的HBuilderX已经支持titleNView的button直接设红点了,hello uni-app的模板里运行到app时也能看到相应示例源码。所以本例子实际作用已经过期,此处纯粹演示用。

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等各种操作。具体参考https://www.html5plus.org/doc/zh_cn/webview.html

具体请参考web-view组件的文档

51 关注 分享
清寒 8***@qq.com Trust 诗小柒 v***@163.com x***@sina.com Neil_HL 7***@qq.com 独孤雄鹰 蔡晓亮 4***@qq.com 4***@qq.com Wcheng 9***@qq.com i***@qq.com utopiab 鸿碧青山 b***@126.com j***@139.com ilijiayin 草灯 2***@qq.com skysowe shwanYu m***@163.com 1***@qq.com joelewis k***@gmail.com Smart900zhang sonicsunsky 3***@qq.com 睡着就睡着了 2***@qq.com 2***@qq.com 1***@qq.com l***@126.com Anoxia y***@163.com l***@163.com 漂流瓶 1***@qq.com 迷茫的路人乙 丸崽 2***@qq.com 1***@qq.com 6***@qq.com l***@qq.com 点点0323 小白UNI HRK_01

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 1***@qq.com :
不是不显示,是没办法超出底部原生导航,安卓中可以,ios无效
2019-04-12 14:55
GUNDAM

GUNDAM

回复 DCloud_heavensoft :
--status-bar-height css高度计算为何iphonex 和iphone6小程序模拟器信号栏都是25px iphonex应该44px吧
2019-04-12 14:34
1***@qq.com

1***@qq.com

例子3中的 centerButtonOnTab 在ios7plus 中不显示,求助
2019-04-12 14:31
DCloud_heavensoft

DCloud_heavensoft (作者)

回复 incess :
看plus.webview的api,appendjs或evaljs等方法都可以
2019-04-11 17:25
incess

incess

注入JS详细说一下,具体怎么注入JS 一直没找到这方面的解释
2019-04-11 14:27
1***@qq.com

1***@qq.com

更新最新版本HBuilderX后,创建直播推流就闪退是什么回事
2019-04-09 10:53
峰业昳

峰业昳

我把扫码控件弄出来了,但是它就是只显示图,不扫码。
我放在onLoad()里:
var pages = getCurrentPages();
var page = pages[pages.length - 1];
// #ifdef APP-PLUS
var currentWebview = page.$getAppWebview();
// #endif
this.barcode = plus.barcode.create('barcode', [plus.barcode.QR,plus.barcode.EAN8,plus.barcode.EAN13], {
left:'0px',
width: '100%',
height: '100%',
position: 'static',
frameColor:'#00FF00',
scanbarColor:'#00FF00'
});
var scan = this.barcode;
scan.onmarked=this.onmarked;
scan.start();

currentWebview.append(this.barcode);
2019-03-27 14:30
2***@qq.com

2***@qq.com

请问做直播,除了又拍云还有其他方案么?
又拍云现在升级维护,无法使用
2019-03-12 20:43
水沟小鱼

水沟小鱼

我还是不懂怎么直接调用html5+api 啊?
2019-03-11 11:54
hugo_yu

hugo_yu

回复 颓废市民小高 :
地图那个可以获取webview后再将创建的地图加入进去
2019-02-23 13:34