微信内h5页面打开小程序

相关配置

微信js文件版本大于等于1.6.0
https://res.wx.qq.com/open/js/jweixin-1.6.0.js
微信授权配置

window.wx.config({
 ...otherConfig,
 openTagList: ['wx-open-launch-weapp']
})

调用示例

const style = {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
};

function OpenWeapp({ originId, pagePath }) {
  return (
 <wx-open-launch-weapp username={originId} path={pagePath} style={style}>
   <script type="text/wxtag-template">
     <div style={style} />
   </script>
 </wx-open-launch-weapp>
  );
}
// 使用方式
<div style={{ position: 'relative' }}>
点击跳转小程序
<OpenWeapp originId="gh_xxxxxxxx" pagePath="pages/home/index?user=123&action=abc" />
</div>

为什么给div添加position: relative呢？
由于wx-open-launch-weapp设置样式比较困难，故放弃设置样式，将wx-open-launch-weapp作为一个透明的占位元素，撑满父元素，也能达到预期的功能