react page embedded micro-channel two-dimensional code and custom styles and a micro-channel unionId common problem page

　　In react pages embedded "micro-channel two-dimensional code" to achieve the PC to log in to sweep through the micro-letter code. First go to the WeChat open platform to register an account, create a web application, submit your site for the record audit, get appid and appsecret; other development processes based on micro-channel documents to operate.

react part of the code page, the introduction of two-dimensional code embedded script, set up cross-domain iframe tag support, custom two-dimensional code pattern:

componentWillMount () {
         // the introduction of "micro-channels embedded in the two-dimensional code" script 
        var Script = document.createElement ( 'Script' ); 
        script.type = 'text / JavaScript' ; 
        script.async = to false ; 
        script.src = 'HTTPS : //res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js' ; 
        document.head.appendChild (Script); 
    } 

    componentDidMount () { 
        / * * 
         * ... OTHER code 
         * * / 

        // load micro-channel two-dimensional code 
        the setTimeout ( function () {
             / * * 
             * micro-channel two-dimensional code embedded custom style implemented in two ways
             * The first is to write a custom style css file inside, deployed on a https link 
             * The second is the custom style through the base64 encryption settings on href 
             * * / 
            var customeStyle = "the Data: text / CSS; Base64, Lnd4X3FyY29kZSBpZnJhbWUgeyB3aWR0aDogMTYwcHg7IGhlaWdodDogMTYwcHg7IG1hcmdpbjogMDsgcGFkZGluZzogMDsgfQ0KLmxvZ2luUGFuZWwgeyBtYXJnaW46MDsgcGFkZGluZzogMDsgfQ0KLmxvZ2luUGFuZWwgLnRpdGxlLCAubG9naW5QYW5lbCAuaW5mbyB7IGRpc3BsYXk6IG5vbmU7IH0NCi5pbXBvd2VyQm94IC5xcmNvZGUgeyBtYXJnaW46IDA7IHdpZHRoOiAxNjBweDsgYm9yZGVyOiBub25lOyB9 " ; 

            new new WxLogin ({ 
                self_redirect: to false , 
                ID: " wx_login_container " , 
                AppID:"WX0 *************", // WeChat open platform for web applications AppID 
                scope: "snsapi_login" , 
                redirect_uri: encodeURI (location.origin), // set after sweeping success callback code page 
                state : "" + ( new new a Date ()) getTime (),. 
                style: "Black" , 
                href: customeStyle, // location.origin + "/css/wx_qrcode.css", // custom micro-channel two-dimensional code style file 
            }); 

            // set iframe tag can jump across domains 
            var qrcodeBox = document.getElementById ( "wx_login_container" );
             var iframes to qrcodeBox.getElementsByTagName = ( "iframe" );

            if (iframes to.
                length) { were ifr = iframe[0];
                ifr.setAttribute("sandbox", "allow-scripts allow-top-navigation allow-same-origin");
            }
        }, 1000)
    }

View Code

Because the default embedded two-dimensional code size is fixed, there is the head of the title, or the bottom of the prompt text, so if you want to change the size of two-dimensional code and hide the title and call text, custom styles need to control. Micro-channel interface is also provided a href attribute to customize the style.

Custom styles in two ways:

* The first is to write a custom style css file inside, deployed to a https link 
* The second is the custom style through the base64 encryption settings on href

In contrast, the second approach is more convenient.

Finally renderings

 

In addition, if requested for the same micro-channel user, whether he is a scan code to log on the PC side, or unauthorized access in the micro-letter web pages must be identified as the same user, you need to take WeChat open platform and micro-channel public platform associate account.

 For users of micro-channel authorization login, the unique identifier is unionId micro-letters provided to this demand, the public platform documentation mentioned on: