本发明涉及电子信息技术领域，尤其涉及了一种移动端页面交互实现方法及装置。
背景技术
随着移动互联网的高速发展，给移动通信终端用户打开了一扇通过互联网世界的大门，移动互联网结合了移动通信的便利性和互联网的丰富内容，成为通信业和互联网业融合发展的交叉领域，具有巨大的市场前景。
但是移动终端设备的屏幕分辨率大小不等，适配开发成本大。并且移动终端设备的cpu处理性能低、内存小。因此有些网站网页并不适合在移动终端直接进行显示，需要二次开发，在开发设计时要考虑到移动终端的软硬件因素。
对于那些已经有pc端的网站或网络应用，如果想开发一套移动端版本，往往需要较多的人力成本和时间成本，除此之外，他们会采取不同的网址，需要同时维护两套代码。
技术实现要素：
本发明主要解决的技术问题是提供一种移动端页面交互实现方法及装置，能够将pc端web网页转换为移动端web网页。
为解决上述技术问题，本发明采用的一个技术方案是：提供一种移动端页面交互实现方法，所述方法包括：移动端浏览器从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句；其中，预先定义的javascript交互语句是根据所要实现的网页功能、交互方式分别定义，用于javascript与native之间的通讯，通过调用系统交互javascript注册语句和调用语句；利用预先注入的javascript以及javascript交互语句，通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript；以及加载javascript以响应用户的操作运行javascript实现应网页功能的交互。
其中，所述页面交互javascript包括注册语句和回调语句；其中，注册语句用于注册供native调用的javascript函数以及接收从native传送的数据和回调函数，回调语句用于调用native提供的javascriptbridge语句以根据返回数据执行回调。
其中，移动端浏览器从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句，具体包括：移动端浏览器从pc端下载页面并拦截javascriptapi://__init_bridge__链接，在webview.window下初始化全局变量系统交互javascript，设置页面交互函数javascript._isallready的值为true，以主动触发页面交互javascriptready事件，通知webjavascript页面交互javascript已初始化完成；注入预先定义的javascript以及javascript交互语句。
其中，利用预先注入的javascript以及javascript交互语句，通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript，具体包括：在预先注入javascript处理完成回调通知native注册的函数名，使native通过此函数名调用对应的处理语句以传送数据和回调函数；通过javascriptbridge调用相应的回调函数对回送的数据进行处理以加载页面；以及拦截pc端的javascript。
其中，所述方法还包括：在javascript中定义页面交互javascriptready语句；以及调用页面交互javascriptready语句，使用window下的页面交互javascript全局对象与本地代码交互，实现网页功能的交互。
为解决上述技术问题，本发明采用的另一个技术方案是：提供一种移动端页面交互实现装置，所述装置包括：初始化模块，用于从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句；其中，预先定义的javascript交互语句是根据所要实现的网页功能、交互方式分别定义，用于javascript与native之间的通讯，通过调用系统交互javascript注册语句和调用语句；调用模块，用于利用预先注入的javascript以及javascript交互语句，通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript；交互模块，用于加载javascript以响应用户的操作运行javascript实现应网页功能的交互。
其中，所述系统交互javascript包括注册语句和回调语句；其中，注册语句用于注册供native调用的javascript函数以及接收从native传送的数据和回调函数，回调语句用于调用native提供的javascriptbridge语句以根据返回数据执行回调。
其中，所述初始化模块还用于从pc端下载页面并拦截javascriptapi://__init_bridge__链接，在webview.window下初始化全局变量系统交互javascript，设置页面交互函数javascript._isallready的值为true，以主动触发页面交互javascriptready事件，通知webjavascript页面交互javascript已初始化完成。
其中，所述调用模块还用于：在预先注入javascript处理完成回调通知native注册的函数名，使native通过此函数名调用对应的处理语句以传送数据和回调函数；以及通过javascriptbridge调用相应的回调函数对回送的数据进行处理以加载页面。
其中，所述初始化模块还用于在javascript中定义页面交互javascriptready语句；所述调用模块还用于调用页面交互javascriptready语句，使用window下的页面交互javascript全局对象与本地代码交互，实现网页功能的交互。
本发明由于采用了以上技术方案，具有显著的技术效果：
本发明通过从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句，以通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript，在加载javascript后能够响应用户的操作运行javascript实现应网页功能的交互，实现移动端直接登陆浏览pc端网页，而无需单独开发移动端web版本，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成。
附图说明
图1是本发明实施方式中的一种移动端页面交互实现方法的流程示意图；
图2是图1所示的步骤s12的具体实现方法的流程示意图；
图3是本发明实施方式中的一种移动端页面交互实现装置的结构示意图。
具体实施方式
首先对本发明实施方式所需引用的现有技术名词进行解释。
javascript，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言，同时也是一种广泛用于客户端web开发的脚本语言，常用来给html(标准通用标记语言的子集)网页添加动态功能，比如响应用户的各种操作。
下面结合附图和实施方式对本发明进行详细说明。
请参阅图1，为本发明实施方式中的一种移动端页面交互实现方法的流程示意图，该方法包括：
步骤s11，移动端浏览器从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句。
在本说明书中，为了方便对函数、语句等出现的有关于页面交互javascript的描述，以下将页面交互javascript简称为xxjs。
其中，在移动端中，页面下载完毕后，前端主动请求xxjsapi://__init_bridge__链接，本地会拦截这个链接进行xxjs初始化。
xxjs初始化，具体为：在webview.window下初始化全局变量xxjs，并设置xxjs._isallready为true，主动触发xxjsready事件，通知webjavascriptxxjs已初始化完成，可以执行后续的操作。
如果前端没有主动初始化xxjs，在页面加载完毕后，顾问/助手app的web容器也会各自去初始化xxjs。
进一步地，预先定义的javascript交互语句(xxjs)，是根据所要实现的网页功能、交互方式分别定义，用于javascript与native之间的通讯，前端可以通过调用javascript交互语句来注册语句和调用语句。在本实施方式中，该xxjs包括：
(1)注册语句，即，registerjshandler语句：注册供native调用的javascript函数，可提供回调。javascript处理完成后回调通知native注册的函数名，native通过此函数名调用对应的处理语句，接收从native传送的数据和回调函数。
例如，通过如下语句实现native调用javascript：
@paramjshandlername{string}；
@p6ramhandler{function}；
function(data,callback){*//dosomethingwith'data'fromnative.*//noticenativetaskdonewith'callback'*}*/xxjs.registerjshandler＝function(jshandlername,function(data,callback)；
(2)回调语句，即，callnativehandler语句：调用native提供的javascriptbridge语句，处理完成后若有返回数据，根据返回数据执行回调。
例如，通过如下语句实现javascriptbridge的调用：
@paramnativehandlername{strign}；native注册的javascriptbridge方法名
@paramargs{object}；传递的参数值，类型为javascriptobject
@paramcallback{function}；方法回调处理**/xxjs.callnativehandler＝function(nativehandlername,args,callback)；
步骤s12，通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript。
请同时参阅图2，通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript，具体通过如下步骤实现：
步骤s121，在预先注入javascript处理完成回调通知native注册的函数名，使native通过此函数名调用对应的处理语句以传送数据和回调函数。
在本实施方式中，具体通过如下语句实现：
@paramjshandlername{string}；注册的函数名，native通过此函数名实现调用
@p6ramhandler{function}；处理函数，接收从native传送的数据和回调函数；
function(data,callback){*//dosomethingwith'data'fromnative.*//noticenativetaskdonewith'callback'*}*/xxjs.registerjshandler＝function(jshandlername,function(data,callback)；实现具体逻辑处理；
步骤s122，通过javascriptbridge调用相应的回调函数对回送的数据进行处理以加载页面；
在本实施方式中，具体通过如下语句实现：
@paramnativehandlername{strign}；native注册的javascriptbridge语句名
@paramargs{object}；传递的参数值，类型为javascriptobject
@paramcallback{function}；语句回调处理**/xxjs.callnativehandler＝function(nativehandlername,args,callback)；实现具体逻辑处理；
步骤s123，拦截pc端的javascript。
步骤s13，加载javascript，并响应用户操作运行javascript实现对应网页功能的交互。
具体地，在javascript中定义xxjsready语句，并调用xxjsready，使用window下的xxjs全局对象与本地代码交互，实现网页功能的交互。
在本实施方式中，在javascript中定义xxjsready语句如下：
jsvarxxjsready＝function(readycallback){if(readycallback&&typeofreadycallback＝＝'function'){if(window.xxjs&&typeofwindow.xxjs＝＝'object'&&xxjs._isallready){readycallback()；}else{document.addeventlistener('xxjsready',function(){readycallback()；},false)；}}}；
在本实施方式中，调用xxjsready，使用window下的xxjs全局对象与本地代码交互，具体通过如下语句实现：
jsxxjsready(function(){//初始化要调用的功能；
为方便前端的调用，客户端使用xxjs.callnativehandler封装了常用的一些组件供前端调用，在本实施方式中，具体通过如下语句实现：
```jsxxjsready(function(){//示例：js调用nativeui组件提供的关闭加载中方法xxjs.ui.loading.hide()；
进一步地，xxjs支持的javascript交互协议举例说明如下：
(1)在新的视图打开一个网页
@paramurl{string}需打开页面的url*@paramparams{object}需在打开页面用到的参数*params参数描述*@replace_current{boolean}为true时表示打开新页面后，替换打开前的页面(即不可返回到打开前的页面)，默认为false*/xxjs.page.start(url,params)；
(2)返回客户端上一视图
@paramdelta{int}需要回退的层级数，默认不传时为1，至多可以返回到栈底首页*/xxjs.page.back(delta)；
(3)web页面重新展示回调javascript
前端在页面中注册这段代码注册page.reshowed方法，客户端会在页面重新展示的时候调用此方法，如“浏览器后退操作、其他返回到当前页面操作”，均会触发此方法。前端可以在这个方法回调内处理诸如设置导航栏按钮一类的操作。
js//前端在xxjs初始化完后注册xxjs.registerjshandler('page.reshowed',function(data,callback){xxjs.ui.toast.show('page.html页面重新展示了')；}
(4)native通过javascript获取当前页面分享内容
前端在需要自定义分享内容的页面注册以下方法，如果没有注册此方法或此方法callback没有返回要分享的数据，客户端本地将读取当前('网页标题”网页链接')作为分享内容
```js//前端在需要自定义分享文案的页面注册以下方法(xxjs初始化完成之后注册)xxjs.registerjshandler('page.getsharedata',function(data,callback){varshareentity＝{title:'这是分享标题',//必填字段content:'这是分享内容',//可选字段imgurl:'这是分享图片的链接',//可选字段(分享页面带图片时必填)url:'这是分享网页的链接',//可选字段(分享页面时必填)}
//ios客户端在本地调用[self.xxjsbridgecalljshandler:@"page.getsharedata"data:nilresponsecallback:^(idresponsedata){if([responsedataiskindofclass:[nsdictionaryclass]]){nsdictionary*shareentity＝responsedata[@"data"][@"shareentity"]；if(shareentity){//...获取到自定义的分享内容，做进一步解析处理}}}```
请参阅图3，为本发明实施方式中的一种移动端页面交互实现装置的结构示意图。该装置30包括：
初始化模块31，用于从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句。
具体地，该初始化模块31在页面下载完成后通过拦截xxjsapi://__init_bridge__链接，在webview.window下初始化全局变量xxjs，并设置xxjs._isallready为true，以主动触发xxjsready事件，通知webjavascriptxxjs已初始化完成。
进一步地，预先定义的javascript交互语句(xxjs)是根据所要实现的网页功能、交互方式分别定义，用于javascript与native之间的通讯，前端可以通过调用xxjs注册语句和调用语句。在本实施方式中，xxjs包括registerjshandler语句和callnativehandler语句；其中，registerjshandler语句用于注册供native调用的javascript函数以及接收从native传送的数据和回调函数，callnativehandler语句用于调用native提供的javascriptbridge语句以根据返回数据执行回调。
调用模块32，用于利用预先注入的javascript以及javascript交互语句，通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascript。
其中，该调用模块32利用预先注入的javascript以及javascript交互语句，通过javascriptbridge回调pc端页面数据以加载页面，具体通过如下实现：
在预先注入javascript处理完成回调通知native注册的函数名，使native通过此函数名调用对应的处理语句以传送数据和回调函数；具体通过如下语句实现：
@paramjshandlername{string}；注册的函数名，native通过此函数名实现调用
@p6ramhandler{function}；处理函数，接收从native传送的数据和回调函数；
function(data,callback){*//dosomethingwith'data'fromnative.*//noticenativetaskdonewith'callback'*}*/xxjs.registerjshandler＝function(jshandlername,function(data,callback)；实现具体逻辑处理；
通过javascriptbridge调用相应的回调函数对回送的数据进行处理以加载页面；具体通过如下语句实现：
@paramnativehandlername{strign}；native注册的javascriptbridge语句名
@paramargs{object}；传递的参数值，类型为javascriptobject
@paramcallback{function}；语句回调处理**/xxjs.callnativehandler＝function(nativehandlername,args,callback)；实现具体逻辑处理。
示例1：javascript注册语句，供native调用：
xxjs.registerjshandler('getsharedata',function(data,callback){
alert('native调用了javascript提供的getsharedata方法')；
varresponsedata＝do_some_task(data)；
callback(responsedata)；//javascript处理完成后，回调通知native已处理完
})；
交互模块33，用于加载javascript，并响应用户操作运行javascript实现对应网页功能的交互。
在本实施方式中，该初始化模块31还用于在javascript中定义xxjsready语句。具体地，该xxjsready语句为：
jsvarxxjsready＝function(readycallback){if(readycallback&&typeofreadycallback＝＝'function'){if(window.xxjs&&typeofwindow.xxjs＝＝'object'&&xxjs._isallready){readycallback()；}else{document.addeventlistener('xxjsready',function(){readycallback()；},false)；}}}；
该调用模块32还用于调用xxjsready语句，使用window下的xxjs全局对象与本地代码交互，实现网页功能的交互。
例如，在本实施方式中，xxjs支持的javascript交互协议包括：
(1)在新的视图打开一个网页，通过如下语句实现：
@paramurl{string}需打开页面的url*@paramparams{object}需在打开页面用到的参数*params参数描述*@replace_current{boolean}为true时表示打开新页面后，替换打开前的页面(即不可返回到打开前的页面)，默认为false*/xxjs.page.start(url,params)；
(2)返回客户端上一视图，通过如下语句实现：
@paramdelta{int}需要回退的层级数，默认不传时为1，至多可以返回到栈底首页*/xxjs.page.back(delta)；
(3)web页面重新展示回调javascript
前端在页面中注册这段代码注册page.reshowed方法，客户端会在页面重新展示的时候调用此方法，如“浏览器后退操作、其他返回到当前页面操作”，均会触发此方法。前端可以在这个方法回调内处理诸如设置导航栏按钮一类的操作。
js//前端在xxjs初始化完后注册xxjs.registerjshandler('page.reshowed',function(data,callback){xxjs.ui.toast.show('page.html页面重新展示了')；}
(4)native通过js获取当前页面分享文案(前端注册接口供本地调用)
前端在需要自定义分享文案的页面注册以下方法，如果没有注册此方法或此方法callback没有返回要分享的数据，客户端本地将读取当前('网页标题”网页链接')作为分享内容
```js//前端在需要自定义分享文案的页面注册以下方法(xxjs初始化完成之后注册)xxjs.registerjshandler('page.getsharedata',function(data,callback){varshareentity＝{title:'这是分享标题',//必填字段content:'这是分享内容',//可选字段imgurl:'这是分享图片的链接',//可选字段(分享页面带图片时必填)url:'这是分享网页的链接',//可选字段(分享页面时必填)}
//ios客户端在本地调用[self.xxjsbridgecalljshandler:@"page.getsharedata"data:nilresponsecallback:^(idresponsedata){if([responsedataiskindofclass:[nsdictionaryclass]]){nsdictionary*shareentity＝responsedata[@"data"][@"shareentity"]；if(shareentity){//...获取到自定义的分享内容，做进一步解析处理}}}```
本发明实施方式通过从pc端下载页面并进行页面交互javascript初始化，以注入预先定义的javascript以及javascript交互语句，以通过javascriptbridge回调pc端页面数据以加载页面，并拦截pc端的javascrip，在加载javascript后能够响应用户的操作运行javascript实现应网页功能的交互，实现移动端直接登陆浏览pc端网页，而无需单独开发移动端web版本，在充分利用原网址的内容、保持原有界面外观的前提下，能够有效降低开发成本和维护成本，只需要很少的时间和很少的人工成本即可开发完成。
在本发明所提供的几个实施例中，应该理解到，所揭露的系统，装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，管理服务器，或者网络设备等)或处理器执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(英文：read-onlymemory，缩写：rom)、随机存取存储器(英文：randomaccessmemory，缩写：ram)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。