[移动开发]h5跳转小程序

h5跳转小程序

我的所写的项目是react框架，在h5跳转小程序时，需要引入wx-jssdk，具体操作看我上篇文章：https://blog.csdn.net/weixin_45315794/article/details/122448088

wx-open-launch-weapp使用所需条件：

• 微信 JS-SDK 版本：1.6.0 及以上。
• 微信版本要求为：7.0.12 及以上。
• 系统版本要求为：iOS 10.3 及以上、Android 5.0 及以上。
• 此功能的开放对象：
  必须具备下面条件，不然就渲染不出来，就是加了代码，在真机也显示不出来的。
  1 、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
  2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。

wx.config配置

增加参数：openTagList: [ ‘wx-open-launch-weapp’ ]

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
  appId: '', // 必填，公众号的唯一标识
  timestamp: '', // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [ 'wx-open-launch-weapp' ] // 可选，需要使用的开放标签列表
})

使用标签wx-open-launch-weapp

• userName ：必填，所需跳转的小程序原始 id，即小程序对应的以 gh_ 开头的 id。（非小程序 APPID）
• path： 非必填，所需跳转的小程序内页面路径及参数。（ 对于path属性，所声明的页面路径必须添加.html后缀，如pages/index/index.html。

let userName = ''; //必填，所需跳转的小程序原始 id，即小程序对应的以 gh_ 开头的 id。（非小程序 APPID）
let path = '';// 非必填，所需跳转的小程序内页面路径及参数。（ 对于path属性，所声明的页面路径必须添加.html后缀，如pages/index/index.html。

<wx-open-launch-weapp
	id="launch-btn"
    username={username}
    path={path}
    style={{ width: '100%', height: '100%', backgroundColor: '#fd0000', opacity: 0 }}
  >
    <script type="text/wxtag-template">
      <div id="test-btn" style={{ textAlign: 'center' }}>
        <span
          style={
            btnStyle || { color: '#fff', fontSize: '16px', lineHeight: '48px', height: '48px', cursor: 'default' }
          }
        >
         跳转
        </span>
      </div>
    </script>
</wx-open-launch-weapp>