前端UNIAPP端webview嵌入H5使用说明文档

最新推荐文章于 2024-09-30 17:06:10 发布
最新推荐文章于 2024-09-30 17:06:10 发布
阅读量423 收藏 1
点赞数
文章标签： 前端 uni-app
原文链接：https://blog.csdn.net/BUG_Jia/article/details/136742664
版权 
            <div id="content_views" class="htmledit_views">
                <p></p>
一、关闭webView窗口
plus.webview.close( id_wvobj, aniClose, duration, extras );
  • 功能说明

关闭已经打开的Webview窗口，需先获取窗口对象或窗口id，并可指定关闭窗口的动画及动画持续时间。

  • 参数说明
参数是否必须参数类型/固定值说明
id_wvobj是String 要关闭Webview窗口id或窗口对象，若操作窗口对象已经关闭，则无任何效果。 使用窗口id时，则查找对应id的窗口，如果有多个相同id的窗口则操作最先打开的窗口，若没有查找到对应id的WebviewObject对象，则无任何效果。
aniClose否
  1. auto （默认值）：自动选择关闭动画效果。
  2. none：无动画效果，直接关闭。
  3. slide-out-right：从右向左滑出关闭动画。
  4. slide-out-left：从左向右滑出关闭动画。
关闭Webview窗口的动画效果，如果没有指定关闭窗口动画，则使用默认值“auto”，即使用显示时设置的窗口动画相对应的关闭动画。
duration否Number 关闭Webview窗口动画的持续时间，单位为ms，如果没有设置则使用显示窗口动画时间。
extras否任意类型关闭Webview窗口扩展参数，可用于指定Webview窗口动画是否使用图片加速。
  • 使用示例
 function closeWebview(){
	var ws=plus.webview.currentWebview();
	plus.webview.close(ws);
}
二、创建新的webView窗口
plus.webview.create( url, id, styles, extras );
  • 功能说明

创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。

  • 参数说明
参数是否必须参数类型/示例说明
url否String 新窗口加载的HTML页面地址，新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。
id否String 新窗口的标识，窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
styles否

JSON 

创建Webview窗口的样式（如窗口宽、高、位置等信息）WebviewStyles
extras否Object 创建Webview窗口的额外扩展参数，值为JSON类型，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，
如： var w=plus.webview.create('url.html','id',{},{preload:'preload webview'});
// 可直接通过以下方法获取preload值 console.log(w.preload);
// 输出值为“preload webview”
  • 使用示例
function create(){
	var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
	w.show(); // 显示窗口
}
三、获取当前窗口的WebviewObject对象
plus.webview.currentWebview();
  • 功能说明

获取当前页面所属的Webview窗口对象。

  • 使用示例
var ws=plus.webview.currentWebview();
console.log( "当前Webview窗口："+ws.getURL() );
四、隐藏Webview窗口
plus.webview.hide( id_wvobj, aniHide, duration, extras );
  • 功能说明

根据指定的WebviewObject对象或id隐藏Webview窗口，使得窗口不可见。

  • 参数说明
参数是否必须参数类型/固定值说明
id_wvobj是String 要隐藏的Webview窗口id或窗口对象，使用窗口对象时，若窗口对象已经隐藏，则无任何效果。 使用窗口id时，则查找对应id的窗口，如果有多个相同id的窗口则操作最先打开的，若没有查找到对应id的WebviewObject对象，则无任何效果。
aniHide否
  1. auto （默认值）：自动选择关闭动画效果。
  2. none：无动画效果，直接关闭。
  3. slide-out-right：从右向左滑出关闭动画。
  4. slide-out-left：从左向右滑出关闭动画。

···

隐藏Webview窗口的动画效果，如果没有指定窗口动画，则使用默认动画效果“none”。
duration否Number 隐藏Webview窗口动画的持续时间，单位为ms，如果没有设置则使用默认窗口动画时间。
extras否JSON对象隐藏Webview窗口扩展参数，可用于指定Webview窗口动画是否使用图片加速。
  • 使用示例
function hideWebview(){
	plus.webview.hide(plus.webview.currentWebview());
}
五、显示Webview窗口
plus.webview.show( id_wvobj, aniShow, duration, showedCB, extras );
  • 功能说明

显示已创建或隐藏的Webview窗口，需先获取窗口对象或窗口id，并可指定显示窗口的动画及动画持续时间。

  • 参数说明
参数是否必须参数类型/固定值说明
id_wvobj是

String

要显示Webview窗口id或窗口对象，若操作Webview窗口对象显示，则无任何效果。 使用窗口id时，则查找对应id的窗口，如果有多个相同id的窗口则操作最先创建的窗口，若没有查找到对应id的WebviewObject对象，则无任何效果。
aniShow否 
  1. auto （默认值）：自动选择显示动画效果。
  2. none：无动画效果，直接显示。
  3. slide-in-right：从右向左滑出显示动画。
  4. slide-in-left：从左向右滑出显示动画。

···

显示Webview窗口的动画效果，如果没有指定窗口动画类型，则使用默认值“auto”，即自动选择上一次显示窗口的动画效果，如果之前没有显示过，则使用“none”动画效果。AnimationTypeShow
duration否Number 显示Webview窗口动画的持续时间,单位为ms，单位为ms，如果没有设置则使用默认窗口动画时间600ms。
showedCB否

onSuccess(){ // Success code. }

onError(error){

var code = error.code; // 错误编码

var message = error.message; // 错误描述信息

}

Webview窗口显示完成的回调函数,当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。
  • 使用示例
function create(){
	var w = plus.webview.create('http://m.weibo.cn/u/3196963860');
	plus.webview.show(w); // 显示窗口
}
六、创建并打开Webview窗口
plus.webview.open( url, id, styles, aniShow, duration, showedCB );
  • 功能说明

创建并显示Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后自动将Webview窗口显示出来。

  • 参数说明
参数是否必须参数类型/固定值说明
url否String 打开窗口加载的HTML页面地址，新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。
id否

String

打开窗口的标识，窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。 如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。
styles否

JSON 

创建Webview窗口的样式（如窗口宽、高、位置等信息）WebviewStyles
aniShow否 
  1. auto （默认值）：自动选择关闭动画效果。
  2. none：无动画效果，直接关闭。
  3. slide-in-right：从右向左滑出关闭动画。
  4. slide-in-left：从左向右滑出关闭动画。

···

显示Webview窗口的动画效果，如果没有指定窗口动画，则使用默认无动画效果“none”。AnimationTypeShow
duration否Number 显示Webview窗口动画的持续时间,单位为ms，默认值为200ms（毫秒）。
showedCB否

onSuccess(){ // Success code. }

onError(error){

var code = error.code; // 错误编码

var message = error.message; // 错误描述信息

}

Webview窗口显示完成的回调函数,当指定Webview窗口显示动画执行完毕时触发回调函数，窗口无动画效果（如"none"动画效果）时也会触发此回调。
  • 使用示例
function openWebview(){
	var w = plus.webview.open('http://m.weibo.cn/u/3196963860');
}
七、预载网络页面
plus.webview.prefetchURL(url);
  • 功能说明

预载网络页面会向服务器发起http/https请求获取html页面内容， 待Webview窗口加载此url页面时会则根据缓存机制优先使用预载的页面内容(加快页面显示速度)。 注意：预载网络页面仅在运行期生效，为了节省内存仅保留最后5个预载页面数据。

  • 参数说明
参数是否必须参数类型/固定值说明
url是String 需要预载的页面地址，必须是网络地址（http/https）,本地页面地址无需预载。
  • 使用示例
var url = 'http://m.weibo.cn/u/3196963860';

// 预载网络页面
function prefetchWebview(){
plus.webview.prefetchURL(url);
}

// 显示预载页面
function showWebview(){
// 预创建新窗口（显示在可视区域外）
wn=plus.webview.create(url, ‘test’,{render:‘always’});
wn.show(‘none’);
}

八、Webview的一些常用方法

1. addEventListener: 添加事件监听器

  • 参数说明
    • 参数是否必须可选参数说明
      event是

      "close": (String 类型 )Webview窗口关闭事件

      "error": (String 类型 )Webview窗口加载错误事件

      "hide": (String 类型 )Webview窗口隐藏事件

      "loading": (String 类型 )Webview窗口页面开始加载事件

      "loaded": (String 类型 )Webview窗口页面加载完成事件

      "maskClick": (String 类型 )Webview窗口显示遮罩层时点击事件

      "touchstart": (String 类型 )Webview窗口接收到触屏事件

      "popGesture": (String 类型 )Webview窗口侧滑返回事件

      更多事件

      		Webview窗口事件类型
      listener是

      void onEvent(Event event){ // Event handled code. }

      		监听事件发生时执行的回调函数
      capture否 Boolean捕获事件流顺序，暂无效果

    • 示例代码
plus.nativeUI.showWaiting()
var ws = null,
	embed = null;
ws = this.$scope.$getAppWebview(); //plus.webview.currentWebview();在uni-app里vue页面直接使用无效，非v3编译模式使用this.$mp.page.$getAppWebview()
embed = plus.webview.create(this.url, '', {
	top: getApp().globalData.bh + 35 + "px",
	bottom: '0px'
});
ws.append(embed);

//监听webview窗口事件
embed.addEventListener(‘loaded’, function() {
if (embed.isVisible()) {
plus.nativeUI.closeWaiting()
// 页面加载完成且可见时的操作
}
});

2. append: 在Webview窗口中添加子窗口

  • 说明

将另一个Webview窗口作为子窗口添加到当前Webview窗口中，添加后其所有权归父Webview窗口，当父窗口关闭时子窗口自动关闭。

被添加的Webview窗口需通过plus.webview.create方法创建，并且不能调用其show方法进行显示。 父窗口显示时子窗口会自动显示，父窗口隐藏时子窗口也会自动隐藏。 被添加的View控件需通过new plus.nativeObj.View()创建，添加到Webview窗口后所有权一起转移（即Webview关闭后View控件也自动关闭）。

  • 示例代码

var ws = null,
	embed = null;
ws = this.$scope.$getAppWebview(); //plus.webview.currentWebview();在uni-app里vue页面直接使用无效，非v3编译模式使用this.$mp.page.$getAppWebview()
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '',{top:'46px',bottom:'0px'});
ws.append(embed);

3. appendJsFile: 添加Webview窗口预加载js文件

  • 说明

对于一些网络HTML页面，在无法修改HTML页面时可通过此方法自动加载本地js文件。 当Webview窗口跳转到新页面时也会自动加载指定的js执行，添加多个js文件将按照添加的先后顺序执行。

  • 示例代码
// 添加Webview窗口预加载js文件
function appendJs2Webviewe(){
	var nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
	nw.appendJsFile('_www/preload.js');
	nw.show();
}

4. checkRenderedContent: 检测Webview窗口是否渲染完成

  • 说明

检测方式为判断的Webview窗口内容是否为白屏，如果非白屏则认为渲染完成，否则认为渲染未完成。 通过successCallback回调函数返回结果，如果检测过程中发生错误则触发errorCallback回调函数。

successCallback: ( Function ) 必选 检测Webview窗口渲染结果回调函数
获取渲染检测结果后触发，函数原型为void function(e){}； e.rendered：表示检测渲染完成结果，Boolean类型，true表示渲染完成，false表示渲染未完成。

errorCallback: ( ErrorCallback ) 可选 检测Webview窗口渲染结果失败回调函数
检测Webview窗口渲染结果过程中发生错误则触发errorCallback回调函数

此方法不支持iOS

  • 示例代码
// 创建Webview窗口
function createWebview(){
	// 打开新窗口
	nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
	nw.show();
}
function checkWebview(){
	nw.checkRenderedContent({}, function(e){
		console.log('checkRenderedContent success: '+JSON.stringify(e));
	}, function(e){
		console.log('checkRenderedContent error: '+JSON.stringify(e));
	});
}

5. interceptTouchEvent: 是否拦截Webview窗口的触屏事件

  • 说明

拦截后触屏事件不再传递，否则传递给View控件下的其它窗口处理。 Webview窗口默认拦截所有触屏事件。

intercept: ( Boolean ) 可选 是否拦截触屏事件
true表示拦截触屏事件，false表示不拦截触屏事件（透传事件给其它窗口处理）。 默认值为true。

Android - 3.0+ (支持)
iOS - ALL (不支持)

  • 示例代码
var wv=null;
wv = plus.webview.currentWebview();
// 拦截触屏事件 
function interceptEvent(){
	wv.interceptTouchEvent(true);
}
// 不拦截触屏事件 
function uninterceptEvent(){
	wv.interceptTouchEvent(false);
}

6. isVisible: 查询Webview窗口是否可见

  • 说明

若Webview窗口已经显示（调用过show方法，即使被其它窗口挡住了也认为已显示）则返回true，若Webview窗口被隐藏则返回false。

  • 示例代码
ws=plus.webview.currentWebview();
embed=plus.webview.create('http://m.weibo.cn/u/3196963860', '', {top:'46px',bottom:'0px'});
embed.show();

// 查询Webview窗口是否可见
function visibleWebview() {
alert(‘是否可见：’+embed.isVisible());
}
// 隐藏Webview窗口
function hideWebview() {
embed.hide();
}

7. overrideResourceRequest: 拦截Webview窗口的资源加载

  • 说明

根据区配规则拦截Webview窗口加载资源的URL地址，重定向到其它资源地址（暂仅支持本地地址）。 注意：多次调用overrideResourceRequest时仅以最后一次调用设置的参数值生效。

  • 示例代码
var ws=null,nw=null;
ws=plus.webview.currentWebview();
// 拦截Webview窗口的资源请求
nw=plus.webview.create('http://m.weibo.cn/u/3196963860');

nw.overrideResourceRequest([{match:‘http://tva3.sinaimg.cn/crop.121.80.980.980.180/be8dcc14gw1e7lz65y6g3j20uo0uoq4r.jpg’,redirect:‘_www/logo.png’}]);

nw.show();

8. overrideUrlLoading: 拦截Webview窗口的URL请求

  • 说明

拦截URL请求后，Webview窗口将不会跳转到新的URL地址，此时将通过callback回调方法返回拦截的URL地址（可新开Webview窗口加载URL页面等）。 此方法只能拦截窗口的网络超链接跳转（包括调用loadURL方法触发的跳转），不可拦截页面请求资源请求（如加载css/js/png等资源的请求）。 注意：多次调用overrideUrlLoading时仅以最后一次调用设置的参数值生效。

  • Options属性
属性类型取值说明作用
effectString

可取值： "instant" - 表示立即生效，即调用overrideUrlLoading方法后立即生效；

"touchstart" - 表示用户操作Webview窗口（触发touchstart事件）后生效，如果用户没有操作Webview窗口则不对URL请求操作进行拦截处理。 默认值为"instant"。

拦截URL请求生效时机
modeString

可取值： "allow"表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；

"reject"表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。

默认值为"reject"。

拦截模式
matchString

支持正则表达式，默认值为对所有URL地址生效（相当于正则表达式“.*”）。

如果mode值为"allow"则允许区配的URL请求跳转，mode值为"reject"则拦截区配的URL请求。

匹配是否需要处理的URL请求
excludeString

不拦截处理指定类型的URL请求，直接使用系统默认处理逻辑。

可取值： "none"表示不排除任何URL请求（即拦截处理所有URL请求）；

"redirect"表示排除拦截处理301/302跳转的请求（谨慎使用，非a标签的href触发的URL请求可能会误判断为302跳转）。

默认值为"none"。
  • 排除拦截处理请求类型
  • 示例代码
ws=plus.webview.currentWebview();
nw=plus.webview.create('http://m.weibo.cn/u/3196963860');
nw.show();

var regex = “^https://brain.*”;
nw.overrideUrlLoading({
mode:‘allow’,
match: regex,
}, function(e){
console.log('reject url: '+e.url);
});

九、参考文档

参考文档地址

暖阳浅笑-嘿
关注
uniapp 使用webView通讯
04-04
uniapp 使用webView通讯
移动app plus子页面调用父页面函数
jjy8040的博客
05-03 1340
子页面代码： plus.webview.currentWebview().opener().evalJS("onAppReume()"); 其中plus.webview.currentWebview().opener()代表父页面； evalJS属于WebviewObject方法，用于在Webview窗口中执行JS脚本； onAppReume()属于父页面函数，可带参数。 详见：h...
如何在uniapp中优雅地使用WebView
热门推荐
林恒的博客
10-28 1万+
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 从webview页面传值到uniapp中 官方文档已经很详细了,这里给大家上我的实战代码，首先在webview页面中引入相关依赖： <!-- uniapp各平台依赖 --> <script type="text/javascript"> var userAgent = navigator.userAge...
uniapp实现与webview之间的相互通讯
最新发布
Story_0809的博客
09-30 1837
情况一：app嵌套h5（app、h5均用uniapp开发）情况二：app嵌套h5（h5用vue或react开发）情况三：h5嵌套h5（均用uniapp开发）
html5Plus学习-Webview（1）
lin1072368472的博客
08-06 3284
webview Webview模块管理应用窗口界面，实现多窗口的逻辑控制管理操作 这是官方的解释 意思就是指首页运行的窗口 权限设置 "permissions":{ // ... "Webview": { "description": "窗口管理" } } create 创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。 参数： Url（String） 可选 新窗口加载的html页
mui项目总结第1篇---窗口的获取以及关闭
qq_45375420的博客
09-17 911
关于获取webview(窗口间关系)的方法 1.获取指定页面ID的webview plus.webview.getWebviewById('为页面设置的id值')； 2.获取当前页面的webview plus.webview.currentWebview(); var ws=plus.webview.currentWebview();//获取当前页面所属的Webview窗口对象 console...
uniapp中运用web-view组件的经验
m0_47267820的博客
06-07 8378
uniapp中运用web-view组件的经验
uniapp与webview之间的相互传值的实现
10-15
在移动应用开发中，uni-app是一个跨端框架，它允许开发者编写一次代码，就能在iOS、Android、H5等多个平台上运行。而Webview是uni-app中用于嵌入HTML5页面的组件，它使得原生应用能够加载和展示网页内容。在uni-app...
Android使用WebView调用H5完成摄像头扫描二维码
11-04
这篇教程将详细介绍如何在Android中利用WebView来调用H5页面，从而实现摄像头扫描二维码的功能。 首先，我们需要理解WebView的基本用法。WebView是Android SDK提供的一种控件，它可以加载本地或者远程的HTML、CSS和...
（uniapp框架）手动封装webview页面与App交互sdk
01-30
在移动应用开发中，uniApp框架提供了一种跨平台的解决方案，允许开发者使用一套代码来构建iOS、Android等多平台的应用。在这个特定的场景中，我们关注的是如何手动封装一个Webview页面与App的交互SDK，以便实现H5...
Flutter使用JsBridge方式处理Webview与H5通信的方法
08-19
Flutter 使用 JsBridge 方式处理 Webview 与 H5 通信的方法 Flutter 是 Google 推出的跨平台技术方案，具有诸多优势，已经或正在被广大开发者应用在移动应用开发中。在移动开发中，加载 H5 页面需要使用 WebView ...
uniapp H5集成微信JS支付
03-26
uni-app框架下，开发H5，集成微信JS API支付，安装指定的，jweixin-module之后调用方法关键代码，搞了一星期，终于都搞明白，很简单，一看就懂了。
解决WebView通过URL加载H5界面出现空白的问题
08-19
WebView是一种常用的显示网页内容的控件，但是在使用时经常会出现问题，例如加载H5界面出现空白的问题。下面我们将介绍解决这个问题的方法。 一、权限问题 在使用WebView加载H5界面时，需要在配置文件中设置网络...
android 关于webview 加载h5网页开启定位的方法
08-27
总结起来，要使Android的Webview加载的H5网页能够使用地理定位功能，我们需要进行以下步骤： 1. 启用DOM Storage：`settings.setDomStorageEnabled(true)` 2. 开启地理定位：`settings.setGeolocationEnabled(true)`...
Android APP使用WebView调用H5页面完成摄像头扫描二维码软件源码.rar
05-10
在Android应用开发中，WebView是一个非常重要的组件，...以上就是Android APP使用WebView调用H5页面完成摄像头扫描二维码的关键技术点。通过这个示例，开发者可以学习到如何结合原生功能与H5页面，提升APP的用户体验。
学习笔记——uni-app在App中使用web-view
qq_41339126的博客
03-19 5468
在地图添加覆盖物，或设置额外图层，这种情况，uni-app自带的地图大多满足不了这些需求。所以需要用到web-view这一组件来实现。 1.创建带有地图的html 注意：App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在uni-app 项目根目录->hybrid->html文件夹下或者static目录下 2. 在组件中引用web-view <view class="page-container"> ...
uni-app 官方WebView全能扩展、支持plus、vue、nvue里的WebView
杨克进的博客
01-30 2902
uni-app 官方WebView全能扩展、支持plus、vue、nvue里的WebView。
MUI 设置APP状态栏
discuzmall的博客
08-06 2729
一、 前言 　　状态栏就是手机屏幕最顶部的区域，包括了：信号、运营商、电量等信息。通常APP都有属于自己的色调风格，为了达到整体视觉美观，通常会设置状态栏和标题栏的色调设置成一致。 　　图例： 二、状态栏状态类型 默认 变色（设置颜色） 透明（沉浸式） 消失（全屏） 三、状态栏变色 　　1.效果如图： 　　2.根据色调设置状态栏文字颜色，文字颜色只提供两种值：light（白色）、dark（黑色） ...
uniapp开发使用webview嵌入h5的步骤
06-09
在uniapp中使用WebView嵌入h5页面，可以按照以下步骤进行： 1. 在uniapp项目中创建一个新的页面，可以使用`uni-app`命令行工具或手动创建。 2. 在新页面中添加一个WebView组件，例如： ``` <template> <view> <web-view src="https://www.example.com/index.html"></web-view> </view> </template> ``` 在`src`属性中设置h5页面的URL地址。 3. 如果需要在WebView中设置一些属性，例如启用JavaScript功能，可以在`mounted`生命周期中获取WebView组件并设置相关属性，例如： ``` mounted() { const webView = this.$refs.webView.$el webView.setJavascriptEnabled(true) } ``` 通过`this.$refs.webView.$el`获取WebView组件的DOM元素，然后调用相关方法进行设置。 4. 运行uniapp项目，即可在新页面中看到嵌入的h5页面。 需要注意的是，由于WebView是原生控件，可能会存在跨域等安全问题，需要在h5页面中设置相关的安全策略。另外，在Android和iOS平台上，WebView的表现可能会有所不同，需要进行一些兼容性处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值