前言
wrs-webview是webview的组件，支持本地、网络url、h5源码富文本,加载进度、加载结果回调，H5 js、nvue通讯传值、文件选择、相机拍照、相机录像、录音、alert、confirm、prompt
功能
- 支持本地、网络url、h5源码富文本, 加载进度、加载结果回调
- 支持H5 js、nvue通讯互调传值
- 支持文件选择、相机拍照、相机录屏
- 支持alert、confirm、prompt
原生插件通用使用流程
HBuildX集成原生插件请参考:https://www.jianshu.com/p/1418c9e73eb3 或官网https://nativesupport.dcloud.net.cn/NativePlugin/use/use
wrs-webview组件
温馨提示:本文档在插件市场显示有些属性、事件、代码实例等显示有兼容性问题，完成文档请查看下面的组件文档链接
<wrs-webview
:config="config"
ref='webview'
:url="url"
:style="'width:'+width+'px;height:'+height+'px;'"
@onLoadStart="onLoadStart"
@onLoadFinish="onLoadFinish"
@onLoadError="onLoadError"
@onProgress="onProgress"
@onJSData="onJSData">
</wrs-webview>
属性
- url webview加载地址，可以是本地H5文件地址或远程网络地址
- config 配置
progressColor 进度条颜色
scrollIndicator 是否显示滚动条 - onLoadStart 开始加载
- onLoadFinish 加载完成
- onLoadError 加载出错
- onProgress 加载进度
- onJSData 接收到H5 js发送的数据
方法
- this.$refs.webview.sendDataToJS() 调用H5 JS的函数,并获取函数返回值
如：调用login函数，函数参数是‘123456’字符串
var params = {};
params.js = "login('123456')";
this.$refs.webview.sendDataToJS(params);
function login(account) {
alert('登录，账号：' + account);
}
如果函数参数是个Object对象，则
var params = {};
params.account = '123456';
var options = {};
options.js = "register("+JSON.stringify(params)+")";
this.$refs.webview.sendDataToJS(options);
function register(params) {
alert('注册，账号：' + params.account);
}
如果js函数有返回值，则
var params = {};
params.a = 1;
params.b = 2;
var options = {};
options.js = "add("+JSON.stringify(params)+")";
this.$refs.webview.sendDataToJS(options, (resp) => {
console.log("a + b = " + resp.result);
});
function add(params) {
return {
result: params.a + params.b
};
}
- webview的H5 JS发送数据给nvue，会回调 @onJSData事件
var params = {};
params.msg = "你好，我是JS";
if(IOS) {
window.webkit.messageHandlers.bridge.postMessage(params);
} else if (ANDROID) {
var jsonStr = JSON.stringify(params);
window.messageHandlers.bridge(jsonStr);
}
如果参数为空时，iOS需要传个空对象，防止出错，如：
if(IOS) {
window.webkit.messageHandlers.bridge.postMessage({});
} else if (ANDROID) {
window.messageHandlers.bridge();
}
- this.$refs.webview.goBack() 返回上一个历史
- this.$refs.webview.goForward() 前往下一个历史
- this.$refs.webview.reload() 重新加载刷新
- this.$refs.webview.stopLoading() 停止加载刷新
- this.$refs.webview.backForwardList(callback) 获取当前历史
this.$refs.webview.backForwardList((resp) => {
if(isString(resp)) {
console.log("listory is String");
} else {
console.log("listory is not String" );
resp = JSON.stringify(resp);
}
console.log("listory:" + resp );
});
完整demo
index.nvue
<template>
<div>
<text>WebView</text>
<text class="log">{{msg}}</text>
<wrs-webview :config="config" ref='webview' :url="url"
:style="'width:'+width+'px;height:'+height+'px;'" @onLoadStart="onLoadStart" @onLoadFinish="onLoadFinish" @onLoadError="onLoadError" @onProgress="onProgress" @onJSData="onJSData"></wrs-webview>
<button @click="changeUrl()">加载其他网址</text></button>
<button @click="sendDataToJS()">发送消息数据给JS</button>
</div>
</template>
<script>
String.prototype.endWith = function(endStr) {
var d = this.length - endStr.length;
return (d >= 0 && this.lastIndexOf(endStr) == d)
}
export default {
data() {
return {
url: 'http://www.baidu.com',
index: 0,
msg: "",
config: {
progressColor: "#ff00ff",
scrollIndicator: false
}
}
},
onLoad() {
// 设置播放器宽高，一般宽度铺满全屏，宽高比是16:9
const {
windowWidth,
windowHeight
} = uni.getSystemInfoSync();
this.width = windowWidth;
this.height = this.width / (16.0 / 9.0);
},
methods: {
changeUrl: function(){
this.index ++;
if(this.index % 3 == 0) {
this.url = "http://www.baidu.com";
} else if(this.index % 3 == 1){
var absPath = plus.io.convertLocalFileSystemURL('_www');
// Android获取的absPath以/结尾，iOS获取的absPath不是/结尾
if (absPath.endWith('/')) {
absPath = absPath.substring(0, absPath.length - 1);
}
this.url = absPath + "/static/loginSys/index.html"
} else {
this.url = "<body><h1>静态网站</h1></body>";
}
},
onProgress: function(resp){
this.showMsg("加载进度:" + JSON.stringify(resp.detail))
},
onLoadStart: function(resp) {
this.showMsg("开始加载:" + JSON.stringify(resp.detail))
},
onLoadFinish: function(resp) {
this.showMsg("加载完成:" + JSON.stringify(resp.detail))
},
onLoadError: function(resp) {
this.showMsg("加载出错:" + JSON.stringify(resp.detail))
},
onJSData: function(resp){
this.showMsg("收到JS消息:" + JSON.stringify(resp.detail))
},
sendDataToJS: function() {
// var options = {};
// options.js = "login('123456')";
// this.$refs.webview.sendDataToJS(options);
var params = {};
params.account = '123456';
var options = {};
options.js = "register("+JSON.stringify(params)+")";
this.$refs.webview.sendDataToJS(options);
},
showMsg: function(msg) {
this.msg = msg;
}
}
}
</script>
<style>
.btn {
margin-top: 25rpt;
}
</style>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="./css/index.css">
<script type="text/javascript" src="./js/index.js"></script>
</head>
<body>
<h1>静态网站</h1>
<p class="title">标题</p>
<img src="./images/logo.png" alt="Big Boat">
<h1 onclick="clickAlert()">Alert</h1>
<h1 onclick="clickConfirm()">Confirm</h1>
<h1 onclick="clickPrompt()">Prompt</h1>
<h1 onclick="clickNative()">JS发送数据给原生</h1>
<br />
<h1 >请选择文件:</h1>
<input type="file" name="lname" />
<br />
<h1 >照相机拍照:</h1>
<input type="file" accept="image/*" id="capture" capture="camera">
<br />
<h1 >录音(只支持iOS):</h1>
<input type="file" accept="audio/*" id="capture" capture="camera">
<input type="file" accept="audio/*" capture="microphone">
<br />
<h1 >摄像机录像:</h1>
<input type="file" accept="video/*" id="capture" capture="camcorder">
<br />
</body>
</html>
index.js
var browser={
versions:function(){
var u = navigator.userAgent;
var app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, //IE内核
presto: u.indexOf('Presto') > -1, //opera内核
webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
qq: u.match(/\sQQ/i) == " qq" //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
var IOS = browser.versions.ios;
var ANDROID = browser.versions.android;
function clickTitle() {
console.log("点击了标题");
alert("点击了标题");
}
function clickAlert() {
console.log("点击了标题");
alert("您好");
}
function clickConfirm() {
var result = confirm('是否删除！');
if (result) {
alert('删除成功！');
} else {
alert('不删除！');
}
}
function clickPrompt() {
var value = prompt('输入你的名字：', '默认名字');
if (value == null) {
alert('你取消了输入！');
} else if (value == '') {
alert('姓名输入为空，请重新输入！');
} else {
alert('你好，' + value);
}
}
function login(account) {
alert('登录，账号：' + account);
}
function register(params) {
alert('注册，账号：' + params.account);
}
function clickNative() {
var params = {};
params.msg = "你好，我是JS";
if(IOS) {
window.webkit.messageHandlers.bridge.postMessage(params);
} else if (ANDROID) {
var jsonStr = JSON.stringify(params);
window.messageHandlers.bridge(jsonStr);
}
}
function alertMsg(msg) {
alert(msg);
}
组件文档:https://www.jianshu.com/p/87606a8eaf2c
支持定制，联系方式 QQ:252797991
网友评论