写点什么

MobTech MobLink Web 端快速集成指南

  • 2022 年 8 月 25 日
    上海
  • 本文字数:1734 字

    阅读完需:约 6 分钟

Web 快速集成

1、在开发者后台找到 MobLink 的 页面配置 栏,在 浮层配置 选项卡中,参考下图所示步骤来个性化你的 App:



2、浮层配置完成后切换到 引用 JS 文件 选项卡,直接点击 复制 按钮,如下图所示:



3、随后直接在你的网页源码的适当位置粘贴前面复制的 JS 代码,再根据你的需求做响应修改。代码及相关注释示例如下:

<script type="text/javascript" src="//1e.t4m.cn/applink.js"></script>/** MobLink 支持数组=>MobLink([...]) 和对象=>MobLink({...}) 两种初始化形式* 页面上有多个元素需要跳转时使用数组方式,仅单个元素需要跳转时可以使用对象的方式进行初始化* el: 表示网页上Element的id值,该字段为空或者不写,则表示MobLink **默认浮层** 上的打开按钮(注意:该字段支持selector方式: 1.'.class' 2.'#id1' 3.['#id1','#id2'])* path: 对应App里需要恢复页面的路径* default: 指定分享页默认场景参数(最多只能指定一项作为默认场景参数)* params: 网页需要带给客户端的参数* loadDataType: 配置是否加loading,配置代表加入loading,不配置则没有loading动效(eg:loadDataType:'1')*/// 页面上仅单个元素需要跳转时可以使用对象方式进行初始化MobLink({  el: '',  path: 'demo/a',  default: true,loadDataType:'1',//配置是否加loading,配置代表加入loading,不配置则没有loading动画  params: {      key1: 'value1',      key2: 'value2',  } });
// 页面上有多个元素需要跳转时要使用数组方式进行初始化MobLink([ { el: '', path: 'demo/a', params: { key1: 'value1', key2: 'value2', } }, { el: '#openAppBtn1', path: 'demo/b', params: { key1: 'value1', key2: 'value2', } }, { el: '#openAppBtn2', path: 'demo/c', params: { key1: 'value1', key2: 'value2', } } ]);</script>
复制代码

多渠道下载配置(可选)

当你的 app 包需要分发在多个不同的平台或者渠道托管的时候,如果你希望不同的活动页面引导用户去不同的渠道下载,那么此时可以使用 MobLink 提供的多渠道下载功能,具体使用步骤如下:

1、开发者后台配置下载渠道打开最新的开发者后台,在 MobLink 的基础配置页面下方有一个 渠道配置 模块,如下图:



点击该模块右上方的 添加多渠道下载地址 按钮即可添加下载地址,如下图:



准确填写好信息之后点击 确定 即可。

2、获取渠道标识经过上面的配置之后即会在 多渠道下载地址 模块中生成一个下载地址记录,其中有一个 MobLink 自动为你生成的下载渠道标识,如下图:



复制该渠道标识,到下一步中使用。

3、在 MobLink JS 中配置渠道在页面的 js 中通过指定字段(iOS:moblink_source_ios 安卓:moblink_source_android)配置下载渠道,示例代码如下:

<script type="text/javascript" src="//1p.t4m.cn/applink.js"></script>/** MobLink 支持数组=>MobLink([...]) 和对象=>MobLink({...}) 两种初始化形式* 页面上有多个元素需要跳转时使用数组方式,仅单个元素需要跳转时可以使用对象的方式进行初始化* el: 表示网页上Element的id值,该字段为空或者不写,则表示MobLink **默认浮层** 上的打开按钮(注意:该字段支持selector方式: 1.'.class' 2.'#id1' 3.['#id1','#id2'])* path: 对应App里需要恢复页面的路径* params: 网页需要带给客户端的参数*/// 页面上仅单个元素需要跳转时可以使用对象方式进行初始化MobLink({    el: '',    path: 'demo/a',    moblink_source_ios: '5e006d8affa42d7657c3f8f8',       //iOS下载渠道配置字段    moblink_source_android: '5e006d9aaedf41217607edd3',   //安卓下载渠道配置字段    params: {        key1: 'value1',        key2: 'value2',    }})
复制代码

4、iOS 客户端需要做的操作(需要在项目默认的 plist 文件里添加上指定字段:MobLink_Channel,并配置上值,值就是后台生成的渠道标识,复制渠道标识使用),如下图:



自定义浏览器引导页(可选)



iOS 端这里修改的是微信里跳转的界面,当 app 没有安装的时候,在微信里点击分享的链接,会先跳转到一个引导页,修改的是这里的,如下图:



用户头像

还未添加个人签名 2019.05.08 加入

还未添加个人简介

评论

发布
暂无评论
MobTech MobLink Web端快速集成指南_JavaScript_MobTech袤博科技_InfoQ写作社区