关于微信js-sdk:微信内h5页面打开小程序

相干配置

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

2. 微信受权配置

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

3. 调用示例

   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 作为一个通明的占位元素，撑满父元素，也能达到预期的性能