微信小程序下獲取公眾號openId

一、為什么我們需要在小程序下面獲取公眾號的openId呢？
微信公眾號和微信小程序我們一般都會開發(fā)，有一種場景我們經(jīng)常會遇到，公眾號的消息推送以較成熟，我們希望把小程序那邊的用戶也同步到公眾號這邊，而且最好采用靜默方式，所以我們有這種需求。

二、方案

從目前來講，微信沒有給我們提供可直接在小程序中調(diào)用公眾號的接口，當(dāng)然大家會想到union機(jī)制，當(dāng)然這個還是有一定限制的，需要用戶主動觸發(fā)。那么我們有沒有其他可選方案呢，當(dāng)然我們會想到是不是可以通過向程序訪問公眾號h5的頁面呢，這個時候我們會想到webview組件。

通過webview加載 公眾號的一個h5頁面，h5頁面只做公眾號授權(quán)處理，例如

小程序

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'>={ this.handleLoad }>={ 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
}

小程序加載的頁面會請求兩次， 這是和公眾號授權(quán)機(jī)制有關(guān)，我們只需要在頁面加載的第二次從detial中拿到code就可以了。