Small micro-channel application development - the use of third-party plug-ins to generate two-dimensional code

Demand scenario:

Applet specified page needs to generate more than two-dimensional code based on the list data.

Implementation:

In view of the need to generate multiple two-dimensional code, the two-dimensional code generation function can be encapsulated in the assembly, called directly in the page list loop just fine. You can also add slot to the assembly, when the page is invoked with the need to write code to bind components together for the two-dimensional content displayed.

Technical Difficulties:

Micro-channel applet does not provide official two-dimensional code generation magic resistance, so the plug can only find their own reality. For the online plug-in, a large part it is based on qrcode.js improvement.

The choice of plug-in is not very well, for the first time selected weapp-qrcode this plug-in, originally developed tests are good, to a colleague Huawei v10, there will be (intermittent problem between two pages are not displayed switch, sometimes does not display two-dimensional code), this problem has been raised in the git issues, and author marked bug.

Back and find another plug weapp-qrcode-Base64 , after extensive testing, this plugin can be used normally, this function has to do a small program fragment, see: a small program to generate two-dimensional code components .

Component Code:

components/qrcode/index.js

// Components / myComponent.js 
const the require the QR = ( './ weapp-qrcode.js' ) 
const rpx2px = wx.getSystemInfoSync () windowWidth / 750. 
The Component ({ 
  Options: { 
    multipleSlots: to true  // when the assembly is defined multi-slot options enable support 
  }, 
  Properties: { 
    value: String, // dimensional code contents 
    width: String, // two-dimensional code width (length and width equal to the default) 
  }, 
  Data: { 
    qrcodeURL: '' 
  }, 
  READY: function () {
     var imgData = QR.drawImg ( the this .data.value, { 
      typeNumber: . 3,// code point size 1-40, the larger the number, the smaller the dot code, two-dimensional code will become more intensive 
      errorCorrectLevel: 'H', // error correction level H the highest level (30%) simply put, is a two-dimensional code can still be covered by the number of identified see qrcode.js 
      size: the parseInt (* rpx2px the this .data.width) 
    }) 
    the this .setData ({ 
      qrcodeURL: imgData 
    }) 
  }, 
  Methods: { 
    / * * 
     * press save Photos 
     * / 
    save: function () {
       var Self = the this 
      var AA = wx.getFileSystemManager (), 
        filePath = wx.env.USER_DATA_PATH + '/ qrcode_' + + self.data.value '.png' ;
       // write into a temporary file
      aa.writeFile ({ 
        filePath: filePath, 
        Data: self.data.qrcodeURL.slice ( 22 is ), 
        encoding: 'Base64' , 
        Success: RES => {
           // save the temporary file to the phone album 
          wx.saveImageToPhotosAlbum ({ 
            filePath : filePath, 
            success: function (RES) { 
              wx.showToast ({ 
                title: 'saved successfully' , 
              }) 
            }, 
            Fail: function (ERR) { 
              the console.log (ERR) 
            } 
          })
          console.log(res)
        },
        fail: err => {
          console.log(err)
        }
      })
    }
  }
})

components/qrcode/index.wxml

<view class='qrcode'>
  <image src="{{qrcodeURL}}" bindlongpress='save' style="width:{{width}}rpx; height:{{width}}rpx;margin:0 auto;"> </image>
  <slot name="text"></slot>
</view>

Page references:

pages/index/index.js

Page({
  data: {
    textArr: [
      "11111111",
      "00000000",
      "7539514682492"
    ]
  },
  onLoad: function() {

  }
})

pages/index/index.wxml

<view wx:for="{{textArr}}">
  <qrcode class="iblock" value="{{item}}" width="440">
    <view slot="text">
      {{item}}
    </view>
  </qrcode>
</view>

Top components can click the small program to generate two-dimensional code components imported into the micro-channel developer tools for viewing.