文档：
微信网页开发-跳转小程序
注意：
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>
样式···就先将就着用吧
