微信内h5页面打开小程序

相关配置

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

    <pre class="hljs language-stylus" style="overflow-wrap: break-word; margin-top: 0px !important; margin-right: 0px; margin-bottom: 1.25rem; margin-left: 0px; padding: 1rem; text-decoration: none; font-style: normal; box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">window.wx.config({
     ...otherConfig,
     openTagList: ['wx-open-launch-weapp']
    })</pre>

3. 调用示例

    <pre class="hljs language-javascript" style="overflow-wrap: break-word; margin-top: 0px !important; margin-right: 0px; margin-bottom: 1.25rem; margin-left: 0px; padding: 1rem; text-decoration: none; font-style: normal; box-sizing: border-box; font-family: SFMono-Regular, Menlo, Monaco, Consolas, &quot;Liberation Mono&quot;, &quot;Courier New&quot;, monospace; font-size: 14px; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); max-height: 35rem; line-height: 1.5;">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' }}>
    点击跳转[小程序](http://www.wxapp-union.com/)
    <OpenWeapp originId="gh_xxxxxxxx" pagePath="pages/home/index?user=123&action=abc" />
    </div>
    </pre>

为什么给div添加position: relative呢？

由于wx-open-launch-weapp设置样式比较困难，故放弃设置样式，将wx-open-launch-weapp作为一个透明的占位元素，撑满父元素，也能达到预期的功能。