Evoke-app NPM | npm.io

H5 唤起 APP | Native 客户端

H5 唤起 APP | Native 客户端

支持 scheme 或 universal link 的方式唤起 App 客户端。

场景

微信分享 h5 页面，需要唤起 app 时。

Installing

Using npm:

npm i evoke-app --save

Using npm:

yarn add evoke-app

Using cdn:

<script src="https://unpkg.com/evoke-app"></script>

Usage

import evoke-app from 'evoke-app'

or

// 如需使用unpkg 浏览器输入 https://unpkg.com/evoke-app 获取最新的打包结果
<script src="https://unpkg.com/evoke-app@0.0.2-7/dist/evoke-app.production.min.js"></script>

请先判断你的环境，仅使用scheme时，微信中需引导用户在浏览器打开，唤起失败可使用callback跳指定下载页等
如果使用了unlink,IOS 微信无需引导至浏览器打开，Android 微信仍需引导。open方法在 IOS 平台微信或浏览器里，可以直接唤起 app，未安装则跳 404 页面（unlink 配置的链接页面），unlink是对scheme唤起的补充，如果发现unlink有 bug 可以只使用scheme唤起

可以只使用scheme唤起，如果配置了universal link的话也可以配置unlink、linkPayload增加支持。

scheme 唤起

不管 IOS 还是 Andriod 都可以使用通用的scheme唤起。

// 唤起微信
var lib = new EvokeApp({ scheme: 'weixin://' })
lib.open()

// 唤起微信 跳转到某个页面 weixin://page1
var lib = new EvokeApp({ scheme: 'weixin://' })
lib.open({
  path: '/page1',
  param: { param1: 1, param2: 2 },
});

// 唤起微信 跳转到某个页面携带参数 weixin://page1?param1=1&param2=2
var lib = new EvokeApp({ scheme: 'weixin://' })
lib.open({
  path: '/page1',
  param: { param1: 1, param2: 2 },
  callback: function(){
    // callback..
  }
});

// 2000ms（默认）内唤起失败callback
var lib = new EvokeApp({ scheme: 'weixin://' })
lib.open({
  callback: function(){
    // callback..
  }
});

scheme & universal link 唤起

对 IOS9 以上使用universal link唤起，IOS9 以下和 Android 使用scheme唤起
需配置unlink,linkPayload传递参数（如果有的话），由于unlink规范可能不一样，所以用户自行拼接linkPayload即可

var lib = new EvokeApp({ scheme: 'weixin://', unlink: 'https://www.xxx.com/xxx' });
lib.open({
    path: '/page',
    param: { param1: 1, param2: 2  }, // 非必需
    linkPayload: '?key1=value1&key2=value2', // 非必需
    callback: function(){
      // callback..
    }
    });

DEMO

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #mask{
        display: none;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, .7);
      }
      #mask p{
        padding-top: 20px;
        padding-right: 15px;
        text-align: right;
        color: white;
      }
    </style>
  </head>
  <body>
    <button id="wx">weixin</button>
    <div id="mask">
      <p>请在浏览器打开</p>
    </div>
    <!-- <script src="./evoke-app.production.min.js"></script> -->
    <script src="https://unpkg.com/evoke-app"></script>
    <script>
      var u = navigator.userAgent;
      var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
      var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
      var isWechat = /micromessenger\/([\d.]+)/i.test(u);

      // 宿主为微信时显示引导层
      var mask = document.getElementById('mask');
      if (isWechat) {
        mask.style.display = 'block';
      }
      var wx = document.getElementById('wx');
      var lib = new EvokeApp({ scheme: 'weixin://' });
      wx.addEventListener(
        'click',
        function () {
          lib.open({
            path: '/page',
            param: { a: 1, b: 2 },
            callback: function () {
              window.location.href="https://sj.qq.com/myapp/detail.htm?apkName=com.tencent.mm"
            },
          });
        },
        false
      );
  
    </script>
  </body>
</html>

Config

// 实例化
var config = {
  scheme: 'weixin://',
  unlink: 'https://www.xxx.com/xxx',
  callback: function(){}
  };
var lib = new EvokeApp(config);

scheme

必需协议，如 weixin://

timeout

非必需唤起超时时间，默认 2000ms，超过 2000ms 即进入callback

unlink

非必需如果需要universal link支持时，如https://www.xxx.com/xxx

Method

open

尝试唤起一个 app

  var lib = new EvokeApp({ scheme: 'weixin://', unlink: 'https://www.xxx.com/xxx' });
  lib.open({
      path: '/page',
      param: { param1: 1, param2: 2  },
      linkPayload: '?key1=value1&key2=value2',
      callback: function(){
        // callback..
      }
      });