更新记录

1.0.6(2023-09-01)

  1. 修复iOS 禁止前进历史问题

1.0.5(2023-08-30)

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

1.0.4(2022-04-02)

1.增加自定义请求头 2.支持自定义修改UserAgent 3.支持增加、获取、删除cookie

  1. 增加加载webview控件回调onLoadView
查看更多

平台兼容性

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

原生插件通用使用流程:

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

付费原生插件目前不支持离线打包。
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;'" @="" @onLoadFinish="onLoadFinish" @onLoadError="onLoadError" @="" @onJSData="onJSData"></wrs-webview>

属性

  • url webview加载地址,可以是本地H5文件地址或远程网络地址
  • config 配置 progressColor 进度条颜色 scrollIndicator 是否显示滚动条
  • 开始加载
  • onLoadFinish 加载完成
  • onLoadError 加载出错
  • 加载进度
  • 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

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

隐私、权限声明

1. 本插件需要申请的系统权限列表:

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS" /> <uses-permission android:name="android.permission.CAMERA" /> <uses-feature android:name="android.hardware.camera" /> <uses-feature android:name="android.hardware.camera.autofocus" />

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问