【Copy攻城獅子日誌】ステップのプログラムのcanvasの表示レベルの問題

Created 2019-4-3 18:29:53 by huqiUpdated 2019-4-3 19:12 by huqi
↑開局1枚の絵は、ストーリーはすべて編↑によるものです.
一つの需要から話す
オオカミおじさん@i 5 tingは「技術の進級点だけでは意味がない.脱出シーンはすべてごろつきだ」と言っていました.今日も需要から話します.何が必要ですか?二次元コード一つと、二次確認用の弾戸一つ.ここの二次元コードは先端が生成したもので、二次元コードの下にはブトンがあります.相変わらず簡単な需要ですが、「シニア」のCopy攻城ライオンにとっては、レイアウト以外はCopyに行くしかないです.必要かもしれないコードを分析したら、「ブラシ」のCP(Copy&Paste)の操作がタイガーのように激しくなりました.その結果、コードを走ってerror 225を発見しました.特に本物の飛行機が走る時、問題が多いです.今回の問題のように、開発者のツールでは全く発見できません.幸いにも、慣習性の本物のプレビューがないと、パンシュは失業を待っています.やはり基礎がしっかりしていないため、文書が深く見えず、小さなプログラムの元のコンポーネントに注意すべき事項を把握できないと、この非常に基礎的な穴に落ちます.
(画像はネットワークから来ています)
canvasは二次元コードを生成する.
普通はこのような必要があります.まず人工された車輪を探してみます.試してみます.適当なものがあったら直接持ってきて使います.今回使ったのは@yingyeのオープンソースのweapp-qrcodeです.このjsはjquery-qrceodeとnode-Qrch odeを参考にしたはずです.興味がある学生は研究できます.コードのロジックは似ています.ただ、小さいプログラムの中でDOM操作がなく、canvasを利用して実現したのです.具体的にどのように実現しますか?お客様は直接関連のソースコードやドキュメントを見ることができます.私の実現:
wxml

wxss

canvas{
  display: block;
  margin: 0rpx auto;  /**    **/
}

js

    drawQrcode({
      width: 140,  //   ，     ， canvas width    
      height: 140, //   ，     ， canvas height    
      x: 0, //    ，       x      ，   0
      y: 0, //    ，       y      ，   0
      canvasId: 'myQrcode', //    ，   canvasId
      typeNumber: 10, //    ，        ，   -1
      text: '       ',  //   ，     
      callback(e) { //    ，          
        console.log('e: ', e)
      }
    })

二次元コードの効果:
canvas使用制限
私のページが上の図のようです.下にボタンがあります.ユーザー定義のポップアップモジュールを起動するにはクリックしてください.開発者ツールでの効果は非常に正常です.しかし、真のマシンでは文字の最初の違和感が現れます.canvasは直接カスタムコンポーネントをカバーしています.文書を見ると、公式が特にBug&Tipを書いていることが分かります.

3.tip:オリジナルコンポーネントの使用制限に注意してください.

4.bug:大きすぎる幅の高さを設定しないでください.Androidの下でcrashの問題があります.
そして、元のコンポーネントの使用制限をつけると、本B.U.Gの根本的な原因が分かります.

元のコンポーネントの階層が一番高いので、ページの他のコンポーネントはz-indxをいくら設定しても、元のコンポーネントに蓋をすることができません.

つまりcanvasはカスタムdialogコンポーネントをカバーします.どう解決しますか?私の考えは「曲線救国」です.キャンバスをイメージに変えます.何もしないで、袖をまくり上げて、開けて乾かします!
canvasをイメージに変換する
オリジナルのコンポーネント(camera、canvas、focusの時のinput、live-player、live-puser、map、textarea、video)が牛を強要するなら、彼らの高貴な身分を取り除いて、彼らの享有する特権を免除して、徹底的に彼らの命をかいて、彼らの平民の身を回復します.この考えに沿って、一歩ずつ始めてwxmlを実現します.

js

    data: {
      renderImg: ''
    },
    onLoad: function(){
        drawQrcode({
          width: 140,  //   ，     ， canvas width    
          height: 140, //   ，     ， canvas height    
          x: 0, //    ，       x      ，   0
          y: 0, //    ，       y      ，   0
          canvasId: 'myQrcode', //    ，   canvasId
          typeNumber: 10, //    ，        ，   -1
          text: '       ',  //   ，     
          callback(e) { //    ，          
            console.log('e: ', e)
            if(e.errMsg == 'drawCanvas:ok') { //      
              wx.canvasToTempFilePath({
                x: 0,
                y: 0,
                width: 140,
                height: 140,
                canvasId: 'myQrcode',
                success: function(res) {
                  me.setData({ renderImg: res.tempFilePath});
                }
              });   
            }
          }
        })
    }

以上はcanvasをイメージに変えましたが、点滅の問題があります.これはwx:if特有のものです.ここでは巧みな方法を通じて、canvasのスタイルだけを変えました.

canvas{
  display: block;
  margin: 0rpx -9999px;  /**           **/
}
image{
  display: block;
  margin: 0rpx auto;  /**    **/
}

これまでに、このcanvasはレベルが高すぎるピットを示しています.
もっといい案があれば、ご指摘ください.文章があなたの問題を解決したと感じたら、歓迎します.