这里写目录标题

• 问题描述
• 解决方案
• • 首先调研一下
  • 最终的代码
  • 最终测试

问题描述

公司有一款APP，原本用的是openinstall调用拉起app功能。
ios上（网页、微信、钉钉等拉起app）都正常。
安卓上网页拉起没问题，但是在微信、钉钉内等一些环境中，都是用折中的办法，就是拉起app时，提示点击右上角，在浏览器内打开当前网页，然后在浏览器内打开app。

目前，公司的UI（公司的UI权力比较大，可以提需求）提出，他们在大众点评等app上看到，分享到微信后可以直接拉起app，而不需要打开浏览器。所以要求我们这边也要可以。

总结，就是在安卓的微信内可以直接打开app

解决方案

首先调研一下

1. 先看微信官方文档
   https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#22
   
   注意几点：

1.App必须接入微信OpenSDK
2.已认证的服务号（必须要是服务号，而且已认证）
3.服务号中绑定你的app

2. 然后就可以开发了（入坑的开始）

<wx-open-launch-app
  id="launch-btn"
  appid="your-appid"
  extinfo="your-extinfo"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">App内查看</button>
  </script>
</wx-open-launch-app>

官方代码一贴，打开网页一看，啥有没有，按钮没出来。（这个问题排查了一天）
这里要注意几点：

1.因为我们公司这边服务号账号是有专门的人管理的，所以绑定账号也是通过远程沟通的，我这边和他再三确认下，发现他绑错账号了，他绑定到了公众号下面。下面重让他绑定了服务号，我让他截屏给我看，确认下（大概没问题）
2.绑定安全域名，后面开发测试要用

这边再打开网页看下，还是没出来。然后面向百度找问题。
发现<wx-open-launch-app>这个标签只有在微信内环境下才能看到，浏览器内是看不到的。
为此，我下载了微信开发者工具

点开公众号网页项目，输入你的线上地址，查看。本地路径是看不到的。

如果这个时候，并没有看到按钮出现。排查wx.config是否请求到了wx-open-launch-app标签的权限。

如果这里提示fail，按照对应的类型去排查错误原因。
我这里遇到过两个问题，
1.

这个是地址不对，当前的地址应该用绑定后的线上地址。

2.这里找不到图了。不过提示的是签名错误。signature有问题。这里要排查下wx.config

wx.config({
   debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
   appId: '***********', // 必填，服务号的唯一标识,服务号的appid
   timestamp: res.data.timestamp, // 必填，生成签名的时间戳
   nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
   signature: res.data.signature, // 必填，签名，见附录1
   jsApiList: [
     'updateTimelineShareData', 
     'updateAppMessageShareData',
     'onMenuShareAppMessage',
     'onMenuShareTimeline',
     'onMenuShareQQ',
   ],
   openTagList: ['wx-open-launch-app'],
 });

wx.config内的appid要是服务号的appid。不是公众号的appid。
wx-open-launch-app内的appid就是你的app的appid

最终的代码

最后放上我的最终的代码：

1.父组件

<template>
  <div id="app" class="page">
    <wxOpenApp :extinfoData="extinfoData"></wxOpenApp>
  </div>
</template>

<script>
import wxOpenApp from '@/components/wxOpenApp';

export default {
  components: {
    wxOpenApp,
  },
  data() {
    return {
      extinfoData: '携带的参数',
    };
  },
};
</script>
<style>
html,
body {
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}
#app {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
</style>

<style lang="less" scoped>
@import './app';
</style>

2.wxOpenApp子组件

<template>
  <div id="openAppBox" class="openAppBox" v-if="isWeixinTag">
    <wx-open-launch-app
      id="launch-btn"
      appid="***************"
      :extinfo="extinfoData"
      @error="handleErrorFn"
      @launch="handleLaunchFn"
      style="width: 100vw"
    >
      <script type="text/wxtag-template">
        <style>.finalbtn {background:#18c984;width:100vw;display: block;height: 30rem;font-size: 0;padding:0;margin:0;border:none;text-align:center;}</style>
        <button class="finalbtn">App内查看</button>
      </script>
    </wx-open-launch-app>
  </div>
</template>

<script>
import {
  isWeixin,
  isIOS
} from '@/utils/appAssist';
import wx from 'weixin-js-sdk';
export default {
  props:{
    extinfoData:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      isWeixinTag:true,
      isIOS:isIOS(),
    };
  },
  created() {
    if (isWeixin()) {
      this.authSDK()
    }
  },
  mounted(){
  },
  methods: {
    // 监听error 函数
    handleErrorFn(e) {
      console.log('跳转失败', JSON.stringify(e))
    },
    // 监听launch 函数
    handleLaunchFn(e) {
      console.log('跳转成功', JSON.stringify(e))
    },
    // 判断是否微信环境
    is_weixn() {
      let ua = navigator.userAgent.toLowerCase()
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        return true
      } else {
        return false
      }
    },
    authSDK() {
      var doc = document,
      head = doc.head || doc.getElementsByTagName('head')[0] || doc.documentElement,
      ua = navigator.userAgent,
      wxapi = '//res2.wx.qq.com/open/js/jweixin-1.6.0.js';

      function require(url, onload) {
        var node = doc.createElement('script');
        node.onload = onload;
        node.async = true;
        node.src = url;
        head.appendChild(node);
      }

      if (ua.match(/MicroMessenger\/([\d\.]+)/)) {
        require(wxapi, function () {
          $.getJSON('/finchinaAPP/getJSSignForOpenAPP.action?url=' + encodeURIComponent(location.href), function (res) {
            console.log("res",res)
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: 'wxf5eb231586ef036c', // 必填，服务号的唯一标识 //prod -> wxf5eb231586ef036c
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature, // 必填，签名，见附录1
              jsApiList: [
                'updateTimelineShareData', 
                'updateAppMessageShareData',
                'onMenuShareAppMessage',
                'onMenuShareTimeline',
                'onMenuShareQQ',
              ],
              openTagList: ['wx-open-launch-app'],
            });
          });
          wx.ready(function () {
            console.log('ready')
            wx.checkJsApi({
              jsApiList: ['wx-open-launch-app'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: function (res) {
                console.log('可用', res);
              },
              fail: (err) => {
                console.log(err, '不可用')
              }
            })
          })
          wx.error(function (err) {
            console.log(err)
          })
        });
      }
    },
    
  },
};
</script>

<style lang="less" scoped>
.openAppBox {
  overflow: hidden;
}
</style>

3.isWeixin与isIOS

/**
 * 是否是微信环境
 */
export const isWeixin = () => {
  let ua = navigator.userAgent.toLowerCase();
  if (ua.match(/MicroMessenger/i) == 'micromessenger') {
    return true;
  } else {
    return false;
  }
};

/**
 * 是否为IOS机型
 */
export const isIOS = () => {
  return !!window.navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
};

最终，这一大片绿色都是可点击的范围。大小控制可以在父级div中控制大小，然后给个
overflow: hidden;
这里我隐藏了文字，用的font-size: 0;
最终要隐藏这一块，用visibility: hidden;
样式改改就行。用官方标准的方式写。
weixin-js-sdk用最新版的，目前是1.6的版本，项目里安装install一下就好。

最终测试

需要通过扫码、或分享的方式打开才有效，链接方式打开不生效。
最简单的就是，通过微信开发工具的右上角预览，用微信扫码测试

还有其他问题的话可以留言评论，大家一起和谐讨论。