使用wx-open-launch-app跳转app踩坑历程

前言
准备工作
开始开发
- 获取签名
- config配置
参考

前言

记录自己使用wx-open-launch-app跳转app踩坑历程，方便自己以后查阅，每个人际遇不一样，分享出来仅共大家参考。
Android版本：11
微信版本：8.0.10

准备工作

已认证的服务号

公众号右上角可查看自己的是否认证，不过我们这个它不是没有认证成功，是因为咱们的名字里有视频两个字所以他的状态显示未认证而已，实际上是认证完了的。如果自己不太确定可以问相关负责人。

已认证的开放平台账号

可在账号中心查看是否已认证

服务号与开放平台账号必须同主体

服务号可在公众号设置里查看主体，开放平台账号可在账号中心里查看主体

开放平台绑定服务号

在开放平台的管理中心/公众账号中查看

开放平台服务号设置网页跳转移动应用关联

在开放平台的管理中心/公众账号中点击查看进行操作

JS接口安全域名在服务号公众号设置/功能设置中
移动应用Appid在开放平台管理中心/移动应用中，根据自己的应用进行选择

这里额外说一下关于AppID的问题，开放平台绑定的每个移动应用都有一个AppID（为了方便后面的描述，这里我们把他叫做移动应用ID）,然后服务号那边有一个AppID（这里我们叫做开发者ID），千万不要把这两个搞混了！！！！我就吃过这个亏。。。。

确定安全域名只绑定了一个移动应用

开始开发

获取签名
获取签名这一块由后段的同事来完成，原因很简单，因为获取access_token要的ip必须加入服务号的ip白名单中，而我们本地的IP不是固定的。关于这一块，官方文档写的详细。
获取签名
调用这个接口我们会获取到如下参数appId、timestamp、nonceStr、signature

config配置
引入js文件—http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）

填写config配置

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开
appId: '', // 必填，开发者ID
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名
jsApiList: ["onMenuShareAppMessage"], // 必填，需要使用的JS接口列表, 我们这里填个这个就能唤起app了
openTagList: ['wx-open-launch-app'] // 可选，需要使用的开放标签列表
});

完整示例 ```html // 此处appID为应用ID！应用ID！应用ID！！！

关于 `extinfo` 通常传入的是一个url，用来打开指定的页面，这里有一点需要注意的是，我们应使用一个自定义的`scheme`，否则我们在打开App 的过程中会出现一个选取浏览器的过程<br />到了这一步，除了样式以外，前端的工作已经全部完成。<br />若进入调试页面弹窗{"errMsg":"config:ok"}，则说明没有问题了
<a name="CwPYS"></a>
## 关于未成功唤醒App
当我们完成上述工作之后，准备唤起我们的app的时候，发现居然不好使！！<br />你遇见的问题可能是这样的
1. IOS能成功唤起，Android无法唤起
1. Android在后台运行时，能成功唤起app，当结束app进程时，无法唤起
1. Android唤起app之后，出现一层蒙版导致无法点击
出现这一系列问题，大概率是SDK关于Android和IOS的接入配置有问题，找相关同事处理。参考以下文档<br />[IOS接入指南](https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/iOS.html)<br />[Android接入指南](https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Access_Guide/Android.html)<br />当然你也可以在[微信开放社区](https://developers.weixin.qq.com/community/homepage)里搜寻答案
<a name="hb4nd"></a>
## 样式设置
1. `wx-open-launch-app` 这个标签可以加样式style
1. `wx-open-launch-app` 标签外部样式和内部样式是隔离的
```html
<wx-open-launch-app id="openApp" appid="wxf192a1452e01ee9c">
  <template>
    <!-- 外部的样式无法作用到template内 -->
    <style>
      .btn{
        padding: 100px;
      }
    </style>
    <button class="btn">App内查看</button>
  </template>
</wx-open-launch-app>

参考

开放标签说明文档
 微信内网页跳转APP功能

前言

准备工作

开始开发

获取签名

config配置

参考