h5 跳转小程序实践（react）

微信官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html

首先关联公众号：

登录微信公众平台， 小程序管理 =》 添加小程序 =》  关联小程序

 

其他步骤按照官方文档处理，此处提出几处需要注意的点：

       1. 通过config申请标签时官方实例是写的wx-open-launch-app，实际h5跳小程序需要的是wx-open-launch-weapp，注意区分；

       2. 使用wx-open-launch-weapp时path属性声明的页面路径必须添加.html，否则无法成功跳转；如：pages/home/index.html?key1=aaa&key2=bbb；

       3. 官方用例的写法不适用于react框架，会直接报错（不支持<style>标签的内部样式写法），同时react不支持<template>，无法正常渲染button，将<template>换成<script type="text/wxtag-template"></script>即可；不用<script>包裹能正常显示button内容，但是点击无法跳转；

       4. wx-open-launch-weapp 的内部元素不支持外部样式，要修改跳转内部元素样式只能通过内联样式来实现；

       5. 即便我们只需要申请标签，依然需要给jsApiList随意加个有效值，否则安卓机会报错，无法展示按钮

       6. ios系统需要刷新一下页面才能显示按钮，安卓不用，在ready中在第一次时reload一下（通过sessionStorage存个值判断一下，否则会无限循环）；