電子署名を実装する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 カウントを向上させる方法のまとめ

推薦する

コード例を通してページ置換アルゴリズムの原理を理解する

ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...

マークアップ言語 - リスト

標準化されたデザインソリューション - マークアップ言語とスタイルマニュアルWeb 標準ソリューショ...

ウェブデザインにおける2種類のタブアプリケーション

現在、Web デザインではタブが広く使用されていますが、一般的に次の 2 つのタイプに分けられます。...

HTMLファイルで外部CSSファイルを導入する場合のパスの書き方について簡単にまとめます

1. 外部CSSファイルの基本スタイルをインポートする<link> タグを使用して外部ス...

Golang を使って Docker API を実際に操作する

目次SDKのインストールローカル Docker の管理コンテナの実行バックグラウンドでコンテナを実行...

VueにExcelテーブルプラグインを導入する方法

この記事では、Excelテーブルプラグインを導入するVueの具体的なコードを参考までに共有します。具...

@font-face を使用して Web ページに特殊文字を実装する (カスタム フォントを作成する)

数日前、CSS を使用して三角形の矢印を実装する方法について記事を書きました。 目的の効果は達成され...

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

SSHトンネルを使用してMySQLサーバーに接続する方法

序文場合によっては、データベースのイントラネット アドレスしか知らず、イントラネット経由で接続できな...

HTML ハイパーリンクの詳細な説明

ハイパーリンクハイパーリンクは、Web サイト上のすべてのページがハイパーリンクで接続され、ページ間...

LinuxでJenkinsのパスワードを忘れる方法

1.Jenkinsのインストール手順: https://www.jb51.net/article/1...

Linux Cron によるパラメータ付き PHP コードのスケジュール実行

1. 引き続き PHP スクリプトを使用して実行します。コマンドラインに入力: php /home/...

MySQL で遅い SQL 文を見つける方法

MySQL で遅い SQL ステートメントを見つけるにはどうすればよいでしょうか?これは、多くの人を...

JavaScript のデシェイクとスロットリングの例

目次安定スロットル: 手ぶれ防止: 一定時間内に最後のタスクのみを実行します。スロットル: 一定期間...

JavaScript Canvas で三目並べゲームを実装

この記事では、JavaScript Canvasで三目並べゲームを実装するための具体的なコードを参考...