更新记录

1.0.2（2022-10-17）

修复Android文件上传

1.0.1（2022-09-27）

修复了iOS闪退bug

1.0.0（2021-10-18）

实现方法有：loadURL，loadFile，loadHTML，getUrl，getOriginalUrl（获取网页加载初始url），getTitle，getFavicon（获取网页favicon），getProgress，reload（刷新），stopLoading，canGoBack，goBack，canGoForward，goForward，clearCache（清除缓存），backForwardList（前进后退列表），evalJS（执行js代码），getCookie，setCookie，removeCookie

查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间：5.0 - 12.0 armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试 适用版本区间：11 - 15

原生插件通用使用流程：

  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原生插件配置”->”云端插件“列表中删除该插件重新选择

简介

rt-webview是Android和iOS原生webview组件，实现的功能有实现了JS和nvue通讯，获取网页cookie，设置网页cookie，移除网页cookie，监听网页加载过程，设置网页userAgent等诸多方法。

插件api

事件

  • pageStarted

网页开始加载事件监听

onPageStarted: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'url': '当前加载网页的url地址'}
}
  • pageFinished

网页开始结束事件监听

onPageFinished: function(e) {
    console.log(e.detail);//同onPageStarted
}
  • receivedError

网页加载错误事件监听

onReceivedError: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'request': {'url': '当前加载网页的url地址'}, 'error': {'code': '错误码', 'desc': '错误描述'}}
}
  • scaleChanged

网页缩放事件监听

onScaleChanged: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'oldScale': '当前网页缩放之前的scale', 'newScale': '当前网页缩放之后的scale，float类型'}
}
  • progressChanged

网页加载进度事件监听

Changed: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'progress': '当前网页加载的进度，float类型，范围在0-1之间'}
}
  • receivedTitle

网页标题事件监听

onReceivedTitle: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'title': '当前网页标题'}
    uni.setNavigationBarTitle({
        title:e.detail.title
    });
}
  • receivedFavicon

网页Favicon图标事件监听

onReceivedFavicon: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'favicon': '当前网页的base64格式图标'}
}
  • receivedJsMsg

当webview接收到js发送的数据事件监听

OnReceivedJsMsg: function(e) {
    console.log(e.detail);//该事件返回的数据e.detail格式为{'message': '网页中js发送给nvue的消息，字符串类型'}
}

网页中js发送消息到nvue方法

var userAgent = navigator.userAgent;
var isAndroid = userAgent.indexOf('Android') > -1 || userAgent.indexOf('Adr') > -1;
var isiOS = !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
if (isAndroid) {
    window.RTWebObj.postMessage("android_msg");
} else if (isiOS) {
    window.webkit.messageHandlers.RTWebObj.postMessage("ios_msg");
}

属性

属性名 类型 必填 说明
mediaAutoPlay BOOL false 是否容许媒体自动播放，默认false
userAgent String false 设置webview的useragent，不设置则为原生webview自带的useragent
jsEnabled BOOL false 设置是否启用对Javascript的支持，，默认true
cacheMode int false 设置浏览器的缓存模式。可取值： 0：默认值。当存在缓存且未过期时加载缓存数据，否则通过网络加载数据。1：只要存在缓存，不管是够过期都加载缓存数据，否则通过网络加载数据。2：不使用缓存。仅通过网络加载数据。3：只使用缓存。仅加载缓存数据，不通过网络加载数据。

方法

  • loadURL(url)

加载网页URL地址

参数名 类型 必填 说明
url String true url地址，eg：http://www.baidu.com

代码示例

this.$refs.webview.loadURL('http://www.baidu.com')
  • loadFile(filePath)

加载本地文件

参数名 类型 必填 说明
filePath String true 文件路径，eg：/static/demo.html

代码示例

this.$refs.webview.loadFile('/static/demo.html')
  • loadHTML(html)

加载网页源代码

参数名 类型 必填 说明
html String true html代码，eg：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>html</title></head><body><div style="width: 100px; height: 100px; background-color: #007AFF;"></div></body></html>

代码示例

this.$refs.webview.loadHTML('<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>html</title></head><body><div style="width: 100px; height: 100px; background-color: #007AFF;"></div></body></html>')
  • getUrl(CALLBACK)

获取网页当前url地址

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.getUrl(url => {
    console.log(url);
});
  • getOriginalUrl(CALLBACK)

获得当前网页的原始url,之所以会有原始url的概念，是因为某些网页会执行重定向操作，那么通过这个方法获取的就是重定向之前的url。此外，这个方法和getUrl类似，如果当前网页还未加载完毕，那么获得的就是旧的原始url。

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.getOriginalUrl(url => {
    console.log(url);
});
  • getTitle(CALLBACK)

获得当前网页的标题

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.getTitle(title => {
    console.log(title);
});
  • getFavicon(CALLBACK)

获得当前网页的图标，回调的result为网页图标favicon base64格式

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.getFavicon(favicon => {
    console.log(favicon);
});
  • getProgress(CALLBACK)

获得当前网页的加载进度（0-1）

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.getProgress(progress => {
    console.log(progress);
});
  • reload()

刷新页面

代码示例

this.$refs.webview.reload()
  • stopLoading()

停止加载网页

代码示例

this.$refs.webview.stopLoading()
  • canGoBack(CALLBACK)

判断webview是否可以后退

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.canGoBack(result => {
    console.log(result);
});
  • goBack()

后退网页

代码示例

this.$refs.webview.goBack()
  • canGoForward(CALLBACK)

判断webview是否可以前进

属性 类型 必填
回调函数 Function true

代码示例

this.$refs.webview.canGoForward(result => {
    console.log(result);
});
  • goForward()

前进网页

代码示例

this.$refs.webview.goForward()
  • clearCache(flag)

清除缓存,传入false仅清除内存缓存，传入true将同时

参数名 类型 必填 说明
flag BOOL true false表示仅清除内存缓存，true表示同时清除内存和磁盘缓存

代码示例

this.$refs.webview.clearCache(true)
  • canGoBackOrForward(steps, CALLBACK)

判断网页是否可以前进或后退多少步

参数名 类型 必填 说明
steps int true 大于0表示前进（forward），小于0表示后退（back）
CALLBACK Function true 回调结果

代码示例

this.$refs.webview.canGoBackOrForward(2, result => {
    console.log(result);
});
  • goBackOrForward(steps)

网页前进或后退多少步

参数名 类型 必填 说明
steps int true 大于0表示前进（forward），小于0表示后退（back）

代码示例

this.$refs.webview.goBackOrForward(2)
  • backForwardList(CALLBACK)

获取当前webview的前进后退列表

CALLBACK 返回参数说明

参数名 类型 说明
currentIndex int 当前网页在前进后退列表数组中的索引
items array 前进后退网页列表数组

代码示例

this.$refs.webview.backForwardList(result => {
    console.log(result);
});
  • evalJS(js, CALLBACK)

在网页中执行JS代码

参数名 类型 说明
js String 需要在网页中调用的JS代码
CALLBACK Function js执行的结果回调

代码示例

this.$refs.webview.evalJS('alert("ok")', result => {
    console.log('evalJS:' + result);
});
  • getCookie(OBJECT, CALLBACK)

获取cookie

OBJECT 参数说明

参数名 类型 必填 说明
name String false cookie名称，如果不传入name，则获取domain下的所有cookie
domain String true cookie域名
path String false cookie的路径，不填默认'/'

CALLBACK 返回参数

参数名 类型 说明
name String cookie名称
value String cookie值
domain String cookie域名
path String cookie的路径

代码示例

this.$refs.webview.getCookie({
    'name':'rt_cookiename',
    'domain': 'm.baidu.com',
    'path': '/'
}, result => {
    console.log(result);
});
  • setCookie(OBJECT)

设置cookie

OBJECT 参数说明

参数名 类型 必填 说明
name String true cookie名称
value String true cookie值
domain String true cookie域名
path String false cookie的路径，不填默认'/'
max-age int false cookie存活时间，单位秒

代码示例

this.$refs.webview.setCookie({
    'name':'rt_cookiename',
    'value': 'rt_cookievalue',
    'max-age': '3600',
    'domain': 'm.baidu.com',
    'path': '/'
});
  • removeCookie(OBJECT)

移除cookie

OBJECT 参数说明

参数名 类型 必填 说明
name String true cookie名称
domain String true cookie域名
path String false cookie的路径，不填默认'/'

代码示例

this.$refs.webview.removeCookie({
    'name':'rt_cookiename',
    'domain': 'm.baidu.com',
    'path': '/'
});

使用demo

<template>
    <view class="view">
        <rt-webview ref="webview" 
            class="webview"
            @pageStarted="onPageStarted" //网页开始加载事件监听
            @pageFinished="onPageFinished" //网页开始结束事件监听
            @receivedError="onReceivedError" //网页加载错误事件监听
            @scaleChanged="onScaleChanged" //网页缩放事件监听
            @progressChanged="Changed" //网页加载进度事件监听
            @receivedTitle="onReceivedTitle" //网页标题事件监听
            @receivedFavicon="onReceivedFavicon"//网页图标事件监听
            @receivedJsMsg="OnReceivedJsMsg"//当webview接收到js发送的数据事件监听
            :mediaAutoPlay="mediaAutoPlay"//是否容许媒体自动播放，默认false
            :userAgent="userAgent"//设置webview的useragent，不设置则为原生webview自带的useragent
            :jsEnabled="jsEnabled"//设置是否启用对Javascript的支持，，默认true
            :cacheMode="cacheMode">
            //设置浏览器的缓存模式。
             * 0：默认值。当存在缓存且未过期时加载缓存数据，否则通过网络加载数据。
             * 1：只要存在缓存，不管是够过期都加载缓存数据，否则通过网络加载数据。
             * 2：不使用缓存。仅通过网络加载数据。
             * 3：只使用缓存。仅加载缓存数据，不通过网络加载数据。
        </rt-webview>
        <view class="scroller">
            <view class="content">
                <button class="btn" type="primary" @click="btnClick('loadURL')" plain="true" size="mini">loadURL</button>
                <button class="btn" type="primary" @click="btnClick('loadFile')" plain="true" size="mini">loadFile</button>
                <button class="btn" type="primary" @click="btnClick('loadHTML')" plain="true" size="mini">loadHTML</button>
                <button class="btn" type="primary" @click="btnClick('getUrl')" plain="true" size="mini">getUrl</button>
                <button class="btn" type="primary" @click="btnClick('getOriginalUrl')" plain="true" size="mini">getOriginalUrl</button>
                <button class="btn" type="primary" @click="btnClick('getTitle')" plain="true" size="mini">getTitle</button>
                <image :src="favSrc" mode="scaleToFill" style="width: 50rpx;height: 50rpx;"></image>
                <button class="btn" type="primary" @click="btnClick('getFavicon')" plain="true" size="mini">getFavicon</button>
                <button class="btn" type="primary" @click="btnClick('getProgress')" plain="true" size="mini">getProgress</button>
                <button class="btn" type="primary" @click="btnClick('reload')" plain="true" size="mini">reload</button>
                <button class="btn" type="primary" @click="btnClick('stopLoading')" plain="true" size="mini">stopLoading</button>
                <button class="btn" type="primary" @click="btnClick('canGoBack')" plain="true" size="mini">canGoBack</button>
                <button class="btn" type="primary" @click="btnClick('goBack')" plain="true" size="mini">goBack</button>
                <button class="btn" type="primary" @click="btnClick('canGoForward')" plain="true" size="mini">canGoForward</button>
                <button class="btn" type="primary" @click="btnClick('goForward')" plain="true" size="mini">goForward</button>
                <button class="btn" type="primary" @click="btnClick('clearCache')" plain="true" size="mini">clearCache</button>
                <button class="btn" type="primary" @click="btnClick('canGoBackOrForward')" plain="true" size="mini">canGoBackOrForward</button>
                <button class="btn" type="primary" @click="btnClick('goBackOrForward')" plain="true" size="mini">goBackOrForward</button>
                <button class="btn" type="primary" @click="btnClick('backForwardList')" plain="true" size="mini">backForwardList</button>
                <button class="btn" type="primary" @click="btnClick('evalJS')" plain="true" size="mini">evalJS</button>
                <button class="btn" type="primary" @click="btnClick('getCookie')" plain="true" size="mini">getCookie</button>
                <button class="btn" type="primary" @click="btnClick('setCookie')" plain="true" size="mini">setCookie</button>
                <button class="btn" type="primary" @click="btnClick('removeCookie')" plain="true" size="mini">removeCookie</button>
            </view>
        </view>
    </view>
</template>

export default {
    data() {
        return {
            mediaAutoPlay: true,
            jsEnabled: true,
            cacheMode: 0,
            userAgent:'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36 Edg/94.0.992.38',
            url: 'http://www.baidu.com',
            favSrc: '/static/logo.png'
        }
    },
    onReady: function(){
        this.$refs.webview.loadURL(this.url);
    },
    methods: {
        btnClick: function(e) {
            switch(e) {
                case 'loadURL':
                    this.$refs.webview.loadURL(this.url);//加载网络url地址
                    break;
                case 'loadFile':
                    this.$refs.webview.loadFile('/static/html/demo.html');//加载本地文件，需要传入文件的路径
                    break;
                case 'loadHTML':
                    this.$refs.webview.loadHTML('<!DOCTYPE html><html lang="zh-CN"><head><meta charset="utf-8"><title>html</title></head><body><div style="width: 100px; height: 100px; background-color: #007AFF;"></div></body></html>');//加载html
                    break;
                case 'getUrl':
                    this.$refs.webview.getUrl(result => {
                        uni.showModal({
                            title:'当前网页的url',
                            content: result
                        });
                    });//获取当前网页请求的url
                    break;
                case 'getOriginalUrl':
                    this.$refs.webview.getOriginalUrl(result => {
                        uni.showModal({
                            title:'当前网页的原始url',
                            content: result
                        });
                    });//获得当前网页的原始url,之所以会有原始url的概念，是因为某些网页会执行重定向操作，那么通过这个方法获取的就是重定向之前的url。此外，这个方法和getUrl类似，如果当前网页还未加载完毕，那么获得的就是旧的原始url。
                    break;
                case 'getTitle':
                    this.$refs.webview.getTitle(result => {
                        uni.showModal({
                            title:'当前网页的标题',
                            content: result
                        });
                    });//获得当前网页的标题
                    break;
                case 'getFavicon':
                    this.$refs.webview.getFavicon(result => {
                        console.log(result);
                        this.favSrc = result;
                    });//获得当前网页的图标，回调的result为网页图标favicon base64格式
                    break;
                case 'getProgress':
                    this.$refs.webview.getProgress(result => {
                        uni.showModal({
                            title:'当前网页的加载进度',
                            content: '' + result
                        });
                    });//获得当前网页的加载进度（0-1）
                    break;
                case 'reload':
                    this.$refs.webview.reload();//刷新页面
                    break;
                case 'stopLoading':
                    this.$refs.webview.stopLoading();//停止加载
                    break;
                case 'canGoBack':
                    this.$refs.webview.canGoBack(result => {
                        uni.showModal({
                            title:'是否可以后退',
                            content: '' + result
                        });
                    }); //判断webview是否可以后退
                    break;
                case 'goBack':
                    this.$refs.webview.goBack();//后退网页
                    break;
                case 'canGoForward':
                    this.$refs.webview.canGoForward(result => {
                        uni.showModal({
                            title:'是否可以前进',
                            content: '' + result
                        });
                    });//判断webview是否可以前进
                    break;
                case 'goForward':
                    this.$refs.webview.goForward();//前进
                    break;
                case 'clearCache':
                    this.$refs.webview.clearCache(true);//清除缓存,传入false仅清除内存缓存，传入true将同时清除内存和磁盘缓存
                    break;
                case 'canGoBackOrForward':
                    this.$refs.webview.canGoBackOrForward(2, result => {
                        uni.showModal({
                            title:'是否可以后退/前进相应步数',
                            content: JSON.stringify(result)
                        });
                    });//steps大于0表示前进（forward），小于0表示后退（back）
                    break;
                case 'goBackOrForward':
                    this.$refs.webview.goBackOrForward(2);//steps大于0表示前进（forward），小于0表示后退（back）
                    break;
                case 'backForwardList':
                    this.$refs.webview.backForwardList(result => {
                        uni.showModal({
                            title:'前进后退列表',
                            content: JSON.stringify(result)
                        });
                    });//获取当前webview的前进后退列表，在回调数据result中items表示前进后退列表数组，currentIndex表示当前网页在前进后退列表数组中的索引
                    break;
                case 'evalJS':
                    this.$refs.webview.evalJS('postMsg("evalJsMsg")', result => {
                        console.log('evalJS:' + result);
                    });//执行JS代码, result为js代码执行的结果返回，如果js没有数据返回，则result为null
                    break;
                case 'getCookie':
                    this.$refs.webview.getCookie({
                        'name':'rt_cookiename', //cookie名称，可选（如果不传入name，则获取domain下的所有cookie）
                        'domain': 'm.baidu.com',//cookie域名，必填
                        'path': '/'//cookie path值，可选，不填默认'/'
                    }, result => {
                        uni.showModal({
                            title:'获取cookie',
                            content: JSON.stringify(result)
                        });
                    });//获取cookie方法
                    break;
                case 'setCookie':
                    this.$refs.webview.setCookie({
                        'name':'rt_cookiename', //cookie名称，必填
                        'value': 'rt_cookievalue',//cookie值，必填
                        'max-age': '3600',//cookie存活时间，单位秒，可选
                        'domain': 'm.baidu.com',//cookie域名，必填
                        'path': '/'//cookie path值，可选，不填默认'/'
                    }, result => {
                        console.log('setCookie:' + result);
                    });//设置cookie方法
                    break;
                case 'removeCookie':
                    this.$refs.webview.removeCookie({
                        'name':'rt_cookiename', //cookie名称，必填
                        'domain': 'm.baidu.com',//cookie域名，必填
                        'path': '/'//cookie path值，可选，不填默认'/'
                    }, result => {
                        console.log('removeCookie:' + result);
                    });//移除cookie方法
                    break;
                default:
                    break;
            }
        },
        onPageStarted: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'url': '当前加载网页的url地址'}
        },
        onPageFinished: function(e) {
            console.log(e.detail);//同onPageStarted
        },
        onReceivedError: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'request': {'url': '当前加载网页的url地址'}, 'error': {'code': '错误码', 'desc': '错误描述'}}
        },
        onScaleChanged: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'oldScale': '当前网页缩放之前的scale', 'newScale': '当前网页缩放之后的scale，float类型'}
        },
        Changed: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'progress': '当前网页加载的进度，float类型，范围在0-1之间'}
        },
        onReceivedTitle: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'title': '当前网页标题'}
            uni.setNavigationBarTitle({
                title:e.detail.title
            });
        },
        onReceivedFavicon: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'favicon': '当前网页的base64格式图标'}
        },
        OnReceivedJsMsg: function(e) {
            console.log(e.detail);//该事件返回的数据e.detail格式为{'message': '网页中js发送给nvue的消息，字符串类型'}
        }
    }
}

注意事项

  1. 原生插件需要自定义基座才能生效。
  2. 自定义基座时记得在manifest.json->app原生插件配置，勾选需要使用的的插件。
  3. 使用插件的页面需为nvue格式。
  4. 购买前请先将示例项目导入HBuilderX试用该插件。
  5. 1.0.1版本修复了iOS闪退问题。
  6. 插件永久维护，欢迎提新需求。

联系方式

QQ：2219424245

隐私、权限声明

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

无

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

插件不采集任何数据

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

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

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

加载更多...