微信小程序下獲取公眾號(hào)openId

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

二、方案

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

通過(guò)webview加載 公眾號(hào)的一個(gè)h5頁(yè)面，h5頁(yè)面只做公眾號(hào)授權(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 } />
    )
  }

公眾號(hào)

 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
}

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