Feat: Use new QRCode implementation

.gitignore

@@ -3,3 +3,4 @@ dist/
 .rn_temp/
 node_modules/
 .DS_Store
+yarn-error.log

package.json

@@ -1,6 +1,6 @@
 {
   "name": "taro-code",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Taro.js barcode & qrcode",
   "scripts": {
     "build": "export TARO_BUILD_TYPE=ui && taro build --ui",
@@ -17,9 +17,9 @@
     "dev:h5": "npm run build:h5 -- --watch",
     "dev:rn": "npm run build:rn -- --watch"
   },
-  "files": ["dist"],
   "author": "Miaonster <[email protected]>",
   "license": "MIT",
+  "files": ["dist"],
   "main": "dist/index.js",
   "dependencies": {
     "@tarojs/components": "1.2.26",

src/components/Barcode/index.js

@@ -36,7 +36,7 @@ class Barcode extends Component {
 }
 
 Barcode.defaultProps = {
-  text: '',
+  text: 'HELLO',
   width: 375,
   height: 80,
 }

src/components/Qrcode/index.js

@@ -7,24 +7,23 @@ import './style.css'
 class QRCode extends Component {
   componentDidMount () {
     const ctx = Taro.createCanvasContext('qrcode', this)
-
-    utils.qrcode({
+    utils.qrcode(this.props.text, {
       ctx,
-      text: this.props.text,
-      width: this.props.width * 4,
-      height: this.props.height * 4,
+      size: this.props.size * 2,
+      padding: 0,
     })
+    ctx.draw()
   }
 
   render () {
     const style = {
-      width: this.props.width * 4 + 'px',
-      height: this.props.height * 4 + 'px',
+      width: this.props.size * 2 + 'px',
+      height: this.props.size * 2 + 'px',
     }
 
     const wrapStyle = {
-      width: this.props.width + 'px',
-      height: this.props.height + 'px',
+      width: this.props.size + 'px',
+      height: this.props.size + 'px',
     }
 
     return (
@@ -36,15 +35,13 @@ class QRCode extends Component {
 }
 
 QRCode.defaultProps = {
-  text: '',
-  width: 300,
-  height: 300,
+  text: 'HELLO',
+  size: 300,
 }
 
 QRCode.propTypes = {
   text: PropTypes.string,
-  width: PropTypes.number,
-  height: PropTypes.number,
+  size: PropTypes.number,
 }
 
 export default QRCode

src/pages/index/index.js

@@ -23,8 +23,8 @@ export default class Index extends Component {
   render () {
     return (
       <View className='index'>
-        <Barcode text='hello' width={320} />
-        <QRCode text='hello' />
+        <Barcode text='hello' width={320} height={60} />
+        <QRCode text='hello world' size={300} />
       </View>
     )
   }

src/utils/index.js

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro'
-import { code128 } from './barcode';
-import qrcode from './qrcode';
+import { code128 } from './barcode'
+import { drawQRCodeToCanvas } from './qrcode'
 
 function convertLength(length) {
 	return Math.round(Taro.getSystemInfoSync().windowWidth * length / 750);
@@ -10,12 +10,8 @@ function barc({ ctx, text, width, height }) {
 	code128(ctx, text, convertLength(width), convertLength(height))
 }
 
-function qrc({ ctx, text, width, height }) {
-	qrcode.api.draw(text, {
-		ctx,
-		width: convertLength(width),
-		height: convertLength(height)
-	})
+function qrc(text, options) {
+	drawQRCodeToCanvas(text, options)
 }
 
 export default {