webview JS与nvue通讯 cookie UserAgent 定义请求头

更新记录

1.0.7（2024-07-03）

修复Android H5调用uniapp接口时传参数键值对互换问题

1.0.6（2023-09-01）

修复iOS 禁止前进历史问题

1.0.5（2023-08-30）

ios增加开启/禁止左滑/右滑返回/前进历史的接口

平台兼容性

Android	Android CPU类型	iOS
适用版本区间：4.4 - 11.0	armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试	适用版本区间：9 - 14

原生插件通用使用流程：

购买插件，选择该插件绑定的项目。
在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

前言

wrs-webview是webview的组件，支持本地、网络url、h5源码富文本,加载进度、加载结果回调，H5 js、nvue通讯传值、文件选择、相机拍照、相机录像、录音、alert、confirm、prompt,支持修改UA(UserAgen)、cookie，自定义请求头

UTS版本(支持vue2vue3)https://ext.dcloud.net.cn/plugin?id=17077

功能

支持本地、网络url、h5源码富文本, 加载进度、加载结果回调
支持H5 js、nvue通讯互调传值
支持文件选择、相机拍照、相机录屏
支持alert、confirm、prompt
支持修改UA(UserAgen)、cookie、自定义请求头

wrs-webview组件

温馨提示:本文档在插件市场显示有些属性、事件、代码实例等显示有兼容性问题，完成文档请查看下面的组件文档链接

<wrs-webview :config="config" ref='webview' :url="url" :style="'width:'+width+'px;height:'+height+'px;'" @onLoadStart="" @onLoadFinish="onLoadFinish" @onLoadError="onLoadError" @onProgress="" @onJSData="onJSData"></wrs-webview>

属性

url webview加载地址，可以是本地H5文件地址或远程网络地址
config 配置 progressColor 进度条颜色 scrollIndicator 是否显示滚动条
onLoadStart 开始加载
onLoadFinish 加载完成
onLoadError 加载出错
onProgress 加载进度
onJSData 接收到H5 js发送的数据
onLoadView 加载webview控件,在这个方法中或方法后才能调用相关API

方法

this.$refs.webview.setCompleteUrl 改变URL


                    this.$refs.webview.setCompleteUrl({
                        url: this.testUrl,
                        headers: { // 增加自定义请求头
                            "token": "xxx",
                            "Cookie": "address=guangzhou;weight=20;", // 增加请求头Cookie
                            "user-agent": "User Agent Value"     // 修改请求头UserAgent
                        }
                    });

this.$refs.webview.getUserAgent 获取UA(UserAgent)


                this.$refs.webview.getUserAgent((resp) => {
                     resp.userAgent;
                });

this.$refs.webview.setUserAgent 设置UA(UserAgent)


                    var params = {};
                    params.userAgent = resp.userAgent + "/MyCustonUserAgent";
                    this.$refs.webview.setUserAgent(params, (resp) => {

                    });

this.$refs.webview.setCookie 设置Cookie

iOS端：


                var cookie = {};
                cookie.Name = params.name; // 必填
                cookie.Value = params.value; // 必填
                cookie.Domain = this.testHost; // // 必填 ip 或域名(如：www.baidu.com)
                cookie.OriginURL = "www.baidu.com";
                cookie.Path = "/"; // 必填
                cookie.Version = "1";
                cookie.Discard = "0";
                // cookie.Expires = 21212121; // 过期时间，时间戳

                this.$refs.webview.setCookie({
                    cookies: [cookie]
                }, (resp) => {

                });

Android端:


                var params = {};
                params.cookies = [{
                    url: "http://192.168.11.10:8080/cookie/a", // url在同域下才能设置成功
                    cookie: "uniappsex=male;Domain=192.168.11.10;Path = /;"
                }];
                this.$refs.webview.setCookie(params, (resp) => {

                });

this.$refs.webview.getCookie 获取Cookie

host参数不传的话返回所有的cookie


                switch (uni.getSystemInfoSync().platform) {
                    case 'android':
                        var params = {};
                        params.host = this.testUrl; // android的host需要传完整的url地址
                        this.$refs.webview.getCookie(params, (resp) => {
                            // ios、Android返回的数据格式字段不一样，需要各个做适配
                            console.log("cookie：" + JSON.stringify(resp));
                            this.showMsg("cookie：" + JSON.stringify(resp));
                        });
                        break;
                    case 'ios':
                        var params = {};
                        params.host = this.testHost; // 必填 ip 或域名(如：www.baidu.com)
                        this.$refs.webview.getCookie(params, (resp) => {
                            // ios、Android返回的数据格式字段不一样，需要各个做适配
                            console.log("cookie：" + JSON.stringify(resp));
                            this.showMsg("cookie：" + JSON.stringify(resp));
                        });
                        break;
                    default:
                        break;
                }

this.$refs.webview.synchH5Cookie ios同步cookie,默认情况下，在H5端设置的cookie在下次使用webview或app重启后无法持久化保存，调用synchH5Cookie接口后就可以持久化保存，只支持iOS，Android端不需要


                        this.$refs.webview.synchH5Cookie((resp) => {

                        });

删除cookie

url参数不传的话删除所有的cookie，目前url参数只对iOS生效，Android无法删除url域名下的cookie，Android只能删除所有的cookie,android端如果需要删除url域名下cookie可以在H5端进行删除


                var params = {};
                params.url = this
                    .testUrl; // 删除这个url域名下的所有cookie,url为空或不传则删除所有站点的cookie,url带上协议的全域名，比如https://www.baidu.com
                this.$refs.webview.clearCookie(params, (resp) => {

                });

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

获取网页title


 this.$refs.webview.getTitle((resp) => {
    var title = resp.title;
    this.title = title;
    this.showMsg("title:" +title);
 });

webview显示隐藏滚动条


var params = {};
params.showsVerticalScrollIndicator = false;
params.showsHorizontalScrollIndicator = false;
this.$refs.webview.setScrollBar(params);

开启禁止iOS右滑返回上一个历史


var params = {};
params.enable = true; // true/false
this.$refs.webview.setBackNavigationGestures(params);

开启禁止iOS左滑前进下一个历史


var params = {};
params.enable = true; // true/false
this.$refs.webview.setForwardNavigationGestures(params);

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