文檔：
微信網(wǎng)頁開發(fā)-跳轉(zhuǎn)小程序

注意：

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

配置config

官方注釋：

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印
  appId: '', // 必填，公眾號(hào)的唯一標(biāo)識(shí)
  timestamp: , // 必填，生成簽名的時(shí)間戳
  nonceStr: '', // 必填，生成簽名的隨機(jī)串
  signature: '',// 必填，簽名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可選，需要使用的開放標(biāo)簽列表，例如['wx-open-launch-app']
});

我的配置信息是從后臺(tái)接口獲取的：

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

  if (!response.body) {
    return;
  }

  window.wx.config({
    ...response.body,
    jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseWXPay'],
    openTagList: ['wx-open-launch-weapp']   //打開小程序的按鈕標(biāo)簽
  });
}
//頁面初始化的時(shí)候就執(zhí)行這個(gè)方法

使用

下面是官方用例：

<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)

我的項(xiàng)目使用React+TS開發(fā)，不能直接使用wx-open-launch-weapp標(biāo)簽， ts驗(yàn)證通不過；但是可以用// @ts-ignore忽略檢驗(yàn)。注意// @ts-ignore只忽略一行，可以把標(biāo)簽代碼縮成一行。
封裝了一個(gè)按鈕：

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>
        )
    }
}

然后頁面調(diào)用：

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>
    )
  }
}

然后本地調(diào)試的時(shí)候。。。看不到這個(gè)按鈕。打包正式環(huán)境就能看到了。。。
然后點(diǎn)擊測試，可以跳轉(zhuǎn)！

調(diào)樣式的時(shí)候被坑慘了

這本地調(diào)試看不到按鈕，根本不能調(diào)！而且用className寫的樣式是沒用的！必須用行內(nèi)樣式！ 而且px單位換算也是個(gè)問題！反人類的東西！

看看最后的樣子，慘不忍睹：

<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',
  }}>點(diǎn)此查看</View>
</WxOpenLaunchWeapp>

樣式···就先將就著用吧