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

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理