微信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']   //打开小程序的按钮标签
  });
}
//页面初始化的时候就执行这个方法

使用

下面是官方用例：

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <template>
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  </template>
</wx-open-launch-weapp>
<script>
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
</script>


### [](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<any, State> {
    public render() {
        const { className, username, style, path } = this.props;
        return (
            // @ts-ignore
            <wx-open-launch-weapp id="launch-btn" username={username} path={path}><script type="text/wxtag-template">{this.props.children}</script></wx-open-launch-weapp>
        )
    }
}

然后页面调用：

import WxOpenLaunchWeapp from 'components/WxOpenLaunchWeapp'
export default class VipCompaire extends Base<any, State> {
  public render() {
    return (
      <WxOpenLaunchWeapp
        username="gh_******"
        path="/pages/index/index"
      >
          <View>打开小程序</View>  
      </WxOpenLaunchWeapp>
    )
  }
}

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

调样式的时候被坑惨了

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

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

<WxOpenLaunchWeapp
  username="gh_****"
  path="/pages/video/lists/index?id=13"
  style={{width: '100%'}}
>
  <View style={{
    width: '178.5px',
    textAlign: 'center',
    border: 'solid 1px #DD0011',
    borderRadius: '100px',
    fontSize: '16px',
    lineHeight: 1,
    padding: '7px 0',
    margin: '0 auto 20px',
      color: '#DD0011',
  }}>点此查看</View>
</WxOpenLaunchWeapp>

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