微信内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 (
    
      
    
     );
   }
   
   // 使用方式
   
   点击跳转小程序
   
   
   

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

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