wx-open-launch-app使用及遇到的坑

总结及巩固使用微信开放标签跳转RNApp遇到的坑和用法

说说我们的需求，遇到的需求把我们app内容分享到微信 然后再次从微信h5页面跳转回app当前页面
1.第一步，我们要注册一个唯一的公众号appId值
2.引入js文件，因我们使用taro 所以直接

// 安装包
npm install weixin-js-sdk
使用
import wx from 'weixin-js-sdk';

3.通过config接口注入权限验证配置并申请所需开放标签

// 说明 这里就是获取第一步的公众号APPID唯一值 通过接口获取
    wx.config({
        debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
        appId: data.appId, // 公众号唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.noncestr, // 生成签名的随机串（注意大小写问题，接口返的都是小写）
        signature: data.signature, // 签名
        jsApiList: ['onMenuShareAppMessage', 'hideMenuItems'],
        openTagList: ['wx-open-launch-app'], // 需要使用的开放标签列表
      });

4.当接口调用成功或错误

// 成功
wx.ready(function () {
	// 因我们需求有二次分享 ，二次分享给好友
	 wx.onMenuShareAppMessage({
	      title: title || '---',
	       desc: desc || '-',
	       link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	       imgUrl: LOGOHOST,
	       success: function (res) {
	         console.log(res, '-----res');
	       },
	       fail: function (res) {
	         alert(JSON.stringify(res));
	       },
	 });
   // 因我们还有特殊需求只能分享好友
    wx.hideMenuItems({
          menuList: [
            'menuItem:share:timeline', // 分享到朋友圈
            'menuItem:share:qq',
            'menuItem:share:weiboApp',
            'menuItem:share:facebook',
            'menuItem:share:QZone',
            'menuItem:editTag',
            'menuItem:delete',
            'menuItem:copyUrl',
            'menuItem:originPage',
            'menuItem:readMode',
            'menuItem:openWithQQBrowser',
            'menuItem:openWithSafari',
            'menuItem:share:email',
            'menuItem:share:brand',
          ],
          success: function (res) {
            console.log('success', JSON.stringify(res));
          },
          fail: function (res) {
            alert(JSON.stringify(res));
          },
        });
	// 如果你使用 showMenuItems 显示按钮 会提示你：“the permission value is offline verifying”错误  
   // 这里我也没搞懂为什么只显示某个按钮会不行 而隐藏的可以 还没有深入研究 后面深入研究再补充
	
});


wx.error(function (res) {
	//如若报错可以打印看下
	alert(JSON.stringify(res))
});

这里说一下二次分享遇到的一些坑问题
1）link 里面不要有特殊字符 比如# $ 这些等，如果有 二次分享会出现下面情况, 还有一点分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 如果不一致也会出现以下情况

最后一步就是开放标签的一些问题了

 <wx-open-launch-app
        id="launch-btn"
        className="right"
        appid={APPID}
        style={{
          width: '105px',
          height: '32px',
          display: 'block',
          position: 'absolute',
          right: '0.68rem',
          top: '1.18rem',
          zIndex: 999,
          backgroundImage:
            "背景图",
          backgroundSize: 'contain',
        }}
        extinfo={locationHost}>
        <script type="text/wxtag-template">
          <Image
            src={app_button_opacity}
          />
        </script>
      </wx-open-launch-app>

说明以下 这个微信比较坑 script里面的内容 宽度高度都修改不了 就是设置了没有任何作用
因为我们是使用图片 刚开始我在里面使用二倍图和三倍图 因宽高改不了 一倍图内容又很模糊
后来使用偷梁换柱的方法来操作 wx-open-launch-app 可以修改样式大小 所以给外出添加了背景图片 又因如果script没有内容为空的话 会报错 所以给里面加了一个透明度图片 实现了点击效果

如果你在最外层偷梁换柱的话 这样点击效果也是不生效的

 <Image
     src={图片}
    />

 <wx-open-launch-app
        id="launch-btn"
        className="right"
        appid={APPID}
        style={{
          width: '105px',
          height: '32px',
          display: 'block',
          position: 'absolute',
          right: '0.68rem',
          top: '1.18rem',
        
        }}
        extinfo={locationHost}>
        <script type="text/wxtag-template">
          <Image
            src={app_button_opacity}
          />
        </script>
      </wx-open- launch-app>

整体在微信这面的过程就是这样，可能还有其他的坑我还有没遇到，如果后面再次做分享遇到其他坑及时更新及总结。