实现效果
小程序打开公众号的实现效果
小程序不能直接打开公众号首页,但是可以通过打开公众号的某一篇文章,然后进入到公众号内。
具体实现方法
- 在公众号后台创建一篇文章,最好以xx.weixin.qq.com为域名 ,否则可能出现小程序不识别的问题;
- 在小程序项目里创建一个webView的页面,访问的链接就是配置好的公众号文章链接;
- 在本地运行小程序,在需要跳转的地方添加方法,点击先跳转到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方法。