[移动开发]webview JS与nvue通讯传值

前言

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);
}

支持定制，联系方式 QQ:252797991

如果觉得可以就点个👍吧，欢迎粉丝收藏，土豪打赏，您的关注就是我们创作的动力！