微信H5跳转小程序功能-React

文档：
微信网页开发-跳转小程序

注意：

JS-SDK必须1.6.0以上：例： https://res.wx.qq.com/open/js/jweixin-1.6.0.js

配置config

官方注释：

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app']
});

我的配置信息是从后台接口获取的：

export async function setup(url: string = window.location.href) {
  const response = await apiClient.base.weixinSign({
    url
  });  //后台接口

  if (!response.body) {
    return;
  }

  window.wx.config({
    ...response.body,
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseWXPay'],
    openTagList: ['wx-open-launch-weapp']   //打开小程序的按钮标签
  });
}
//页面初始化的时候就执行这个方法

使用

下面是官方用例：

  




### [](https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#%E8%B7%B3%E8%BD%ACAPP%EF%BC%9Awx-open-launch-app)

我的项目使用React+TS开发，不能直接使用wx-open-launch-weapp标签， ts验证通不过；但是可以用// @ts-ignore忽略检验。注意// @ts-ignore只忽略一行，可以把标签代码缩成一行。
封装了一个按钮：

import React from 'react';
import styles from './index.module.scss';

interface Props {
  username: string
  path: string
  className?: string;
  style?: React.CSSProperties | string
}

interface State {
  
}

export default class WxOpenLaunchWeapp extends React.Component {
    public render() {
        const { className, username, style, path } = this.props;
        return (
            // @ts-ignore
            
        )
    }
}

然后页面调用：

import WxOpenLaunchWeapp from 'components/WxOpenLaunchWeapp'
export default class VipCompaire extends Base {
  public render() {
    return (
      
          打开小程序  
      
    )
  }
}

然后本地调试的时候。。。看不到这个按钮。打包正式环境就能看到了。。。
然后点击测试，可以跳转！

调样式的时候被坑惨了

这本地调试看不到按钮，根本不能调！而且用className写的样式是没用的！必须用行内样式！ 而且px单位换算也是个问题！反人类的东西！

看看最后的样子，惨不忍睹：

  点此查看

样式···就先将就着用吧