小さなマイクロチャネルアプリケーション開発 - 二次元コードを生成するために、サードパーティのプラグインの使用

需要シナリオ：

アプレット指定されたページは、リストデータに基づいて、より多くの二次元コードを生成する必要があります。

実装：

複数の二次元コードを生成する必要性を考慮して、二次元コード生成機能はうまくページリストループに直接呼び出さ、アセンブリ内に封入することができます。ページが表示された二次元コンテンツのコンポーネントを一緒にバインドするコードを記述する必要性と呼び出されたときにも、アセンブリにスロットを追加することができます。

技術的な問題：

プラグは唯一、自分の現実を見つけることができるようにマイクロチャネルアプレットは、公式の2次元コード生成の魔法抵抗力を提供していません。オンラインプラグイン、大部分のためにそれはqrcode.js改善に基づいています。

プラグインの選択は、選択された初めて、非常によくないですweapp-QRコードこのプラグインを、独自に開発したテストは良いです、同僚Huawei社のV10に、2本のページの間に（断続的な問題が存在します表示されません。時々）、二次元コードを表示しないスイッチは、この問題は、Gitの問題に提起されてきた、と著者はバグをマーク。

バックと検索別のプラグweapp-QRコード-Base64では、広範なテストの後、このプラグインは、通常使用することができるが、この関数は、小さなプログラムフラグメントを実行しなければならない参照：小さなプログラムは、2次元コード部品を生成します。

コンポーネントのコード：

コンポーネント/ QRコード/ index.js

// コンポーネント/ myComponent.jsの 
CONSTザは、QR =（」./ weapp-qrcode.js'が必要）
CONST rpx2px = wx.getSystemInfoSync（）windowWidth / 750 
ザ・コンポーネント（{ 
  オプション：{ 
    multipleSlots：trueに // アセンブリが定義されていますマルチスロット・オプションがサポートを有効
  } 
  プロパティ：{ 
    値：文字列は、// 次元コードの内容は、 
    幅：文字列を、// 二次元コードの幅（長さとデフォルトに等しい幅）
  }、
  データ：{ 
    qrcodeURL：「」
  }、
  READY：関数（）{
     VAR imgData = QR.drawImg（この.data.value、{ 
      Type番号： 3、// コードポイントサイズ1-40、より多くの、より小さなドットコード、二次元コードは、より強力になるであろう 
      errorCorrectLevel「H」、// 誤り訂正レベルH最高レベル（30％）簡単に言えば、2次元ですコードはまだ同定さqrcode.js参照の数でカバーすることができる 
      のparseInt（* rpx2px：サイズこの.data.widthを）
    }）
    この.setDataを（{ 
      qrcodeURL：imgData 
    }）
  }、
  方法：{ 
    / * * 
     *プレス写真保存
     * / 
    セーブ：機能（）{
       VARの自己= この
      VaRの AA = wx.getFileSystemManagerを（）、
        filePathに = wx.env.USER_DATA_PATH + '/ qrcode_' + + self.data.value '.pngを' ;
       // 書き込み一時ファイルに
      aa.writeFile（{ 
        filePathに：filePathに、
        データ：self.data.qrcodeURL.slice（ 22は）、
        エンコーディング： 'base64'の、
        成功：RES => {
           // 電話アルバムに一時ファイルを保存
          wx.saveImageToPhotosAlbum（{ 
            filePathに：filePathに、
            成功：関数（RES）{ 
              wx.showToast（{ 
                タイトル： '正常に保存' 、
              }）
            }、
            失敗：関数（ERR）{ 
              にconsole.log（ERR）
            } 
          }）
          console.log（RES）
        }、
        失敗：ERR => { 
          にconsole.log（ERR）
        } 
      }）
    } 
  } 
}）

コンポーネント/ QRコード/ index.wxml

< ビュークラス= 'QRコード' > 
  < 画像SRC = "{{qrcodeURL}}" bindlongpress = '保存' スタイル= "幅：{{幅}} RPX;高さ：{{幅}} RPX;マージン：0自動。 " >  </ 画像> 
  < スロット名= "テキスト" > </ スロット> 
</ ビュー>

ページの参照：

ページ/インデックス/ index.js

ページ（{ 
  データ：{ 
    textArr：[
       "11111111" 、
       "00000000" 、
       "7539514682492" 
    ] 
  }、
  のonLoad：関数（）{ 

  } 
}）

ページ/インデックス/ index.wxml

< ビューWXのための：= "{{textArr}}" > 
  < QRコードのクラス= "IBLOCK" 値= "{{アイテム}}" 幅= "440" > 
    < ビュースロット= "テキスト" > 
      {{アイテム}} 
    < / ビュー> 
  </ QRコード> 
</ ビュー>

トップコンポーネントがクリックできる2次元コードコンポーネントを生成するための小さなプログラムを表示するためのマイクロチャネルの開発ツールにインポートします。

小さなマイクロチャネルアプリケーション開発 - 二次元コードを生成するために、サードパーティのプラグインの使用

おすすめ