小程序的二维码生成，扫码进入功能（前端代码）

当时公司要求将详情生成二维码，然后扫码进入详情。听完之后觉得简单，生成进行，当开始写的时候，才知道 想要扫码进入不止代码生成二维码，还要在小程序后台做相应的配置。先给大家说生成二维码

1.HTML代码

​
<View className='code' >
                    
    <View className='code-img'>
        <Image src={this.state.qrImagePath} />
    </View>
    <View className='button' onClick={this.createShareQr.bind(this)}>保存到本地</View>
    {/* 生成二维码canvas  */}
    <Canvas className='canvas' canvas-id='drawQrCanvas'></Canvas>
</View>

​

canvas-id的设置很重要

2.js代码

// 生成二维码
    initQrCode() {
        console.log('二维码')
        drawQrcode({
            width: 200,
            height: 200,
            canvasId: 'drawQrCanvas',
            text: `这里是在后台配置的域名路径?id=${this.state.routeId}`
        });
    }
    // 将canvas转换为二维码图片
    createShareQr() {
        let that = this
        console.log('jgfdj ')
        Taro.canvasToTempFilePath({
            canvasId: 'drawQrCanvas',
            success (res) {
                console.log(res,'res')
                let tempFilePath = res.tempFilePath;
                that.setState({
                    qrImagePath: tempFilePath,
                    // show: true
                },()=> {
                   that.saveQrToLocal()
                })
            }
        })
    }
    // 保存二维码到本地
    saveQrToLocal() {        
        let that = this
        console.log(this.state.qrImagePath,'12111111111')
        Taro.saveImageToPhotosAlbum({
            filePath: that.state.qrImagePath,
            success() {
                console.log('保存成功');
                Taro.showModal({
                title: '提示',
                content: '图片已保存到相册，赶快分享吧！',
                showCancel: false,
                confirmText: '好的',
                success(res) {
                        if (res.confirm) {
                            console.log('用户点击确定');
                        }
                        that.setState({
                            show: false
                        })
                    }
                    
                })
                
            }
        })
        
    }

里面的drawQrcode是生成二维码的第三方的插件，这个要么自己找这个文件 要么npm安装（就是它import drawQrcode from 'weapp-qrcode';）weapp-qrcode是生成二维码

我这里的小程序是用taro框架 你用的微信开发者就把里面的taro记得替换成wx