webjs与native交互SDK(android，ios通用)

三、使用方法

1.在index.html中引入要使用的js库文件和css文件，包括 jquery.min.js， chinaappmain.js， chinaappmain.css。

代码部分：

<link rel="stylesheet" type="text/css" href="css/chinaappmain.css"/>

 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

 <script src="js/chinaappmain.js" type="text/javascript" charset="utf-8"></script>

2.DOM加载完后进行初始化

代码部分：

initJsNative(function(bridge){

            callbackJsNative(bridge)

        });

3.自定义业务逻辑函数 function callbackJsNative(bridge)，进行包括数据初始化和对指定的html标签绑定对应的操作。下面以分享功能举例：

代码部分：

//自定义交互对象，通过new实例化，调用其中的方法
var commmonJs=new jsNativeCommon(bridge);
     //定义分享数据
var shareData={
"shareTitle":"分享标题",
"shareImg":"http://img4.cache.netease.com/sports/2016/5/16/20160516121247620d9.png",
"shareDesc":"分享描述",
"shareUrl":"http://sports.firefox.163.com/16/0516/12/ISEDAHV53T79QB18.html"
};
//这里是调用库内方法绑定分享按钮，也可以自己绑定
commmonJs.clickShareBtn("weixinAppMessage",shareData);
commmonJs.clickShareBtn("weixinTimeLine",shareData);
commmonJs.clickShareBtn("shareWeibo",shareData);
commmonJs.clickShareBtn("shareQQ",shareData);
commmonJs.clickShareBtn("shareFaceBook",shareData);

commmonJs.clickShareBtn("shareTwitter",shareData);

以下是分享区域的html

代码部分：

<ul class="shareBtnList">
<li id="weixinAppMessage"><img src="img/share_haoyou_btn@2x.png"/></li>
<li id="weixinTimeLine"><img src="img/share_pengyouquan_btn@2x.png"/></li>
<li id="shareWeibo"><img src="img/share_xinlang_btn@2x.png"/></li>
<li id="shareQQ"><img src="img/share_qq_btn@2x.png"/></li>
<li id="shareFaceBook"><img src="img/share_facebook_btn@2x.png"/></li>
<li id="shareTwitter"><img src="img/share_twitter_btn@2x.png"/></li>

</ul>

分享页面展示：

四、chinaappmain.js库函数说明

1. 判断设备类型函数：

deviceType()

说明：安卓设备返回值为 ' isAndroid' ,ios设备返回值为 ‘  isIos ’。

2. 分享方法： nativeShare(shareData,shareType)；

说明：分享数据： shareData={

      "shareTitle" : "分享标题" ,

"shareImg":"分享图片",  

       "shareDesc" : "分享描述" ,

  "shareUrl" : ”分享链接 "

}；

分享类型： shareType，目前有以下几种：

微信好友： "weixinAppMessage"

微信朋友圈："weixinTimeLine"

新浪微博："shareWeibo"

腾讯qq："shareQQ"

脸书："shareFaceBook"

推特："shareTwitter"

3. 绑定分享按钮方法样例：clickShareBtn(shareBtnType,shareData)

shareBtnType：分享类型，分享按钮id；shareData：分享数据；

这里是库内提供的方法，也可以自行绑定。

4. 判断客户端是否安装应用：nativeIsSetupApp (appId,callback)

说明：

appId：应用包名Bid;

callback:客户端 响应后的回调函数，格式为

{

ifIsSetupApp: function (){},//已安装后的操作

ifUnSetupApp: function (){}//未安装时的操作

}；

应用举例：

页面加载判断 appId=“com.gmw.gmwgmym"的应用是否安装，若已安装则隐藏广告。

代码部分：

/****广告显示功能：根据包名appId，判断是否安装此应用，若已经安装择隐藏广告区*******/
var appId="com.gmw.gmwgmym";
commmonJs.nativeIsSetupApp(appId,{
ifIsSetupApp:function(){
commmonJs.hideAdvertise("gameAdvertise");
},
ifUnSetupApp:function(){}

});

其中 hideAdvertise是库内方法，也可以自己定义。

5. 外部浏览器中打开页面：nativeOpenWebView(url)

   appStore中打开页面： nativeOpenAppStore(url)

应用举例：

//打开下载页面三种情况，依次为应用内打开，外部浏览器打开，打开appstore
var downloadUrl="http://sports.firefox.163.com/16/0516/12/ISEDAHV53T79QB18.html";

commmonJs.clickDownloadBtn("gameDownloadBtn1",downloadUrl,"nativeOpenWebView");

commmonJs.clickDownloadBtn("gameDownloadBtn2",downloadUrl,"nativeOpenAppStore");

页面展示：

6. 打开客户端的一个二级页面： nativeOpenNextPage ( data )

说明：data={

articleId：文章id，

contentType：二级页面类型   0=新闻类型；1=图集类型；2=视频类型；3=电台类型；4=专题   5=webview   6=可订阅的列表专题，

artUrl：详情页面url  ，在 contentType=0，2，3，5

menuId：栏目id，只有在 contentType=6 时候有

topic：专题id，只有在 contentType=4时候有

menuTitle:栏目标题  ， 只有在 contentType=6 时候有

}

应用举例：

//打开详情页面三种情况，依次为普通详情，图集页面，视频，电台，专题，webview，可订阅列表专题
var normalDetailData={
"articleId":"articleId",
"contentType":0,
"artUrl":"http://www.sohu.com/"
};
var imgsDetailData={
"articleId":"articleId",
"contentType":1,
};
var videoDetailData={
"articleId":"articleId",
"contentType":2,
"artUrl":"http://www.qq.com/"
};
var radioDetailData={
"articleId":"articleId",
"contentType":3,
"artUrl":"http://www.163.com/"
};
var topicDetailData={
"articleId":"articleId",
"contentType":4,
"topic":"topicId"
};
var webviewDetailData={
"articleId":"articleId",
"contentType":5,
"artUrl":"http://www.163.com/"
};
var listViewDetailData={
"articleId":"articleId",
"contentType":6,
"menuId":columnsId,
"menuTitle":"栏目标题"
};
commmonJs.clickNewsItem("recommendItem0",normalDetailData);
commmonJs.clickNewsItem("recommendItem1",imgsDetailData);
commmonJs.clickNewsItem("recommendItem2",videoDetailData);
commmonJs.clickNewsItem("recommendItem3",radioDetailData);
commmonJs.clickNewsItem("gameDownloadBtn0",webviewDetailData);

commmonJs.clickNewsItem("columnsName",listViewDetailData);

页面展示：

7. 获取是否订阅栏目： nativeIsJoinColumns(columnsId,callback)

说明:

columnsId：栏目ID，

callback:客户端 响应后的回调函数，格式为

{

ifIsJoinCallback : function (){},//已订阅后的操作

ifUnJoinCallback : function (){}//未订阅时的操作

}；

应用举例：页面加载后，会判断栏目是否订阅，若已经订阅，则显示取消订阅，未订阅，则显示订阅。

代码部分：

commmonJs.nativeIsJoinColumns(columnsId,{
ifIsJoinCallback:function(){
commmonJs.changeSubscribe("subscribeBtn","取消订阅");

},
ifUnJoinCallback:function(){
commmonJs.changeSubscribe("subscribeBtn","订阅");
}

}

页面展示：

8. 订阅栏目： nativeJoinColumns(columnsId)；

9. 取消订阅栏目:nativeCancelColumns(columnsId);

10. 判断用户是否登录: nativeIsLogin(callback);

说明：callback:客户端 响应后的回调函数，格式为

{

ifIsLoginCallback : function (){},//已订阅后的操作

ifUnLoginCallback : function (){}//未订阅时的操作

}；

应用举例：点击订阅时，判断是否登录，若未登录，则打开登录页面，若已登录，则订阅栏目。

代码部分：

if ($(this).html()=="订阅") {
// alert("准备获取是否登录");
commmonJs.nativeIsLogin({
ifIsLoginCallback:function(){
commmonJs.nativeJoinColumns(columnsId,{
joinColumnsSuccess:function(){
commmonJs.changeSubscribe("subscribeBtn","取消订阅");
},
joinColumnsFailed:function(){

}
});

},
ifUnLoginCallback:function(){
commmonJs.nativeOpenUserLogin();
}


});

}

11. 调用用户登录页面: nativeOpenUserLogin()

12. 初始化分享数据到客户端: nativeCallShareData (shareData)

13.js注册改变字体大小供客户端调用： bridge.registerHandler( ‘changeWebFontSize’,function( data ){})

说明：data=“0”——小号；

data=“1”——中号

data=“2”——大号

data=“3”——特号