react 微信h5跳转小程序

 componentDidMount() {
        this.getWxConfig()
    }

    getWxConfig () {
        // 请求后台接口拿到 data信息
            wx.config({
                debug: false, 
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名
                jsApiList: ['checkJsApi', 'chooseImage', 'previewImage'],
                // openTagList配置可使用的开放标签,
                openTagList: ['wx-open-launch-weapp']
            })
    }        

同一个url只需要配置一次

// render里面
 <wx-open-launch-weapp
     id="launch-btn"
     username={username} // 小程序的用户名
     path={path} // 小程序的页面路径
     style={{position: 'absolute', background: 'transparent', width: '100%', height: '100%', top: 0, left: 0}}>
     <script type="text/wxtag-template">
     　　<button style={{width: '70px', height: '60px', display: 'block', border: 'none', background: 'transparent'}}> </button>
     </script>
  </wx-open-launch-weapp>

这里的样式使用绝对定位的方式，将wx-open-launch-weapp标签定位到想要跳转的元素上，这里width和height要写上，script里面的button的宽和高要使用px单位，这里的标签样式都得使用style行内样式