H5 SDK 1.x

页面配置

检查App 推送（通知）是否开启

WARNING

该功能在至少需要 App 8.0.4 版本

用于实现“提示用户打开推送通知功能”，判断功能未打开，提示用户

使用范例

javascript

var isTrueSet = function (val){ return val === 'true' }
var pushPermission = function() {
    if(typeof window.JSBinder != 'undefined' && (typeof window.JSBinder['getPushPermission'] != 'undefined') ) {
        return isTrueSet(window.JSBinder.getPushPermission())
    } else {
        return false
    }
}

if(pushPermission) {
    //推送通知功能已打开
} else {
    //推送通知功能未打开，提示用户
}

pushPermission

函数返回 true false 字符串，表示推送通知功能是否开启，你需要用范例中的 isTrueSet 函数转换成布尔值

沉浸式导航

WARNING

该功能在至少需要 iOS 7.3.9 / Android 7.3.12 版本

默认导航样式（左图），沉浸导航样式（右图）

将 H5 全屏显示，且导航操作以按钮样式悬浮在页面上的效果称为沉浸导航样式。返回、关闭当前页面、更多操作的按钮效果悬浮在页面上。

默认导航样式和沉浸导航样式之间可以自由切换。

SetNavigationStyleCustom

导航样式切换为沉浸效果

JSBinder.SetNavigationStyleCustom()

SetNavigationStyleDefault

导航样式切换为默认效果

JSBinder.SetNavigationStyleDefault()

调起分享面板

H5 中调起APP的分享面板。在APP8.3.3 版本实现，计划用在邀请有礼活动

功能可用于“邀请好友”等按钮，引导用户分享到朋友圈或者好友。

必须先设置分享内容，测试页面见 https://infzm-app-jssdk.misaka.im/share

调起分享面板示例

使用范例

javascript

JSBinder.openSharePanel()

分享图片

该功能意在提供一个接口，调用APP 的分享功能。调用者需提供 base64 编码的图片内容，在合适的时机触发分享功能。

分享图片的操作示例

使用范例

javascript

function getBase64Content() {
    return "data:image/png;base64,iVBORw0KGgoAAA"
}

//lunch onBase64ContentCreated function
JSBinder.onBase64ContentCreated();

定义全局 getBase64Content 函数

所以在触发分享功能之前，先准备好 base64 格式编码的图片内容（base64 image encode）作为函数 getBase64Content 的返回值。

在触发分享功能时，该函数会被调用。

javascript

function getBase64Content() {
    return "data:image/png;base64,iVBORw0KGgoAAA"
}

onBase64ContentCreated

在你准备好触发分享操作时，调用这个函数。

javascript

//lunch onBase64ContentCreated function
JSBinder.onBase64ContentCreated();

APP 实现细节

定义 JS onBase64ContentCreated 函数，用于接收准备指令。获得指令后调用 JavaScript 的函数 getBase64Content

Android 实现：

java

//android 
@JavascriptInterface
 public void onBase64ContentCreated() {
   webView.evaluateJavascript("(function() { return getBase64Content(); })();",new ValueCallback<String>() {
    @Override
    public void onReceiveValue(String s) {
        Log.d("base64 data:", s);
    }
});

iOS 实现：

Objective-C

//ios
[_webView evaluateJavaScript:@"getBase64Content()"
           completionHandler:^(id _Nullable obj, NSError * _Nullable error) {
}];

javascript

//jsbinder
JSBinder.prototype.onBase64ContentCreated = function() {
    window.location.href = "base64content://created";
  return true;
}

大概的流程如下：

1、网页提前把图片生成 base64 编码，定义 getBase64Content 函数，并把base64 编码的图片作为返回值；

2、网页调用 onBase64ContentCreated 函数；

3、客户端收到 onBase64ContentCreated 函数中的返回值，准备获取内容；

4、客户端调用 JavaScript 的函数 getBase64Content ，获得base64 编码的图片内容；

参考 https://tower.im/teams/560599/todos/22352/

获取客户端详情

平台

javascript

    if (JSBinder.getPlatform() == 'android') { console.log('安卓机') }
    
    if (JSBinder.getPlatform() == 'ireader') { console.log('苹果机') }

版本号

    console.log( JSBinder.getVersion() ) //6.3.1

==因为返回的版本号只是字符串，有时候要判读大于等于该版本的时候，所以引入一个判断函数：==

javascript

/**
 * Simply compares two string version values.
 *
 * Example:
 * versionCompare('1.1', '1.2') => -1
 * versionCompare('1.1', '1.1') =>  0
 * versionCompare('1.2', '1.1') =>  1
 * versionCompare('2.23.3', '2.22.3') => 1
 *
 * Returns:
 * -1 = left is LOWER than right
 *  0 = they are equal
 *  1 = left is GREATER = right is LOWER
 *  And FALSE if one of input versions are not valid
 *
 * @function
 * @param {String} left  Version #1
 * @param {String} right Version #2
 * @return {Integer|Boolean}
 * @author Alexey Bass (albass)
 * @since 2011-07-14
 */
var versionCompare = function (left, right) {
  if (typeof left + typeof right != 'stringstring') return false;
  var a = left.split('.');
  var b = right.split('.');
  var i = 0;
  var len = Math.max(a.length, b.length);

  for (; i < len; i++) {
    if (a[i] && !b[i] && parseInt(a[i]) > 0 || parseInt(a[i]) > parseInt(b[i])) {
      return 1;
    } else if (b[i] && !a[i] && parseInt(b[i]) > 0 || parseInt(a[i]) < parseInt(b[i])) {
      return -1;
    }
  }

  return 0;
};

比如需要调用 6.3.2 才有的功能：

javascript

//if(versionCompare(window.JSBinder.getVersion(), '6.3.2') > -1){
//    JSBinder.openPage('7', 'page://?native=infzm&link_type=7'); //打开订阅会员页
//}

//因为安卓客户端传过来的版本号不可靠，判断是客户端后直接调起即可

function isApp() {
    if (typeof window.JSBinder != 'undefined') {
        return true;
    }
    return false;
}

if(isApp()){
    JSBinder.openPage('7', 'page://?native=infzm&link_type=7'); //打开订阅会员页
}

~~如果当前最大版本只有 6.3.2 ，且要用到 6.3.2 的功能，就无需引入 versionCompare 函数，暂且这么偷懒：~~

javascript

//if(window.JSBinder.getVersion() == '6.3.2'){
//    JSBinder.openPage('7', 'page://?native=infzm&link_type=7'); //打开订阅会员页
//}

调起原生页面

功能测试 demo http://h5.misaka.im/webview-open-page-test.php

源代码 https://paste.ubuntu.com/p/JbwbQ3qyzp/

若干页面

在微信等环境下可用链接方式来唤醒 APP，但到达率不高，慎用，详情见唤醒打开 APP 指定页面。

在应用内部使用 JSBinder.openPage(link_type, uri) 方法来调起原生页面

link_type (字符串类型)	页面名称	备注
`3`	影像
`4`	南周严选
`5`	我的页面
`6`	活动广场
`7`	订阅会员页（开通会员页）	需要 APP 6.3.2 版本
`8`	投稿爆料	需要 APP 6.3.1 版本
`9`	意见反馈	需要 APP 6.3.1 版本

WARNING

更多支持页面，请到应用文档查看！

javascript

function isApp() {
    if (typeof window.JSBinder != 'undefined') {
        return true;
    }
    return false;
}

if (isApp()) { //判断是否为在南周App

    JSBinder.openPage('7', 'page://?native=infzm&link_type=7');
    // 打开订阅会员页（开通会员页）见上面表格
    
} else {
    // 非APP内浏览器，尝试用 linkeme 链接的方式唤醒
    // 见 唤醒打开 APP 指定页面
    window.location.href = "https://lkme.cc/iHD/0YkezIp4M"
}

文章页面

JSBinder.gotoContent

javascript


var online_content_api = "http://api.infzm.com/mobile/contents/"
var mobile_app_url     = "http://www.infzm.com/wap/#/content/"

//http://api.infzm.com/mobile/contents/142141/check
//通过服务器查找文章信息

var checkContent = function(id, cb) {

    $.ajax({
        url     : online_content_api + id + "/check",
        type    : 'get',
        dataType: 'json',
        success: function(data) {
            cb(data.data.content.id, data.data.content.pay_property.content_type)
        },
        error: function() {}
    })
    
}

if (isApp()) { //判断是否为在南周App
               //文章id
    checkContent(id, function(_id, _content_type) {
        JSBinder.gotoContent(_id, _content_type) //调起函数
    })
    
} else {
    //非APP环境只能网站打开
    window.location.href = mobile_app_url + id
}

登录页面

调出登录页面首先要在页面上判断用户是否登录，见获取用户信息相关说明

javascript


    var isLogin       = !isNaN(parseInt(userinfo.userid)) //判断是否登陆        
    if (!isLogin) {               //未登录，UI 提示
        JSBinder.gotoLogin()      //调出登录界面
    }

分享信息设置

JSBinder.activityDetails

javascript

var share_title = '分享标题';
var share_desc  = '分享描述';
var share_icon  = 'http://images.infzm.com/medias/2018/0816/136580.jpeg@770x510';
var share_url   = 'http://www.infzm.com/content/136473';

//参数                      分享标题 分享描述 小图标地址 分享地址
JSBinder.activityDetails(share_title, share_desc, share_icon, share_url);

分享回调函数

==这个功能需要 iOS v6.2.5 以上版本才支持！==

window.JSafterShare

不支持对多个分享设置对应的回调，所以在用户分享前就要先设置好回调。

javascript

window.JSafterShare = function(state, url) {
    if (state == "success") {
        alert('用户点击了分享按钮')
    }
}

判断是否为 APP 环境

function isApp() {
    if (typeof window.JSBinder != 'undefined') {
        return true;
    }
    return false;
}

if(isApp()){
    //app 环境
}

获取客户端用户信息

从 APP

==H5 活动地址请不要使用 https ，否则会因为跨域问题无法调取接口==

html

<script src="http://images.infzm.com/js/app/client_h5.min.js"></script>

<!--<script src="https://www.infzm.com/app/client_h5.min.js"></script>-->

==先判断是否在 App 中，否则 _appInit 函数里的代码不会执行==

javascript

_appInit(function(userinfo, l) {

    var isLogin       = !isNaN(parseInt(userinfo.userid)) //判断是否登陆
    var userid        = null;
    var userName      = userinfo.nickname       //昵称
    var userAvatarUrl = getUserAvatar(userinfo.userid) //获取用户头像地址
    var isVip         = false;

    if (!isLogin) {               //未登录，UI 提示
        JSBinder.gotoLogin()      //调出登录界面
    } else {
        userid = userinfo.userid  //获取 user id
        $.getJSON(                //通过获取用户信息（头像、是否付费、手机号）
            'http://api.infzm.com/wap/get_user_info', {
                user_id: userinfo.userid,
                token  : userinfo.token
            },
            function(data) {
                userName = data.data.username         //昵称
                isVip    = data.data.member_type > 2; //是否为付费会员
            })
    }
})

数据结构

不建议直接读取 userinfo ，因为各版本 APP 存在差异，_appInit 中返回的 userinfo

//_appInit() 初始化
_appInit(function (userinfo, l) {

    console.log(userinfo)
    //night_mode: false
    //token     : 39b7f632e526b7bbdb06bdf8abeb310a
    //version   : 5.3.0
    //hash      : 2bc8e19f6df74c4bc8fc76c4402ac271
    //user:
    //format    : json
    //platform  : android
    //userid    : 2276555
  
})

从服务器

_appInit(function(userinfo, l) {
$.getJSON(          
    'http://api.infzm.com/wap/get_user_info', {
        user_id: userinfo.userid,
        token  : userinfo.token
    },
    function(data) {
        console.log(data);
    })
})

数据结构

API /get_user_info 返回的数据结构

json

{
    "code": 200,
    "data": {
        "id"         : 2276555,
        "phone"      : "15015030288",
        "username"   : "Mather",
        "member_type": 3,                 // 大于 2 为付费会员
        "expire_time": "2020-03-01 00:00:00",
        "headimgurl" : "http://images.infzm.com/users/2277/u2276555.jpg"
    },
    "msg": "success"
}

用户头像

javascript

var getUserAvatar = function (userid) { //必须知道用户id
  var a = Math.ceil(userid / 1000)
  return 'http://images.infzm.com/users/' + a + '/u' + userid + '.jpg'
}

getUserAvatar('2276555'); //http://images.infzm.com/users/2277/u2276555.jpg

唤醒打开 APP 指定页面

南周应用外，微信中通过链接方式打开 APP 某个页面。

里有别于 APP 内浏览器的用法，要在内部浏览器中打开对应页面请参考调起原生页面

需要到 linkme 后台创建对应的深度链接，参考文档

列出一些可用的链接：

手机上打开	备注
https://lkme.cc/iHD/4spBYAy0L	首页（推荐）
https://lkme.cc/iHD/ajyhqrx0L	频道页（观点）
https://lkme.cc/iHD/Wn7RIox0L	频道页（新闻）
https://lkme.cc/iHD/uNO5sVx0L	影像
https://lkme.cc/iHD/iNCsHYx0L	南周严选
https://lkme.cc/iHD/mzxAGex0L	活动广场
https://lkme.cc/iHD/66I51bx0L	我的页面
https://lkme.cc/iHD/0YkezIp4M	订阅会员页（开通会员页）
https://lkme.cc/iHD/guaV9DyAM	意见反馈
https://lkme.cc/iHD/CTtWsCyAM	投稿爆料
https://lkme.cc/iHD/wIwvzEy0L	H5（读南周领免费流量活动）
https://lkme.cc/iHD/mafX8AogL	电子报（琐事 - 论晒娃 1815 期）
https://lkme.cc/iHD/eJuA2SBWL	普通文章（致用户书）
https://lkme.cc/iHD/qL8DtpiVL	付费课程（《故宫 · 皇帝的一天》）

夜间模式

window.nightModeFlag = null;
window.toggleNightMode = function(enable,rgba){

      if(enable=="enable"){
        if(typeof rgba == "string" && rgba != ""){
          $("body").removeClass().css({background: 'rgba('+rgba+')'});
        }else{
          $("body").removeClass().addClass("night_mode_222").css({background: ''});
        }
        nightModeFlag = true;
      }else{
          $("body").removeClass().addClass("night_mode_fff").css({background: ''});
        nightModeFlag = false;
      }
      
}

H5 SDK 1.x ​

页面配置 ​

检查App 推送（通知）是否开启 ​

使用范例 ​

pushPermission ​

沉浸式导航 ​

SetNavigationStyleCustom ​

SetNavigationStyleDefault ​

调起分享面板 ​

使用范例 ​

分享图片 ​

使用范例 ​

定义全局 getBase64Content 函数 ​

onBase64ContentCreated ​

APP 实现细节 ​

获取客户端详情 ​

平台 ​

版本号 ​

调起原生页面 ​

若干页面 ​

文章页面 ​

登录页面 ​

分享信息设置 ​

分享回调函数 ​

判断是否为 APP 环境 ​

获取客户端用户信息 ​

从 APP ​

数据结构 ​

从服务器 ​

数据结构 ​

用户头像 ​

唤醒打开 APP 指定页面 ​

夜间模式 ​

H5 SDK 1.x

页面配置

检查App 推送（通知）是否开启

使用范例

pushPermission

沉浸式导航

SetNavigationStyleCustom

SetNavigationStyleDefault

调起分享面板

使用范例

分享图片

使用范例

定义全局 getBase64Content 函数

onBase64ContentCreated

APP 实现细节

获取客户端详情

平台

版本号

调起原生页面

若干页面

文章页面

登录页面

分享信息设置

分享回调函数

判断是否为 APP 环境

获取客户端用户信息

从 APP

数据结构

从服务器

数据结构

用户头像

唤醒打开 APP 指定页面

夜间模式