Feat: Use base64 to show image

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "arrowParens": "always",
+  "trailingComma": "all"
+}

package.json

@@ -1,57 +1,58 @@
 {
-	"name": "taro-code",
-	"version": "1.4.0",
-	"description": "Taro.js barcode & qrcode",
-	"scripts": {
-		"build": "export TARO_BUILD_TYPE=ui && taro build --ui",
-		"build:weapp": "taro build --type weapp",
-		"build:swan": "taro build --type swan",
-		"build:alipay": "taro build --type alipay",
-		"build:tt": "taro build --type tt",
-		"build:h5": "taro build --type h5",
-		"build:rn": "taro build --type rn",
-		"dev:weapp": "npm run build:weapp -- --watch",
-		"dev:swan": "npm run build:swan -- --watch",
-		"dev:alipay": "npm run build:alipay -- --watch",
-		"dev:tt": "npm run build:tt -- --watch",
-		"dev:h5": "npm run build:h5 -- --watch",
-		"dev:rn": "npm run build:rn -- --watch"
-	},
-	"author": "Miaonster <[email protected]>",
-	"license": "MIT",
-	"files": [
-		"dist"
-	],
-	"main": "dist/index.js",
-	"dependencies": {
-		"@tarojs/components": "1.3.1",
-		"@tarojs/router": "1.3.1",
-		"@tarojs/taro": "1.3.1",
-		"@tarojs/taro-alipay": "1.3.1",
-		"@tarojs/taro-h5": "1.3.1",
-		"@tarojs/taro-swan": "1.3.1",
-		"@tarojs/taro-tt": "1.3.1",
-		"@tarojs/taro-weapp": "1.3.1",
-		"nervjs": "^1.3.9",
-		"nerv-devtools": "^1.3.9"
-	},
-	"devDependencies": {
-		"@types/react": "^16.4.6",
-		"@types/webpack-env": "^1.13.6",
-		"@tarojs/plugin-babel": "1.3.1",
-		"@tarojs/plugin-csso": "1.3.1",
-		"@tarojs/plugin-uglifyjs": "1.3.1",
-		"@tarojs/webpack-runner": "1.3.1",
-		"babel-plugin-transform-class-properties": "^6.24.1",
-		"babel-plugin-transform-decorators-legacy": "^1.3.4",
-		"babel-plugin-transform-jsx-stylesheet": "^0.6.5",
-		"babel-plugin-transform-object-rest-spread": "^6.26.0",
-		"babel-preset-env": "^1.6.1",
-		"babel-eslint": "^8.2.3",
-		"eslint": "^4.19.1",
-		"eslint-config-taro": "1.3.1",
-		"eslint-plugin-react": "^7.8.2",
-		"eslint-plugin-import": "^2.12.0",
-		"eslint-plugin-taro": "1.3.1"
-	}
+  "name": "taro-code",
+  "version": "2.0.0",
+  "description": "Taro.js barcode & qrcode",
+  "scripts": {
+    "build": "export TARO_BUILD_TYPE=ui && taro build --ui",
+    "build:weapp": "taro build --type weapp",
+    "build:swan": "taro build --type swan",
+    "build:alipay": "taro build --type alipay",
+    "build:tt": "taro build --type tt",
+    "build:h5": "taro build --type h5",
+    "build:rn": "taro build --type rn",
+    "dev:weapp": "npm run build:weapp -- --watch",
+    "dev:swan": "npm run build:swan -- --watch",
+    "dev:alipay": "npm run build:alipay -- --watch",
+    "dev:tt": "npm run build:tt -- --watch",
+    "dev:h5": "npm run build:h5 -- --watch",
+    "dev:rn": "npm run build:rn -- --watch"
+  },
+  "author": "Miaonster <[email protected]>",
+  "license": "MIT",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "dependencies": {
+    "@tarojs/components": "1.3.28",
+    "@tarojs/router": "1.3.28",
+    "@tarojs/taro": "1.3.28",
+    "@tarojs/taro-alipay": "1.3.28",
+    "@tarojs/taro-h5": "1.3.28",
+    "@tarojs/taro-swan": "1.3.28",
+    "@tarojs/taro-tt": "1.3.28",
+    "@tarojs/taro-weapp": "1.3.28",
+    "nerv-devtools": "^1.5.6",
+    "nervjs": "^1.5.6",
+    "wx-base64-qrcode": "^1.0.4"
+  },
+  "devDependencies": {
+    "@tarojs/plugin-babel": "1.3.28",
+    "@tarojs/plugin-csso": "1.3.28",
+    "@tarojs/plugin-uglifyjs": "1.3.28",
+    "@tarojs/webpack-runner": "1.3.28",
+    "@types/react": "^16.4.6",
+    "@types/webpack-env": "^1.13.6",
+    "babel-eslint": "^8.2.3",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
+    "babel-plugin-transform-jsx-stylesheet": "^0.6.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
+    "eslint": "^4.19.1",
+    "eslint-config-taro": "1.3.28",
+    "eslint-plugin-import": "^2.12.0",
+    "eslint-plugin-react": "^7.8.2",
+    "eslint-plugin-taro": "1.3.28"
+  }
 }

src/components/Barcode/index.js

@@ -1,58 +1,37 @@
+import Taro, { useState, useEffect } from '@tarojs/taro'
 import PropTypes from 'prop-types'
-import Taro, { Component } from '@tarojs/taro'
-import { Canvas, View } from '@tarojs/components'
-import utils from '../../utils'
-import './style.css'
+import { Image } from '@tarojs/components'
+import utils from '@/utils'
 
-class Barcode extends Component {
-  componentDidMount () {
-    this.drawCode(this.props.text)
-  }
+function BarCode({ text, scale, width, height }) {
+  const [image, setImage] = useState('')
 
-  componentWillReceiveProps (nextProps) {
-    this.drawCode(nextProps.text)
-  }
-
-  drawCode (text) {
-    const ctx = Taro.createCanvasContext('barcode', this)
-    utils.barcode({
-      ctx,
-      text: text,
-      width: this.props.width * 2,
-      height: this.props.height * 2,
-    })
-  }
-
-  render () {
-    const { width, height } = this.props
-    const style = {
-      width: width * 2 + 'px',
-      height: height * 2 + 'px',
-    }
-
-    const wrapStyle = {
-      width: width + 'px',
-      height: height + 'px',
+  useEffect(() => {
+    if (text) {
+      setImage(utils.barcode({ text, scale }))
+    } else {
+      setImage('')
     }
+  }, [text])
 
-    return (
-      <View className='wrap' style={wrapStyle}>
-        <Canvas canvasId='barcode' className='barcode' style={style}></Canvas>
-      </View>
-    )
-  }
+  const widthString = width ? width + 'px' : ''
+  const heightString = height ? height + 'px' : ''
+  const style = { width: widthString, height: heightString }
+  return <Image style={style} src={image} />
 }
 
-Barcode.defaultProps = {
+BarCode.defaultProps = {
   text: '',
-  width: 375,
-  height: 80,
+  scale: 4,
+  width: 300,
+  height: 60,
 }
 
-Barcode.propTypes = {
+BarCode.propTypes = {
   text: PropTypes.string,
+  scale: PropTypes.number,
   width: PropTypes.number,
   height: PropTypes.number,
 }
 
-export default Barcode
+export default BarCode

src/components/Qrcode/index.js

@@ -1,56 +1,38 @@
+import Taro, { useState, useEffect } from '@tarojs/taro'
 import PropTypes from 'prop-types'
-import Taro, { Component } from '@tarojs/taro'
-import { Canvas, View } from '@tarojs/components'
-import utils from '../../utils'
-import './style.css'
-
-class QRCode extends Component {
-  componentDidMount () {
-    this.drawCode(this.props.text)
-  }
-
-  componentWillReceiveProps (nextProps) {
-    this.drawCode(nextProps.text)
-  }
-
-  drawCode (text) {
-    const ctx = Taro.createCanvasContext('qrcode', this)
-    utils.qrcode(text, {
-      ctx,
-      size: this.props.size,
-      padding: 0,
-    })
-    ctx.draw()
-  }
-
-  render () {
-    const { size, text } = this.props
-    const style = {
-      width: size + 'px',
-      height: size + 'px',
+import { Image } from '@tarojs/components'
+import { createQrCodeImg } from 'wx-base64-qrcode'
+
+function QRCode({ text, size, scale, typeNumber, errorCorrectLevel }) {
+  const [image, setImage] = useState('')
+
+  useEffect(() => {
+    if (text) {
+      const options = { errorCorrectLevel, typeNumber, size: size * scale }
+      setImage(createQrCodeImg(text, options))
+    } else {
+      setImage('')
     }
+  }, [text])
 
-    const wrapStyle = {
-      width: size + 'px',
-      height: size + 'px',
-    }
-
-    return (
-      <View className='wrap' style={wrapStyle}>
-        {text && <Canvas canvasId='qrcode' className='qrcode' style={style}></Canvas>}
-      </View>
-    )
-  }
+  const style = { width: size + 'px', height: size + 'px' }
+  return <Image style={style} src={image} />
 }
 
 QRCode.defaultProps = {
   text: '',
-  size: 300,
+  size: 100,
+  scale: 3,
+  errorCorrectLevel: 'M',
+  typeNumber: 2,
 }
 
 QRCode.propTypes = {
-  text: PropTypes.string,
   size: PropTypes.number,
+  scale: PropTypes.number,
+  text: PropTypes.string,
+  errorCorrectLevel: PropTypes.string,
+  typeNumber: PropTypes.number,
 }
 
 export default QRCode

src/pages/index/index.js

@@ -1,40 +1,31 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View } from '@tarojs/components'
-import Barcode from '../../components/Barcode';
-import QRCode from '../../components/QRCode';
+import Barcode from '../../components/Barcode'
+import QRCode from '../../components/QRCode'
 import './index.css'
 
 export default class Index extends Component {
-
   config = {
-    navigationBarTitleText: '首页'
+    navigationBarTitleText: '首页',
   }
 
   state = {
-    text: 'hello'
+    text: 'hello',
   }
 
-  componentWillMount () { }
-
-  componentDidMount () {
+  componentDidMount() {
     setInterval(() => {
       this.setState({
-        text: Date.now() + ''
+        text: Date.now() + '',
       })
-    }, 1000);
+    }, 1000)
   }
 
-  componentWillUnmount () { }
-
-  componentDidShow () { }
-
-  componentDidHide () { }
-
-  render () {
+  render() {
     return (
       <View className='index'>
         <View className='barcode'>
-          <Barcode text={this.state.text} width={320} height={60} />
+          <Barcode text={this.state.text} width={300} height={60} />
         </View>
         <View className='qrcode'>
           <QRCode text={this.state.text} size={300} />