電子署名を実装するWeChatミニプログラム

電子署名を実装するWeChatミニプログラム

この記事では、WeChatミニプログラムで電子署名を実装するための具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

<view class="sign-contain">
 <view class="signName">
  <canvas id="canvas" canvas-id="canvas" class="{{ sysType === 'iOS' ? 'canvas' : 'canvas bg000'}}" disabled-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasEnd" touchcancel="canvasEnd" binderror="canvasIdErrorCallback"></canvas>
 </ビュー>

 <view class="btn-wrap">
  <button catchtap="cleardraw">署名をクリア</button>
  <button catchtap="uploadImg">署名をアップロード</button>
 </ビュー>
</ビュー>

js:

var context = null; // wx.createContext を使用して描画コンテキストコンテキストを取得します
var isButtonDown = false; // 描画が進行中かどうか var arrx = []; // アクションの水平座標 var arry = []; // アクションの垂直座標 var arrz = []; // 押すことと持ち上げることの組み合わせを示す全体の状態 var canvasw = 0; // キャンバスの幅 var canvash = 0; // キャンバスの高さ Page({
  データ: {
    キャンバスw: ''、
    キャンバス: '',
    画像URL: ''、
    情報: {}、
    符号Base64: ''、
    sysType: '' // モデルを決定する},

  onLoad: 関数 (オプション) {
    それを = これとする
    res = wx.getSystemInfoSync() とします。
    const システム = res.system.split(' ')
    that.setData({
      システムタイプ: システム[0],
    })
    パラメータをJSON.parse(options.params)とします。
    that.setData({
      情報: パラメータ、
    })
    その.startCanvas();
    that.initCanvas()
  },
  /**
  * 下記 - 手書き署名/署名のアップロード*/
  startCanvas(){//Canvas 初期化実行 var that = this;
    //システム情報を取得する wx.getSystemInfo({
      成功: 関数 (res) {
        キャンバス幅 = res.windowWidth;
        キャンバスの高さ = res.windowHeight;
        that.setData({ canvasw: canvasw });
        that.setData({ canvash: canvash });
      }
    });
    キャンバスを初期化します。
    this.cleardraw();
  },

  // 初期化関数 initCanvas() {
    コンテキスト = wx.createCanvasContext('キャンバス');
    コンテキスト.beginPath()
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      コンテキスト.setStrokeStyle('#444');
    } それ以外 {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      コンテキスト.setStrokeStyle('#aaa');
    }
    コンテキスト.setLineWidth(4);
    context.setLineCap('round');
    context.setLineJoin('round');
  },
  キャンバス開始(イベント) {
    isButtonDown = true;
    arrz.push(0);
    arrx.push(イベントが変更されたタッチ[0].x);
    arry.push(event.changedTouches[0].y);
  },
  キャンバス移動(イベント) {
    if (isButtonDown) {
      arrz.push(1);
      arrx.push(イベントが変更されたタッチ[0].x);
      arry.push(event.changedTouches[0].y);
    }
    (var i = 0; i < arrx.length; i++) の場合 {
      (arrz[i] == 0)の場合{
        コンテキストを移動します(arrx[i], arry[i])
      } それ以外 {
        コンテキスト.lineTo(arrx[i], arry[i])
      }
    }
    context.clearRect(0, 0, キャンバスw, キャンバスh);
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      コンテキスト.setStrokeStyle('#444');
    } それ以外 {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      コンテキスト.setStrokeStyle('#aaa');
    }
    コンテキスト.setLineWidth(3);
    context.setLineCap('round');
    context.setLineJoin('round');
    コンテキスト.stroke();
    コンテキストを描画します(false);
  },
  キャンバス終了(イベント) {
    isButtonDown = false;
  },
  // キャンバスをクリアする cleardraw() {
    arx = [];
    配列 = [];
    arz = [];
    コンテキストをクリアする矩形(0, 0, canvasw, canvash);
    if(this.data.sysType === 'iOS') {
      context.fillStyle = 'rgba(255, 255, 255, 1)';
      コンテキスト.setStrokeStyle('#444');
    } それ以外 {
      context.fillStyle = 'rgba(0, 0, 0, 1)';
      コンテキスト.setStrokeStyle('#aaa');
    }
    コンテキストを描画します(true);
  },
  アップロード画像() {
    var that = これ
    //画像を生成// context.draw(true,()=> {
    タイムアウトを設定する(() => {
      wx.canvasToTempFilePath({
        キャンバスID: 'キャンバス',
        //出力画像の幅と高さを設定します。fileType: 'jpg',
        品質: 1,
        成功: 関数 (res) {
          // キャンバス画像アドレス res.tempFilePath
          imgBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePath, 'base64') とします。
          that.setData({
            画像URL: res.tempFilePath,
            符号Base64: imgBase64
          })
          that.submitSign()
          console.log('imgBase64', 'data:image/jpeg;base64,' + imgBase64)
          // wx.saveImageToPhotosAlbum({
          // ファイルパス: res.tempFilePath,
          // 成功(res4) { 
          // console.log(res,'res4 を保存');
          // wx.showToast({
          // タイトル: 'アルバムに正常に保存されました',
          // 期間: 2000
          // } );
          // }
          // })
        },
        失敗: 関数() {
          wx.showModal({
            タイトル: 「ヒント」
            内容: 'Canvas はイメージの生成に失敗しました。 WeChatの現在のバージョンはサポートされていません。最新バージョンに更新してください。 '、
            表示キャンセル: false
          });
        },
        完了: 関数 () { }
      }, 5000)

    })
    // })
  },
  // 署名を送信する submitSign() {
    それを = これとする
    wx.showLoading({
      タイトル: '送信中...'、
      マスク: 真
    })
    タイプ = '1' とします
    if (that.data.sysType === 'iOS') {
      タイプ = '0'
    } それ以外 {
      タイプ = '1'
    }
    wx.$getWxLoginCode(resp => {
      定数パラメータ = {
        qmbase64: that.data.signBase64、
      
      }
      console.info("パラメータ")
      wx.kservice.yyyurl(パラメータ、res => {
        wx.hideLoading()
        (res.statusCode === '200')の場合{
          wx.showModal({
            タイトル: 「ヒント」
            コンテンツ: res.message、
            表示キャンセル: false、
            confirmText: 'ホームページに戻る',
            成功(res) {
              (res.confirm)の場合{
                wx.reLaunch({
                  URL: '/pages/index/index'
                })
              }
            }
          })
        } それ以外 {
          wx.showModal({
            タイトル: 「ヒント」
            コンテンツ: res.message、
            キャンセル表示: true、
            cancelText: 'ホームページに戻る',
            確認テキスト: '再送信',
            成功: (結果) => {
              if (結果.キャンセル) {
                //滞在をキャンセルする wx.reLaunch({
                  URL: '/pages/index/index'
                })
              } そうでない場合 (結果を確認) {
                // that.submitSign() を再送信します
              }
            },
          });
        }
      }, {}, 真, 真)
    })
  },

  /**
  * ライフサイクル機能 - ページのアンインストールを監視する*/
  onUnload: 関数 () {

  },

  /**
   * ページ関連のイベント処理関数 - ユーザーのプルダウンアクションをリッスンする */
  onPullDownRefresh: 関数 () {

  },

  /**
   * ページ上のボトムイベントを処理する関数*/
  onReachBottom: 関数 () {

  },

  /**
   * ユーザーは右上隅をクリックして共有します*/
  onShareAppMessage: 関数 () {

  }
})

CS: ...

.sign-contain {
  ディスプレイ: フレックス;
  flex-direction:列;
  幅: 100%;
  高さ: 100%;
}
.signName {
  フレックス: 1;
}
.キャンバス{
  幅: 100%;
  高さ: 100%;
}
.bg000{
  背景色: #000;
}
.btn-wrap{
  表示: ブロック;
  幅:100%;
  高さ: 100rpx;
  マージン: 20rpx 0;
  位置: 相対的;
}
.btn-wrap ボタン{
  幅: 43%;
}

今とても人気のあるWeChatミニプログラムのチュートリアル「WeChatミニプログラム開発チュートリアル」をお勧めしたいと思います。編集者が丁寧にまとめたものです。気に入っていただければ幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • Uniapp が WeChat アプレットの電子署名効果を実装 (デモ付き)
  • WeChat アプレットに手書き署名を実装するためのサンプル コード
  • WeChatアプレットはシンプルな手書き署名コンポーネントを実装します
  • WeChatアプレットキャンバスが署名機能を実装
  • WeChatミニプログラムが電子署名機能を実装
  • WeChatアプレットは電子署名を実装し、画像をエクスポートします
  • Java が WeChat アプレット「支払い検証署名に失敗しました」問題に遭遇した解決策
  • .NET WeChat アプレットのユーザーデータ署名検証および復号化コード
  • WeChatアプレットが横画面と縦画面の署名機能を実装

<<:  Linux (CentOS7) に Tomcat をインストールし、Tomcat をスタートアップ項目として設定します (tomcat8 を例に挙げます)

>>:  MySQL カウントを向上させる方法のまとめ

推薦する

dockerでマウントされたディレクトリが読み書きできない問題を解決する

次のコマンドを使用してコンテナを作成し、ローカルの /home/dock/Downloads ディレ...

MySQL でタイムゾーンを表示および変更する方法

今日、プログラムが間違った時刻を挿入し、フィールドがデフォルト値 CURRENT_TIMESTAMP...

TinyEditorはシンプルで使いやすいHTML WYSIWYGエディタです

数日前、国産の XHTML エディタを紹介しました。今日は、有名な海外の Web デザイン ブログl...

mysql5.6 の無効な utf8 設定の問題を解決する

mysql5.6 のグリーン バージョンを解凍すると、my-default.ini ファイルが作成さ...

Docker Swarm サービス オーケストレーション コマンドの詳細な説明

1. はじめにDocker には、タスクを構成する複数の Docker コンテナをオーケストレーショ...

ウェブページのFOUC問題によるウェブページの混乱の解決策

FOUC は Flash of Unstyled Content の略で、FOUC と略されます。簡...

MYSQL の binlog 最適化に関する考察の要約

質問質問 1: トランザクションをコミットするときに REDO ログをフラッシュすることによって発生...

JavaScript の async と await のシンプルで詳細な学習

目次1. はじめに2. 詳しい説明2.1、非同期2.1.1. 関数はPromise以外のオブジェクト...

MySQL ベースのストレージエンジンとログの説明 (包括的な説明)

1.1 ストレージエンジンの概要 1.1.1 ファイルシステムストレージファイル システム: オペ...

MySQL インデックス データ構造の詳細な分析

目次概要インデックスデータ構造バイナリツリー赤黒木BツリーB+ツリーハッシュ索引InnoDB インデ...

完全バックアップとポイントインタイムバックアップにmysqldumpを使用する方法

Mysqldump は MySQL の論理バックアップに使用されます。高速ではありませんが、柔軟性が...

Docker Secretの管理と使用の詳細な説明

1. Docker Secretとは1. シナリオ表示MySQL サービスなど、一部のサービスではパ...

知っておくべき JS 配列削減の高度な使い方 25 選

序文Reduce は ES5 で追加された新しい従来の配列メソッドの 1 つです。forEach、f...

MySQL の昇順および降順データソートの実装

データの昇順、降順ソート1. フィールド名による単一フィールドのソート順機能:どのフィールドを基準に...

CSSはフロントエンドの画像変形の問題を完璧に解決します

Toutiao IT School で、CSS がフロントエンドの画像変形の問題を完璧に解決するとい...