Mazey-wechat-launch-app NPM

mazey-wechat-launch-app

生成微信（WeChat/Weixin）跳转 App 所需要的按钮，经过灵活配置，可支持生成单/多个按钮。

Install

使用 NPM 安装 mazey-wechat-launch-app：

npm install mazey-wechat-launch-app --save

Usage

1. 使用 NPM

import LAUNCH_APP from 'mazey-wechat-launch-app';

const options = {
  weixinJsSdkTicket: 'bxLdikRXVb',
  launchContainerQuery: '.example-btn',
  serviceAccountAppId: 'wx123',
  openPlatformMobileAppId: 'wx456',
  extInfo: 'example://example/example',
};
const app = LAUNCH_APP(options);
app.start();

<div class="example-btn><span>打开</span></div> 生成的 HTML 结构如下：

<div class="example-btn mazey-launch-app-tag-0">
  <span>打开</span>
  <wx-open-launch-app
    id="mazey-launch-app-btn-prefix-mazey-launch-app-tag-0"
    appid="wx456"
    extinfo="example://example/example"
    style="z-index: 99; position: absolute; width: 100%; height: 100%; opacity: 1; background: transparent; overflow: hidden; left: 0;"
  >
    <script type="text/wxtag-template">
      <style>.mazey-launch-app-inner-btn { opacity: 0; width: 100%; height: 100%; backgroud: transparent; color: #300f54; border: none; box-sizing: border-box; text-align: center; vertical-align: middle; }</style>
      <button class="mazey-launch-app-inner-btn">Launch App <br /><br /><br /></button>
    </script>
  </wx-open-launch-app>
</div>

注意：本项目依赖 WeChat JS-SDK，请确保已经引入，程序会在初始化的时候探测 window.wx。

2. 使用 CDN

<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="lib/launch-app.min.js"></script>
<script>
  var options = {
    weixinJsSdkTicket: 'bxLdikRXVb',
    launchContainerQuery: '.example-btn',
    serviceAccountAppId: 'wx123',
    openPlatformMobileAppId: 'wx456',
    extInfo: 'example://example/example',
  };
  var app = window.LAUNCH_APP(options);
  app.start();
</script>

提示：如果项目里面已经使用了 jQuery、js-sha1、mazey 依赖库，可以使用体积更小的版本 v2.1.4。

API

参数

参数	说明	类型	值
`weixinJsSdkTicket`	jsapi_ticket 公众号用于调用微信 JS 接口的临时票据	string	（必填）例如：`bxLdikRXVb`
`launchContainerQuery`	selectors 有效的 CSS 选择器字符串，通常是填充按钮的父容器	string	（必填）例如：`.example-btn`, `#example-btn`
`serviceAccountAppId`	公众号的唯一标识 AppId	string	（必填）例如：`wx123`
`openPlatformMobileAppId`	开放平台内所需跳转的移动应用的 AppId	string	（必填）例如：`wx456`
`extInfo`	extinfo 跳转所需额外信息	string	（可选）例如：`example://example/example`
`launchBtnStyle`	按钮内联样式	string	（可选）例如：`top:0;right:0;bottom:0;left:0;`
`launchBtnText`	按钮文字	string	（可选）例如：`打开 App`