微信小程序下获取公众号openId

微信小程序下获取公众号openId

一、为什么我们需要在小程序下面获取公众号的openId呢？
微信公众号和微信小程序我们一般都会开发，有一种场景我们经常会遇到，公众号的消息推送以较成熟，我们希望把小程序那边的用户也同步到公众号这边，而且最好采用静默方式，所以我们有这种需求。

二、方案

从目前来讲，微信没有给我们提供可直接在小程序中调用公众号的接口，当然大家会想到union机制，当然这个还是有一定限制的，需要用户主动触发。那么我们有没有其他可选方案呢，当然我们会想到是不是可以通过向程序访问公众号h5的页面呢，这个时候我们会想到webview组件。

通过webview加载 公众号的一个h5页面，h5页面只做公众号授权处理，例如

小程序

constructor(props) {
    super(props)
    this.state = {
      num: 0
    }
  }
  handleLoad (e) {
    let { num } = this.state;
    this.setState({num: ++num}, ()=>{
      if(num==2){
        const url = e.detail.src;
        let code = getQueryString(url, 'code')
        Taro.redirectTo({
            url: `/pages/index/index?code=${code}`
        })
      }
    })      
  }

  handleError () {
    Taro.redirectTo({
        url: `/pages/index/index`
    })
  }
  
  render () {
    return (
      <WebView src='https://xxxx.xxxx.com/#/pages/get-openId/index' onLoad={ this.handleLoad } onError={ this.handleError } />
    )
  }

公众号

 constructor(props) {
    super(props);
    this.state = {
    };
  }
  componentDidMount() {
    Taro.showLoading({ title: '加载中...', mask: true })
    let APP_ID = '000000000000'
    let urlParams = getAuthUrl(window.location.href, APP_ID)
    let code = ''
    if(urlParams){
      code = getQueryString('code')
    }
    if(!code){
      window.location.href = urlParams
      return
    }
    setTimeout(() => {
      Taro.hideLoading()
    }, 6000);
  }

  render() {
    return (
      <View className='loading-container'>
      </View>
    )
  }
const getAuthUrl = (appId, currentPageUrl ) => {
  const authUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri="+ encodeURIComponent(currentPageUrl) +"&response_type=code&scope=snsapi_base&state=TOKEN&connect_redirect=1#wechat_redirect"
  return authUrl
}

小程序加载的页面会请求两次， 这是和公众号授权机制有关，我们只需要在页面加载的第二次从detial中拿到code就可以了。