WebViewJavascriptBridge 原理分析

最新推荐文章于 2020-08-10 16:41:58 发布
最新推荐文章于 2020-08-10 16:41:58 发布
阅读量304 收藏
点赞数 1

网上好多都是在介绍 WebViewJavascriptBridge如何使用，这篇文章就来说说 WebViewJavascriptBridge 设计原理。

主要从两个过程来讲一下：js调用UIViewController中的代码（Native），Native调用js

 

1.概述

\

首先有两个问题：

a.Native（中的UIWebView）是否可以直接调用js method（方法）？ 可以。

b.js 是否可以直接调用Native的mthod？不行。

明确上述两个问题，那么上图就不难明白了，webpage中的js method和webview本地的method之间关系。那WebViewJavascriptBridge出现是否解决这个问题（这个问题就是让js可以直接调用native的method）呢？答案是否定的？没有本质还是用uiwebview的代理方法进行字段拦截（判断url的scheme），实现js间接调用native的method。

我们来看WebViewJavascriptBridge提供的demo：

\

主要的核心是下面两个，接下来我们就来讨论一下其设计原理。

 

2.js调用Native method

在概述中说过，js是不能直接调用native的method所以，需要借助- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType，这个方法大家不陌生，每次在重新定向URL的时候，这个方法就会被触发，通常情况，我们会在这里做一些拦截完成js和本地的间接交互什么的。那么WebViewJavascriptBridge也不另外，也是这么做。

我们先来看看在ExampleApp.html文件中点击一个按钮发起请求的代码：

 

?
1
2
3
4
5
6
7
8
9
10
var callbackButton = document.getElementById( 'buttons' ).appendChild(document.createElement( 'button' ))
         callbackButton.innerHTML = 'Fire testObjcCallback'
         callbackButton.onclick = function(e) {
             e.preventDefault()
             log( 'JS calling handler "testObjcCallback"' )
             //1
             bridge.callHandler( 'testObjcCallback' , { 'foo' : 'cccccccccccc' }, function(response) {
                 log( 'JS got response' , response)
             })
         }

估计大家大体都能看懂，唯独有疑问的地方是：

 

 

?
1
2
3
4
bridge.callHandler( 'testObjcCallback' , { 'foo' : 'cccccccccccc' }, function(response) {
                 log( 'JS got response' , response)
             })
         }

这段代码先不说，上面代码就是一个按钮的普通单击事件方法。我们一起想一下，如果这个按钮需要被点击之后调用native中的funtion函数，之后需要把这个（native的）funtion函数处理结果返回给js中的方法继续处理。这个是我们需求，带着这个需求我们看一下这个方法，testObjcCallBack这个我们猜测一下应该native中的方法或者一个能够调用到方法的name/id，后面这个是个json｛‘foo’：‘ccccccccccccc’｝,应该是个参数，那么后面这个方法一看log应该知道，是对native返回的result进行处理的方法。拿具体是不是呢？只要找到callHandler方法就知道了。

 

在文件WebViewJavascriptBridge.js.txt里面我们找找这个方法：

 

?
1
2
3
function callHandler(handlerName, data, responseCallback) {
         _doSend({ handlerName:handlerName, data:data }, responseCallback)
     }

这里又多了一个方法叫_doSend连个参数 第1个是字典key-value定义，第二个是一个方法的指针（看看上面的方法你就知道了），那我们必须在同一个文件里面看看能不能找到这个_doSend方法：

 

 

?
1
2
3
4
5
6
7
8
9
function _doSend(message, responseCallback) {
         if (responseCallback) {
             var callbackId = 'cb_' +(uniqueId++)+ '_' + new Date().getTime()
             responseCallbacks[callbackId] = responseCallback
             message[ 'callbackId' ] = callbackId
         }
         sendMessageQueue.push(message)
         messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE
     }

找到了。

 

逐行分析一下，变量callbackId是个字符串，responseCallBacks[] 一看就知道是个字典 ，这个字典把回掉（我们猜测）的方法responseCallback给保存起来，这Key（也就是callbackId）应该是唯一的，通过计数和时间应该知道这个字符串应该是唯一的，message也是一个字典，这是给message添加了一个新的key-value。干嘛呢？我也不知道，我们来看看sendMessageQueue是什么，大家一个push就知道应该是个数组。他吧一个字典放到一个消息队列中（数组队列），让后产生一个src（url scheme）。

有两个变量我们看看：

 

?
1
2
var CUSTOM_PROTOCOL_SCHEME = 'wvjbscheme'
var QUEUE_HAS_MESSAGE = '__WVJB_QUEUE_MESSAGE__'

 

干嘛用，肯定是给webview 的 delegate判断用的，你感觉呢？（肯定是）

 

下面是在文件：WebViewJavascriptBridge.m

好了到了这里大家猜猜这个要干嘛？肯定是要发url让web截取对吧？那还用问啊，肯定是啊，已经说过了js能不能调用native的funtion函数？不能。我们来看看这个messagingIframe是：

 

?
1
2
3
4
5
6
function _createQueueReadyIframe(doc) {
     messagingIframe = doc.createElement( 'iframe' )
     messagingIframe.style.display = 'none'
     messagingIframe.src = CUSTOM_PROTOCOL_SCHEME + '://' + QUEUE_HAS_MESSAGE
     doc.documentElement.appendChild(messagingIframe)
}

原来就是iframe，这个就不同给大家解释了。好了src一产生就会出现什么，uiwebview代理回掉截获，此时我们把目光回到UIWebview的Native下面:

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
     if (webView != _webView) { return YES; }
     NSURL *url = [request URL];
     __strong WVJB_WEBVIEW_DELEGATE_TYPE* strongDelegate = _webViewDelegate;
     
     if ([[url scheme] isEqualToString:kCustomProtocolScheme])
     {
         if ([[url host] isEqualToString:kQueueHasMessage])
         {
             //会走这里
             [self _flushMessageQueue];
         }
         else
         {
             NSLog(@ "WebViewJavascriptBridge: WARNING: Received unknown WebViewJavascriptBridge command %@://%@" , kCustomProtocolScheme, [url path]);
         }
         return NO;
     }
     else if (strongDelegate && [strongDelegate respondsToSelector: @selector (webView:shouldStartLoadWithRequest:navigationType:)])
     {
         return [strongDelegate webView:webView shouldStartLoadWithRequest:request navigationType:navigationType];
     }
     else
     {
         return YES;
     }
}

一看就头大，哈哈，是，我也头大。看看上面的注释说 会走这里，我们看看为什么会走那里，最外圈的if（[url scheme]）判断是

 

#define kCustomProtocolScheme @"wvjbscheme"

这个定义是什么意思，我们先不做解释，刚才我们说过js不能直接调用native的function，大家只要记住这点，接着往下走就是了。至于为什么走这里，自己看代码（上文有提到），我们看看_flushMessageQueue:

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
- ( void )_flushMessageQueue {
     NSString *messageQueueString = [_webView stringByEvaluatingJavaScriptFromString:@ "WebViewJavascriptBridge._fetchQueue();" ];
     //json转成数组
     id messages = [self _deserializeMessageJSON:messageQueueString];
     if (![messages isKindOfClass:[NSArray class ]]) {
         NSLog(@ "WebViewJavascriptBridge: WARNING: Invalid %@ received: %@" , [messages class ], messages);
         return ;
     }
     for (WVJBMessage* message in messages) {
         if (![message isKindOfClass:[WVJBMessage class ]]) {
             NSLog(@ "WebViewJavascriptBridge: WARNING: Invalid %@ received: %@" , [message class ], message);
             continue ;
         }
         [self _log:@ "RCVD" json:message];
         //用于js回掉
         NSString* responseId = message[@ "responseId" ];
         if (responseId) {
             WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
             responseCallback(message[@ "responseData" ]);
             [_responseCallbacks removeObjectForKey:responseId];
         } else {
             WVJBResponseCallback responseCallback = NULL;
             NSString* callbackId = message[@ "callbackId" ];
             if (callbackId) {
                 responseCallback = ^(id responseData) {
                     if (responseData == nil) {
                         responseData = [NSNull null ];
                     }
                     
                     WVJBMessage* msg = @{ @ "responseId" :callbackId, @ "responseData" :responseData };
                     [self _queueMessage:msg];
                 };
             } else {
                 responseCallback = ^(id ignoreResponseData) {
                     // Do nothing
                 };
             }
             
             WVJBHandler handler;
             if (message[@ "handlerName" ]) {
                 handler = _messageHandlers[message[@ "handlerName" ]];
             } else {
                 handler = _messageHandler;
             }
 
             if (!handler) {
                 [NSException raise:@ "WVJBNoHandlerException" format:@ "No handler for message from JS: %@" , message];
             }
             
             handler(message[@ "data" ], responseCallback);
         }
     }
}

这下牛逼了，不忍直视啊！这么多，哈哈，多不可怕，可怕是你坚持不下去了。

 

我们逐行来看：

NSString *messageQueueString = [_webView stringByEvaluatingJavaScriptFromString:@"WebViewJavascriptBridge._fetchQueue();"];

我们必须回去到js文件中去，这里是webview直接调用js中的方法：

 

?
1
2
3
4
5
function _fetchQueue() {
     var messageQueueString = JSON.stringify(sendMessageQueue)
     sendMessageQueue = []
     return messageQueueString
}

谢天谢地这个方法代码不多，这个消息很眼熟，SendMessageQueue，刚才我们说什么来？他是一个字典，那里面有哪些东西，我么来看看

 

handlerName:handlerName,

data:data,

callbackId:callbackId

这个消息字典此时被取出来准备做什么，这里提示下我们已经走到webview 的delegate里面了，所以拿到这些信息肯定是调用native的method对吧？肯定是的。接着往下走，接着会把json字符串转成数组，然后进行判断，

?
1
NSString* responseId = message[@ "responseId" ];
有没有responseid，你说又没，肯定没有啊（你不行看看上面），所以就这这里了

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
WVJBResponseCallback responseCallback = NULL;
             NSString* callbackId = message[@ "callbackId" ];
             if (callbackId) {
                 responseCallback = ^(id responseData) {
                     if (responseData == nil) {
                         responseData = [NSNull null ];
                     }
                     
                     WVJBMessage* msg = @{ @ "responseId" :callbackId, @ "responseData" :responseData };
                     [self _queueMessage:msg];
                 };
             } else {
                 responseCallback = ^(id ignoreResponseData) {
                     // Do nothing
                 };
             }
             
             WVJBHandler handler;
             if (message[@ "handlerName" ]) {
                 handler = _messageHandlers[message[@ "handlerName" ]];
             } else {
                 handler = _messageHandler;
             }
 
             if (!handler) {
                 [NSException raise:@ "WVJBNoHandlerException" format:@ "No handler for message from JS: %@" , message];
             }
             
             handler(message[@ "data" ], responseCallback);
这部分是重点，到底他是怎么要调用本地function的，callbackId大家熟悉吧，判断是否为空，不为空给他指定一个block，这个不说了，block指定，此时不调用（手动调用才会执行），这个刚才说了用来处理native的function处理的result用于把处理后的值返回给js的，接着往下去，看到handler这个方法会从message找到handlerName，这里我们看一下多了一个_messageHandlers字典，从这个字典获取一个block（WVJBHandler是一个block），直接执行了。那我们看看_messageHandlers是怎么被添加block的：

 

 

?
1
2
3
- ( void )registerHandler:(NSString *)handlerName handler:(WVJBHandler)handler {
     _messageHandlers[handlerName] = [handler copy];
}

那又是谁调用了这个方法：

 

找到了(在文件 ExampleAppViewController.m的viewdidload中)，这里有方法testObjecCallback

 

?
1
2
3
4
[_bridge registerHandler:@ "testObjcCallback" handler:^(id data, WVJBResponseCallback responseCallback) {
     NSLog(@ "testObjcCallback called: %@" , data);
     responseCallback(@ "Response from testObjcCallback" );
}];

有点乱了。刚才我们的思路都是倒推的，如果我们整过来，首先肯定是viewdidload初始化，初始化之后会把这个block加入到_messageHandlers中，之后因为js调用动态读取这个block调用，在调用之前，我们又把定一个block付给回掉处理的responseCallback的block，这个block在handler中调用而调用，有点绕，自己可以多想想。

 

我们接着来看看：

 

?
1
2
3
4
5
6
7
8
responseCallback = ^(id responseData) {
                     if (responseData == nil) {
                         responseData = [NSNull null ];
                     }
                     
                     WVJBMessage* msg = @{ @ "responseId" :callbackId, @ "responseData" :responseData };
                     [self _queueMessage:msg];
                 };

这个就是你绕的地方，他是后被定义的，所以一开不执行，只有在处理数据后回调才会被调用，这里有个方法_queueMessage：

 

 

?
1
2
3
4
5
6
7
- ( void )_queueMessage:(WVJBMessage*)message {
     if (_startupMessageQueue) {
         [_startupMessageQueue addObject:message];
     } else {
         [self _dispatchMessage:message];
     }
}

这里面还有个方法：

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
- ( void )_dispatchMessage:(WVJBMessage*)message {
     NSString *messageJSON = [self _serializeMessage:message];
     [self _log:@ "SEND" json:messageJSON];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\\" withString:@ "\\\\" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\"" withString:@ "\\\"" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\'" withString:@ "\\\'" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\n" withString:@ "\\n" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\r" withString:@ "\\r" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\f" withString:@ "\\f" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\u2028" withString:@ "\\u2028" ];
     messageJSON = [messageJSON stringByReplacingOccurrencesOfString:@ "\u2029" withString:@ "\\u2029" ];
 
     NSString* javascriptCommand = [NSString stringWithFormat:@ "WebViewJavascriptBridge._handleMessageFromObjC('%@');" , messageJSON];
     if ([[NSThread currentThread] isMainThread]) {
         [_webView stringByEvaluatingJavaScriptFromString:javascriptCommand];
     } else {
         __strong WVJB_WEBVIEW_TYPE* strongWebView = _webView;
         dispatch_sync(dispatch_get_main_queue(), ^{
             [strongWebView stringByEvaluatingJavaScriptFromString:javascriptCommand];
         });
     }
}

 

我们在回到WebViewJavascriptBridge.js.txt文件中看到

 

?
1
2
3
4
5
6
7
function _handleMessageFromObjC(messageJSON) {
     if (receiveMessageQueue) {
         receiveMessageQueue.push(messageJSON)
     } else { //肯定走这个  为什么呢？
         _dispatchMessageFromObjC(messageJSON)
     }
}

再来看看：

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
function _dispatchMessageFromObjC(messageJSON) {
         setTimeout(function _timeoutDispatchMessageFromObjC() {
             var message = JSON.parse(messageJSON)
             var messageHandler
             var responseCallback
 
             if (message.responseId) {
                 responseCallback = responseCallbacks[message.responseId]
                 if (!responseCallback) { return ; }
                 responseCallback(message.responseData)
                 delete responseCallbacks[message.responseId]
             } else {
 
                 if (message.callbackId) {
                     var callbackResponseId = message.callbackId
                     responseCallback = function(responseData) {
                         _doSend({ responseId:callbackResponseId, responseData:responseData })
                     }
                 }
                 
                 var handler = WebViewJavascriptBridge._messageHandler
                 if (message.handlerName) {
                     handler = messageHandlers[message.handlerName]
                 }
                 
                 try {
                     handler(message.data, responseCallback)
                 } catch (exception) {
                     if (typeof console != 'undefined' ) {
                         console.log( "WebViewJavascriptBridge: WARNING: javascript handler threw." , message, exception)
                     }
                 }
 
             }
         })
     }

大家还记得我们返回的对象是：
?
1
@{ @ "responseId" :callbackId, @ "responseData" :responseData }

 

所以这里messageHandlers刚才也说过了用来存方法的，callbackId被换了个名字叫responseId意思一样，只要值没变就行，所以就会执行：

 

?
1
2
3
bridge.callHandler( 'testObjcCallback' , { 'foo' : 'cccccccccccc' }, function(response) {
                 log( 'JS got response' , response)
             })

中的方法，好了，完了。

 

 

总结一下：js这边 先把方法名字、参数、处理方法保存成一个字典在转成json字符串，在通过UIWebview调用js中某个方法把这个json字符串传到Native中去（不是通过url传的，这样太low了），同时把这个处理的方法以key-value形式放到一个js的字典中。

UIWebView在收到这个json之后，进行数据处理、还有js的回掉的处理方法（就是那个callbackId）处理完成后也会拼成一个key-value字典通过调用js传回去（可以直接调用js）。

js在接到这个json后，根据responseId读取responseCallbacks中处理方法进行处理Native code返回的数据。

3.Native调用js method

过程不是直接调用js，也是通过js调用Native过程一样的处理方式。

大体来看一下，先看一个按钮的单击事件：

 

?
1
2
3
4
5
6
- ( void )callHandler:(id)sender {
     id data = @{ @ "greetingFromObjC" : @ "Hi there, JS!" };
     [_bridge callHandler:@ "testJavascriptHandler" data:data responseCallback:^(id response) {
         NSLog(@ "testJavascriptHandler responded: %@" , response);
     }];
}

 

看看callHandler:

 

?
1
2
3
- ( void )callHandler:(NSString *)handlerName data:(id)data responseCallback:(WVJBResponseCallback)responseCallback {
     [self _sendData:data responseCallback:responseCallback handlerName:handlerName];
}

看看_sendData:

 

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- ( void )_sendData:(id)data responseCallback:(WVJBResponseCallback)responseCallback handlerName:(NSString*)handlerName {
     NSMutableDictionary* message = [NSMutableDictionary dictionary];
     
     if (data) {
         message[@ "data" ] = data;
     }
     
     if (responseCallback) {
         NSString* callbackId = [NSString stringWithFormat:@ "objc_cb_%ld" , ++_uniqueId];
         _responseCallbacks[callbackId] = [responseCallback copy];
         message[@ "callbackId" ] = callbackId;
     }
     
     if (handlerName) {
         message[@ "handlerName" ] = handlerName;
     }
     [self _queueMessage:message];
}

到_queueMessage:之后流程就和上面一样了，这里面native也有个：

 

 

?
1
2
3
4
5
6
NSString* responseId = message[@ "responseId" ];
        if (responseId) {
            WVJBResponseCallback responseCallback = _responseCallbacks[responseId];
            responseCallback(message[@ "responseData" ]);
            [_responseCallbacks removeObjectForKey:responseId];
        }

这个和js中的处理思想是一样的。

 

 

总结：native将方法名、参数、回到的id放到一个对象中传给js。

js根据方法名字调用相应方法，之后将返回数据和responseId拼装，最后通过src 重定向到UIWebview 的delegate。

native得到数据后根据responseId调用事先装入_responseCallbacks的block，动态读取调用，从而完成交互。

afrtooylsw
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebViewJavascriptBridge框架
05-03
介绍js与java的交互框架WebViewJavascriptBridge，实现android与h5的混合式开发
WebViewJavascriptBridge 开源代码含有分析
08-14
在这个“WebViewJavascriptBridge开源代码分析”中，我们将深入探讨其工作原理、主要功能以及如何在自己的项目中应用。 首先，我们来理解一下基本概念。WebView是iOS中的一个组件，它可以加载和显示HTML、CSS和...
WebViewJavascriptBridge浅析
weixin_34153893的博客
12-29 128
WebViewJavascriptBridge是一个Objective-C与JavaScript进行消息互通的三方库。通过WebViewJavascriptBridge，我们可以很方便的实现OC和Javascript互调的功能。WebViewJavascriptBridge实现互调的过程也容易理解，就是在OC环境和Javascript环境各自保存一个相互调用的bridge对象，每一个调用之间都有i...
WebViewJavascriptBridge
weixin_34148508的博客
03-23 64
前段时间做h5交互使用了WebViewJavascriptBridge，今天做下整理。 首先确保一份已经配好功能的html文件。（html还在学习阶段，暂时就不卖弄了。。。） 1.初始化一个webview（viewdidload） <span class="constant">UIWebView</span>...
WebViewJavascriptBridge详细使用
04-05
本篇讲讲WebViewJavascriptBridge的基本原理及详细讲讲如何去使用，包括iOS端的使用和JS端的使用。 经过多番百度、Google，发现WebViewJavascriptBridge的资源讲解不是翻译官方文档就是直接说官方提供的demo。但是...
Android代码-WebViewJavascriptBridge
08-05
WebViewJavascriptBridge []() An Android bridge for sending messages between Java and JavaScript in WebView. and It is a mirror of marcuswestin/WebViewJavascriptBridge (object-c) and Lision/...
WebViewJavascriptBridge－demo
12-30
WebViewJavascriptBridge demo 代码类分享
HybridApp之WebViewJavaScriptBridge
CedricD的博客
08-10 341
前言：为什么HTML5混合开发这么火 在网页中可以看到三维立体特效，技术可以跨平台，适配多终端。成为企业的“宠儿”互联网的风向标，数据显示2016年使用HTML5技术游戏开发达到56.65%,企业级网页应用达到37.64%，营销推广达到77.95%。 从开发成本上来说，开发一个HTML5移动站点要比开发一个原生APP的成本低出很多（你除了要开发一个Android应用之外，还需要开发一个iOS应用。） HTML5最大的优势跨屏适配。从跨屏的角度来对比的话，原生应用包括Android、iOS等众多不同的手机系
【创新未发表】Matlab实现遗传算法GA-RF实现风电预测算法研究.rar
最新发布
08-02
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
webviewjavascriptbridge
03-16
WebViewJavascriptBridge是一个用于iOS和Android平台的JavaScript桥接库，它可以让JavaScript代码和原生代码之间进行相互调用和传递数据。通过WebViewJavascriptBridge，开发者可以在Web页面中调用原生的API，也可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值