调用前需要在页面引用 bridge 的js, 最新地址为
<script src="http://cdnst.immomo.com/momofes/js/mobile/momo_bridge.2.0.4.min.js"></script>
如果需要测试是否在陌陌客户端内,可以用如下功能:
/momoWebView/.test(window.navigator.userAgent)
在页面通过sign获取权限
mm.invoke('initConfig' , {
randomstr: 'keigaojkl3j48afefl32', //随机串
timestamp: 1433391148446, //第三方应用服务器时间
sign: '40B4A72E7ACB468AAF1B65C47CE9875AEB8B7D74',
//签名,第三方应用通过ticket,timestamp,randomstr,url等参数,
//按照签名规则之后的sha1值
client_id: '925ef991ec30ccc0' //第三方应用ID
callback: 'callback.config' //客户端执行完initConfig,调用callback, 是页面上的全局变量。
error: 'mm.configError', //调用其他invoke方法,没有权限时调用
})
@return:
//callback返回
{
status: 0 //状态 0-成功 1-失败
message: '权限验证成功'
}
//error返回
{
name:'doAlipay' //方法名
message: '没有权限'
}
配置
var shareConfig = {
title: '陌陌官网', // 默认标题
text: '总有新奇在身边', // 默认内容详情
url: 'http://www.immomo.com', // 默认链接: 注意需要带上完整的protocal
pic: 'http://chatst.immomo.com/webim/09/01/09016D25-8F82-434D-97C3-BD774F6E1C6A_L.jpg',
// 默认分享图片,注意需要是外网可用的图片链接
callback: '', // 回调函数
apps: ['qzone', 'sina', 'momo_feed', 'momo_contacts', 'browser', 'qq', 'weixin', 'weixin_friend'],
// Array: 页面分享时所需要显示的渠道
configs: { // 页面分享的Apps的配置
// 当分享时,相应渠道优先使用这里的配置。
// 如果没有,则使用默认配置。
momo_feed: { // 留言板单独配置
title:'feed',
text:'留言板',
url:'http://www.immomo.com',
pic:'http://www.immomo.com/static/w5/img/website/header-bg2.jpg', //pic为空或者没有这个字段的话则不显示图片
sdk: 1, // 用户可自定义分享文字
resource:{
title:"陌陌明信片",
desc:"来自陌陌用户的祝福",
icon: 'http://cdnst.momocdn.com/static/m4/img/citycard/share-icon.png', // 小尾巴图标
link: 'http://m.immomo.com/inc/citycard/welcome/entry', // 小尾巴为链接时使用
debug: 1, // 当debug 存在且为1时,此动态不会分享到附近。
}
}
}
}
初始化右上角分享按钮
mm.init({
enable : {
share : 0,
ui_btn: 1
},
share: shareConfig,
ui_btn: {
title: '',
dropdown: 0,
buttons: [{
'text': '分享',
'action': 1,
'param': shareConfig,
}]
}
})
直接调起分享面板
mm.invoke('callShare' , shareConfig)
返回值(从callback里面返回):
{
status: 0, // Int: 0成功,1-失败
message: '分享成功'
}
我们可以用 bridge 提供的 checkGames 方法检查某个App是否安装:
需要先引入bridge,如 cdnst.immomo.com/momofes/js/mobile/momo_bridge.2.0.3.min.js
请下载后放到自己的domain下。
之后用如下代码进行检查
// 在陌陌客户端内且陌陌版本大于6.0
if (mm.is_webview && mm.momo_version >= 6.0 ){
var app_list = {
'xiami': { schema: 'xiami://music' }
};
mm.invoke('checkGames', {games:app_list}, function(resp){
var data = JSON.parse(resp);
// In iOS it's true/false
if (data.games.xiami == 1) {
alert('虾米已经安装')
} else {
alert('虾米没有安装')
// 下载虾米
if (mm.is_android) {
location.href = 'http://download.taobaocdn.com/wireless/xiami-android-spark/latest/xiami-android-spark_10001593.apk'
} else if ( mm.is_ios ){
location.href = 'https://itunes.apple.com/cn/app/xia-mi-yin-le/id595594905?mt=8'
} else {
location.href = 'http://xiami.com'
}
}
})
} else {
alert('请下载最新陌陌客户端')
location.href = 'http://immomo.com'
}
如果需要在页面上调用图片, 则需要调用一个bridge方法readImage
callback里面会获得图片的base64编码的data,页面获得后,可以直接显示,以及传给服务器进行保存。
@param
{
id: id, // id 是会回传到callback的id
method: method, // method 可以是 0、1、2 ,分别指相册,拍摄,用户选择
type: type, // type是会回传到callback的type
callback: 'CallBack'
}
<script src="http://cdnst.immomo.com/momofes/js/mobile/momo_bridge.2.0.4.min.js"></script>
<div>
<a href="#" id='image_btn'>Read Image</a>
<img src="" alt="" id='image'>
</div>
<script>
image_btn.addEventListener('click', function(e){
mm.invoke('readImage', {"id":'image', "method": 0, "type": "base64"},
function(id, data, size, type){
document.getElementById(id).src="data:image/jpeg;base64,"+data;
}
)
});
</script>
@return:
{
network_type:'3g' // String: 网络类型
// android: 2g,3g,4g,wifi,none,unknow
// ios: 2g,3g,4g,wifi,none,unknow (>=v6.3c)
// ios: wwan,wifi,none,unknow (<v6.3c)
}