小程序直接跳转到公众号的方法

实现效果

小程序打开公众号的实现效果

小程序不能直接打开公众号首页，但是可以通过打开公众号的某一篇文章，然后进入到公众号内。

具体实现方法

1. 在公众号后台创建一篇文章，最好以xx.weixin.qq.com为域名 ，否则可能出现小程序不识别的问题；
2. 在小程序项目里创建一个webView的页面，访问的链接就是配置好的公众号文章链接；
3. 在本地运行小程序，在需要跳转的地方添加方法，点击先跳转到webView页面，然后会访问到公众号文章里，文章的左上角有公众号的名称，点击名称，就可以直接跳转到公众号内了；
   
   4.我用的是Taro的写法，大家也可以用原生的，下面放下我的代码

import Taro from '@tarojs/taro';
import { WebView } from '@tarojs/components';
import CommonPageComponent from '../../../pages/CommonPageComponent';
import util from '../../../pages/login/util'; //自己封装的解析h5 Url编码的方法
import { logUrlAddSeries } from '../../../utils/common/logReport'; // 自己封装的埋点方法
const plugin = Taro.requirePlugin('loginPlugin'); //自己封装好的登陆插件

export default class Concern extends CommonPageComponent {
  constructor(props) {
    super(props);
    this.state = {
      h5_url: '',
      url: '',
      articleUrl:
        'https://mp.weixin.qq.com/s?__biz=MzUxNzA4NTQxNQ==&mid=100008693&idx=1&sn=bc6ac5115dd2bc2c604fb329dfa4e793&chksm=799f237d4ee8aa6b86572076bb1e9f3e24b3afb27ef40f106f2261bd20c26a1c28b20ce712a8#rd', //文章路径
    };
  }

  config = {
    navigationBarTitleText: '',
  };

  componentWillMount() {
    // 开始需要先隐藏分享功能
    Taro.hideShareMenu();
    exportPoint(this.$router);
    const { articleUrl } = this.$router.params;
    if (articleUrl) {
      this.setState(
        {
          articleUrl: articleUrl,
        },
        () => {
          this.init();
        }
      );
    } else {
      this.init();
    }
  }

  componentDidShow() {
    this.onPageShow();
  }

  componentDidHide() {
    this.onPageHide();
  }

  init = () => {
    // 获取小程序参数，拼接webview的H5链接
    let h5_url = encodeURIComponent(this.state.articleUrl);
    h5_url = util.transformH5Url(h5_url);
    util.h5Init({
      ...{ returnPage: h5_url, pageType: 'h5' },
    });
    this.setState({ h5_url }, () => {
      this._genToken();
    });
  };

  _genToken = () => {
    let { h5_url } = this.state;
    plugin
      .genToken({
        h5_url,
      })
      .then(res => {
        let { isSuccess, err_code, url, tokenkey, err_msg } = res;
        if (isSuccess && !err_code) {
          this.setState(
            {
              url: logUrlAddSeries(`${url}?to=${h5_url}&tokenkey=${tokenkey}`),
            },
            () => {
              console.log({ url });
            }
          );
        } else {
          Taro.showModal({
            title: '提示',
            content: err_msg || '页面跳转失败，请重试',
            success: resp => {
              if (resp.confirm) {
                this._genToken();
              }
            },
          });
        }
      });
  };

  render() {
    return <WebView src={this.state.url} />;
  }
}

我的代码里加了登陆态打通和埋点方法，大家不需要的可以去掉_genToken方法。