JMLink Web SDK 集成指南
最近更新:2021-12-15
展开全部

JMLink Web SDK 集成指南

使用提示

本文是 JMLink Web SDK 标准的集成指南文档。

  • 极光推送文档网站上,有相关的所有指南、API、教程等全部的文档。包括本文档的更新版本,都会及时地发布到该网站上。

产品说明

根据您在 Portal 端配置的应用信息,通过整合唤起应用方式,JMLink 将在不同设备和不同浏览器下尝试最佳唤起应用方式。

创建应用

创建极光开发者帐号

请访问极光官方网站 注册您的极光账号。

Portal 上创建应用

使用注册账号登陆,进入极光控制台后,点击“创建应用”按钮,进入创建应用的界面。填上你的应用程序的名称就可以了,最后点击最下方的 “创建我的应用”按钮,创建应用完毕。

jpush_guide

配置应用信息

创建应用之后返回用户主页面可以看到应用清单,点选你刚才创建的应用来查看应用信息。并配置 JMLink 必要参数。

jpush_guide

短连接

后台配置完 JMLink 必要参数,您将获得类似 https://a.jmlk.co/ABCD 的短连接,其中 ABCD 为短链接后缀码。

SDK 接入

<script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>
          <script src="https://static.jmlk.co/scripts/dist/jmlink.min.js"></script>

        
此代码块在浮窗中显示

引入该 JS 后,就可以使用 Window 上的全局对象 JMLink

Tips: 请直接使用此链接, 不要将此文件下载到您项目中, 否则, 我们在更新数据结构或 API 接口后有可能会导致功能失效。
          Tips:

请直接使用此链接, 不要将此文件下载到您项目中, 否则, 我们在更新数据结构或 API 接口后有可能会导致功能失效。

        
此代码块在浮窗中显示

SDK 初始化

在 HTML 页面中准备一个或多个用于打开 APP 的 a 元素

一般开发者会使用 CSS 样式重置这个链接的外观,使其看起来像一个按钮,建议使用“打开 APP”、“在 APP 中购买”、“在 APP 中阅读”等对用户有实际引导意义的文案,请尽量避免使用“下载 APP”,在以往的用户使用习惯中我们发现使用“下载 APP”的链接对比使用“打开 APP”的链接的点击率会低好几倍;

<a id="btnOpenApp">打开APP</a>
          <a id="btnOpenApp">打开APP</a>

        
此代码块在浮窗中显示

单个 a 标签初始化

new JMLink({ jmlink:'https://arguys.jmlk.co/AAlq',// 短链地址 button:document.querySelector('a#btnOpenApp') });
          new JMLink({
    jmlink:'https://arguys.jmlk.co/AAlq',// 短链地址
    button:document.querySelector('a#btnOpenApp')
});

        
此代码块在浮窗中显示

** 特别提示 **

在短链接拼接参数,若 URL 中包含特殊字符,需要对其进行 URL 的百分号编码(URL Encoding)

多个 a 标签初始化

var link='https://arguys.jmlk.co/AAlq';// 短链地址 var btn_1=document.querySelector('a#btnOpenApp1'); var btn_2=document.querySelector('a#btnOpenApp2'); var btn_3=document.querySelector('a#btnOpenApp3'); var configs = [ { jmlink: link+'?name=1', button: btn_1 }, { jmlink:link+'?name=2', button: btn_2 }, { jmlink: link+'?name=3', button: btn_3 } ]; new JMLink(configs);
          var link='https://arguys.jmlk.co/AAlq';// 短链地址
var btn_1=document.querySelector('a#btnOpenApp1');
var btn_2=document.querySelector('a#btnOpenApp2');
var btn_3=document.querySelector('a#btnOpenApp3');

var configs = [
    {
        jmlink: link+'?name=1',
        button: btn_1
    }, {
        jmlink:link+'?name=2',
        button: btn_2
    }, {
        jmlink: link+'?name=3',
        button: btn_3
    }
];

new JMLink(configs);

        
此代码块在浮窗中显示

简单集成方式

<a href="https://arguys.jmlk.co/AAlq?a=1&b=2" data-jmlink="true" data-auto="false" data-params="{name: 1}"> 打开app </a>
          <a
    href="https://arguys.jmlk.co/AAlq?a=1&b=2"
    data-jmlink="true"
    data-auto="false"
    data-params="{name: 1}">
    打开app
</a>

        
此代码块在浮窗中显示
  1. data-jmlink: 设置为true 表明是一个魔链html标签。
  2. href: 短链链接
  3. data-auto: autoLaunchApp 具体见 Web SDK API
  4. data-params: 自定义参数params(注意使用规则) 具体见 Web SDK API

更多 API

其他 API 的使用方法请参考接口文档:Web SDK API

技术支持

邮件联系:support@jiguang.cn

文档内容是否对您有帮助?

Copyright 2011-2022, jiguang.cn, All Rights Reserved. 粤ICP备12056275号-13 深圳市和讯华谷信息技术有限公司

在文档中心打开