使用および小手順バーコードプラグインwxbarcodeの改善

はじめに：

バーコードプラグインアプレット小型のため、現在、あまりにもこの1の最初の上にある、時間制限、この1つは働きました。

プラグインプロセスの使用も多くの問題を見つけましたが、こちらも次に何をまとめたいくつかの改善を、作られた、私は次のような問題のヘルプが発生した他の小さなパートナーを与えることを願っています。

プラグ住所：

公式の推奨使用方法：

方法1 - NPMインストール：

 NPM wxbarcodeをインストール

'wxbarcode'からインポートwxbarcode
 // 条形码 
wxbarcode.barcode（ 'バーコード'、 '1234567890123456789'、680、200 ）。
// 二维码 
wxbarcode.qrcode（ 'QRコード'、 '1234567890123456789'、420、420）。

幸いアリペイアプレットサポートNPMので、この用法、少し問題を有するマイクロチャネル小さなプログラム。直接プラグインスクリプトを分離することが可能です。

方法2 - ダイレクトプラグイン飲料スクリプト：

コール：

VaRの wxbarcode =必要（」../../ utilsの/ index.js' ）; 
ページ（{ 
  のonLoad：関数（）{ 
    wxbarcode.barcode（ 'バーコード'、 '1234567890123456789'、680、200 ）; 
    wxbarcode.qrcode（ 'QRコード'、 '1234567890123456789'、420、420 ）; 
  } 
}）

バーコードのプラグインを個別に呼び出し：

すでに既存のプロジェクトプラグ次元コード、バーコードの必要性だけでプラグインを持っている場合は、次のように、別のプラグインのようなバーコードを使用することができます。

utilsの/ index.js

// 调用封装脚本改造
VARバーコード=（ './バーコードを'必要）。

関数convert_length（長さ）{
     リターン恐らくMath.round（wx.getSystemInfoSync（）windowWidth *長さ/ 750 ）; 
} 

関数BARC（ID、コード、幅、高さ）{ 
    barcode.code128（wx.createCanvasContext（ID）コード、convert_length（幅）、convert_length（高さ））
} 
エクスポート関数BARC（ID、コード、幅、高さ）{ 
  barcode.code128（wx.createCanvasContext（ID）コード、convert_length（幅）、convert_length（高さ））
}

page.js

// 方法调用
インポート{ 
  BARC 
から}」../../utils/index.js' 
ページ（{ 
  データ：{}、
  のonLoad：関数（）{ 
    BARC（ 'バーコード'、 '1234567890123456789'、680、200 ） ; 
  } 
}）

バーコードの例を複数生成します。

page.wxml

<！ - 多个条形码生成- > 
< ビュークラス= "バーコード" WXのための：= "{{コード}}" > 
  < ビュークラス= "バーナム" > {{アイテム}} </ ビュー> 
  < キャンバスキャンバス-id = "バーコード{{索引}}"  /> 
</ ビュー>

utilsの/ index.js

// 调用封装脚本改造
VARバーコード=（ './バーコードを'必要）。

関数convert_length（長さ）{
     リターン恐らくMath.round（wx.getSystemInfoSync（）windowWidth *長さ/ 750 ）; 
} 

関数BARC（ID、コード、幅、高さ）{ 
    barcode.code128（wx.createCanvasContext（ID）コード、convert_length（幅）、convert_length（高さ））
} 
エクスポート関数BARC（ID、コード、幅、高さ）{ 
  barcode.code128（wx.createCanvasContext（ID）コード、convert_length（幅）、convert_length（高さ））
}

page.wxml

// 方法调用
インポート{ 
  BARC 
から}」../../utils/index.js' 
ページ（{ 
  {：データ
    コード：[ '11111111'、 '22222222'、 '33333333' ] 
  } 
  のonLoad：関数（） {
     VARのコードは= この.data.code
     ため（VAR I にコード）{ 
      BARC（ 'バーコード' + I、コード[I]、680、200 ）; 
    } 
  } 
}）

コンポーネントパッケージ：

バーコードは、ページテンプレートの複数で発生する必要がある場合、それは好ましくは成分にカプセル化されます。

アリペイアプレット、パッケージ組立ノーマル。

具体的なコードは次のよう：

バーコード/ index.axml

< ビュークラス= "バーコード" > 
  < キャンバスID = "バーコード{{索引}}" /> 
  < ビュークラス= "couponNumber" > {{couponNumber}} </ ビュー> 
</ ビュー>

バーコード/ index.js

「./barcode」からバーコードをインポートします。
成分（{ 
  ミックスイン：[]、
  データ：{}、
  小道具：{ 
    couponNumber：[文字列] || '' 、
    インデックス：[番号] || 0 
  }、
  didMount（）{ 
    この .barc（ "バーコード" + 本。 props.index、この .props.couponNumber、この .convert_length（960）、この .convert_length（440 ））; 
  }、
  メソッド：{ 
    convert_length（長さ）{ 
      返す恐らくMath.round（my.getSystemInfoSyncを（）windowWidth *長さ/。 750 ）; 
    } 
    BARC（ID、コード、幅、高さ）{
      barcode.code128（my.createCanvasContext（ID）コード、この .convert_length（幅）、この.convert_length（高さ））
    } 
  } 
}）。

page.wxml

< バーコードのクラス= "IBLOCK" 値= "{{item.couponNumber}}" 幅= "540" />

合成Alipayのコンポーネントにバーコードコンポーネントにアプレットとして問題ではありません。

マイクロチャネルアプレットではないが、小さなマイクロチャネル・プログラムこのようにバーコードが表示されていない、それはそれについてマイクロ文字のアプレットのためのいくつかのメカニズムで、時間が限られていると推定されている。しかし、綿密な調査を行いません。

それはコンポーネントにカプセル化する必要がある場合は、バーコードが適切に発揮させることができるので、プラグインのキャンバススロットスロットによってアセンブリページには、レンダリングすることをカプセル化するベストな方法を取ることができます。

特定には、以下を達成します。

バーコード/ index.wxml

 < ビュークラス= 'バー' > 
  < スロット名= "content2" bindlongpress = "saveImg" データ・インデックス= "{{索引}}" > </ スロット> 
  < ビュークラス= "couponNumber" > {{couponNumber}} < / ビュー> 
</ ビュー>

バーコード/ index.js

// index.jsコンポーネント/バーコード/ 
「./barcode」からインポートバーコード; 
成分（{ 
  / * * 
   属性リスト*コンポーネント
   * / 
  オプション：{ 
    multipleSlots：trueに // コンポーネント定義マルチスロットサポートオプションを有効にします
  }、
  プロパティ：{ 
    couponNumber：文字列、
    インデックス：ナンバー
  }、
  添付：関数（）{
     のsetTimeout（（） => {
       この .barc（ "バーコード" + この .data.index、この .data.couponNumber、この .convert_length （960）、この .convert_length（440。））。
    }、 500 ） 
  } 
  / * * 
   *組立方法のリスト
   * / 
  方法：{ 
    convert_length（長さ）{ 
      リターン。恐らくMath.round（wx.getSystemInfoSync（）windowWidth長さ* / 750）; 
    }、
    BARC（ID、コード、幅、高さ）{ 
      barcode.code128（wx.createCanvasContext（ID）コード、この .convert_length（幅）、この.convert_length（高さ））
    }、
    saveImg：関数（）{
       // 取得キャンバス画像一時アドレス
      WX .canvasToTempFilePath（{ 
        canvasId： 'バーコード' +この .data.index、
        成功：関数（データ）{
           // 保存图片
          wx.showActionSheet（{ 
            itemListの：[ '保存图片' ]、
            成功：関数（RES）{ 
              にconsole.log（res.tapIndex）
              場合（res.tapIndex == 0 ）{ 
                wx.saveImageToPhotosAlbum（{ 
                  filePathに：data.tempFilePath、
                  完全な（E）{ 
                    にconsole.log（E）
                  } 
                }）
              } 
            } 
          }）
        } 
      }）
    } 
  }
}）

注意：

500ミリ秒の1バーコード論理合成処理遅延 - Huaweiの一部モデルの問題を解決するためのバーコードを表示しません

2.押して、達成するために、画像を保持する-プラグイン自体はで最初にここに達成されない wx.canvasToTempFilePath 絵で一時アドレスキャンバスを取得し、その後、呼び出し wx.saveImageToPhotosAlbumを保存します。もちろん、小さなパートナーの関心は、直接接続するように変更することができます。

保存画像の宝物の3支払いは、フォローアップ調査に時間を持って、プロセスを作ることなく、画像の保存アリペイ小さなプログラムので、一時的に、画像のbase64形式をサポートしていないAPIを提供するアプレット

注意事項：

一定の割合の構成によれば、バーコードの長さと幅を指定するか、または不完全なバーコードショーのうちの形成につながる可能性があり、誤ったスキャンコードの認識結果が表示されます。

使用および小手順バーコードプラグインwxbarcodeの改善

おすすめ