smart-link

教育业务能力项目smartlink分享组件

Usage no npm install needed!

<script type="module">
  import smartLink from 'https://cdn.skypack.dev/smart-link';
</script>

README

smart-link 二维码分享组件


smart-link 二维码分享组件

何时使用

  • 需要分享内容, 并智能适配当前使用设备的时候

浏览器支持

ie9+

安装

npm install smart-link --save
<script src="[静态站host]/auxo/component/js-smart-link/smart-link.js" ></script>

运行

# 默认开启服务器,地址为 :http://localhost:8000/

# 能在ie9+下浏览本站,修改代码后自动重新构建,且能在ie10+运行热更新,页面会自动刷新
npm run start

# 构建生产环境静态文件,用于发布文档
npm run site

代码演示

基本

基本用法。

import SmartLink from 'smart-link'
class App extends React.Component {
  componentDidMount () {
    const smartlinkInstance = new SmartLink('#container-1', {
      sdpAppId: '3360407a-6f91-4aaa-a6b7-dd7fc58e29d6',
      producerCode: 'train',
      qrcodeOptions: {
        width: 200
      },
      linkQuery: [
        {
          key: 'trainId',
          value: '4061afd7-646e-43c5-afc1-527630ad3c1c'
        }
      ],
      env: 'test', // 可不传,不传默认为test环境
      failCallback: function() {
        // do something
      },
      success: function() {
        // do something
      }
    })
    smartlinkInstance.getLinks().then(function(res) {
      console.log(res)
    })
  }
  render() {
    return (
      <div id="container-1"></div>
    );
  }
}

ReactDOM.render(<App />, mountNode);

API

new SmartLink(selector, options)
参数 说明 类型 默认值
options 配置参数 SmartLink.options { qrcodeOptions: { width: 160 } }
selector css选择器

options

配置参数如下

参数 说明 类型 默认值 是否必传
sdpAppId 产品id
producerCode 生产者Code
env 当前环境, 可取值test/preproduction/production/hk/awsca
linkQuery 将会替换inner_link中的占位符,[{ key: '', value: ''}]
qrcodeOptions 二维码样式配置, 目前支持width配置 { width: 160 }
failCallback 创建失败回调
success 创建成功回调

方法

方法 说明 返回值
getLinks 获取smartlink地址对象, 包含长连接和短链接 promise promise

编译和部署

在公网npmjs建立账号,由管理员添加到开发者。

npm run dist

修改.npmrc,确保能连接到公网npmjs,登录公网npm

npm login

npm version patch

npm public