ホッチキス契約リンク生成

適切なアプリケーションを構築する過程で、次のような問題が発生する可能性があります。

• リンクのクールなアプリケーションを設定するときに記入したカスタムリンクは、ブラウザにジャンプするのではなく、クリックしてホッチキス側で開くことができます
• 適切に構築されたアプリケーションは、デフォルトでホッチキス作業台から開かれ、ページに配置されたカスタムリンクもクリックしてホッチキス側で開かれたい

前提条件

このチュートリアルでは、サードパーティのテキストコピープラグインを使用しています。最初に理解できますClipboard.js詳細は参考にしてくださいClipboard.js。

効果を実現する

実装手順

カスタムページの作成

カスタムページを作成します。詳細はこちらカスタムページ。

キャンバス領域で次のコンポーネントをドラッグします。

• 複数行の入力ボックス: 変換するリンクの名前を付けます
• 入力ボックス: Pcサイドバー & pcスタンドアロンウィンドウタイトルと命名
• デジタル入力ボックス: Pc独立ウィンドウ幅という名前
• デジタル入力ボックス: Pc独立ウィンドウの高さという名前を付けます
• 入力ボックス: Pcサイドバーという名前
• 入力ボックス: Pcワークベンチという名前
• 入力ボックス: Pc独立ウィンドウという名前を付けます

サードパーティのテキストコピープラグインの導入

左側のリボンのアクションパネルで、導入Clipboard.js。

// 当页面渲染完毕后马上调用下面的函数，这个函数是在当前页面 - 设置 - 生命周期 - 页面加载完成时中被关联的。
export function didMount() {
  // 初始化复制
  this.utils.loadScript("https://g.alicdn.com/code/lib/clipboard.js/2.0.11/clipboard.min.js")
    .then(() => {
      const clipboard = new ClipboardJS('.btn');
      clipboard.on('success', () => {
        this.utils.toast({
          title: `已复制到粘贴板`,
          type: 'success'
        });
      });
    })
}

ツール関数の追加

左側のリボンのアクションパネルに、次の関数を追加します。

// 判断 url 是否有查询参数
export function hasSearchParams(url) {
  try {
    const urlObj = new URL(url);
    return urlObj.searchParams.entries().next().done === false;
  } catch (e) {
    return false;
  }
}

/**
* 组件校验
* 仅校验组件状态为普通的组件
* @param fieldList {Array} 需要校验组件的唯一标识数组
*/
export async function fieldsValidate(fieldList = []) {
  const result = [];
  for (let i = 0; i < fieldList.length; i++) {
    if (this.$(fieldList[i]).getBehavior() === 'NORMAL') {
      await this.$(fieldList[i]).validate((errors, values) => {
        if (!errors) { return };
        result.push({
          fieldId: fieldList[i], // 组件标识
          errors: this.utils.isMobile() ? errors.errors[fieldList[i]].errors : errors[fieldList[i]].errors, // 校验错误信息
        });
      });
    }
  };
  return result;
}

ページ機能の設定

「変換待ちリンク」コンポーネントにイベントをバインドします。

コンポーネントの一意のidを変更することに注意してください。

export function onChange({ value }) {
  if (!value) {
    this.$('textField_lahvtneg').reset();
    this.$('textField_lahvtneh').reset();
    this.$('textField_lahvtnei').reset();
  };
}

「生成」ボタンコンポーネントにイベントをバインドします。

コンポーネントの一意のidを変更することに注意してください。

// 链接生成
export function onCreateLink() {
  const fieldList = [
    'textareaField_m0m4evi9',
    'numberField_lahvtnej',
    'numberField_lahvtneo',
  ];
  this.fieldsValidate(fieldList).then((errorList) => {
    setTimeout(() => {
      if (errorList.length > 0) {
        // 表单校验未通过，可做一些数据错误提示
        console.log(errorList);
        return;
      };
      // 表单校验通过，你的后续业务逻辑由此往下写
      const link = this.$('textareaField_m0m4evi9').getValue();
      const width = this.$('numberField_lahvtnej').getValue();
      const height = this.$('numberField_lahvtneo').getValue();
      const title = this.$('textField_m0m4evhz').getValue();
      const hasSearchParams = this.hasSearchParams(link);
      this.$('textField_lahvtneg').setValue(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(link)}&pc_slide=true&title=${encodeURIComponent(title)}`);
      this.$('textField_lahvtneh').setValue(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(link + `${hasSearchParams ? '&' : '?'}ddtab=true`)}`);
      this.$('textField_lahvtnei').setValue(`dingtalk://dingtalkclient/page/link?url=${encodeURIComponent(link)}&popup_wnd=true&height=${height}&width=${width}&title=${encodeURIComponent(title)}`);
    });
  }, 0);
}

【Pcサイドバー】、【pcワークベンチ】、【pc独立ウィンドウ】コンポーネントにカスタムレンダリング読み取り専用状態を設定し、3つのコンポーネントが同じイベントをバインドします。

export function renderView(value, props) {
  return (
    <div>
      {
        value ?
          <span className="btn" data-clipboard-text={value}>
            <i className="next-icon next-icon-copy next-medium vc-icon" style={{ "float": "right", "fontSize": "10px", "padding": "4px", "verticalAlign": "top", "cursor": "pointer" }}></i>
          </span> :
          <div></div>
      }
      {value || '生成后可查看'}
    </div>
  );
}

保存ページ

オンラインで試遊する