微信H5网页跳转app、小程序

最近公司需要开发一个微信H5页面，页面中需要跳转小程序和app。整个过程可谓是举步维艰【捂脸.jpg】。
首先，想要跳转app和小程序，都需要使用微信的开放性标签
要想让这个开放性标签实现需求，主要分为三大块：标签可以实现跳转功能、跳转后客户端可以接到参数、标签的样式。下面从这三个方面说一说我踩过的坑…

实现跳转功能

1. 前提是你需要有一个***已认证的服务号***，然后绑定域名：登陆微信公众平台
   进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
   【如果你仅需要跳转小程序，实用小程序云开发的静态网站托管绑定的域名下的网页，可以任意跳转合法的小程序】
2. 在页面中引入js文件。

• 常规页面直接用script标签或者模块加载的方式引入http://res.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）或者http://res2.wx.qq.com/open/js/jweixin-1.6.0.js （支持https）*
• vue项目

npm install jweixin-module --save
 然后在直接在需要的页面引入即可：
 const wx = require('jweixin-module');

3. api鉴权
   只有在第一步配置的js安全域名下的页面，才可以鉴权成功，然后开放性标签才会生效。
   方式：

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [], // 必填，需要使用的JS接口列表
  openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'，'wx-open-launch-weapp']
});
然后通过接口处理成功或者失败的情况
wx.ready(function () {
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
wx.error(function (res) {
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});

到此为止，如果你仅需要跳转小程序，那么你的配置已经完成了。但是如果你需要跳转app，那么好戏登场了
想要跳转app需要额外的配置：

1. 首先你需要有已认证的微信开放平台账号，开放平台和第一步绑定的服务号是同主体（同一个企业的）
2. 登录 微信开放平台
   前往 微信开放平台-管理中心-公众号详情-接口信息 设置域名与所需跳转的移动应用。

此处绑定的移动应用ID，需要到“微信开放平台-管理中心-移动应用-查看“页面中复制对应的appid，如果不是同一开放平台账号下审核通过的应用，也是不可以跳转的。一个域名只能绑定一个应用。
这里还有一个坑，微信文档中未说明，就是这里绑定的域名，只能是二级域名，也就是www.abc.com类似这种，不能是www.abc.com/def/，这种大概率会报错“isTrusted: false”.

跳转后接参

跳转小程序没有什么坑，很顺利。
跳转app的话，移动端需要接入sdk，官方文档在这里
成功接入后，跳转安卓app也很顺利。跳转ios可太坑了，ios接入sdk官方文档中是这么说的：

文档中说只要重写 handleOpenURL 和 openURL 方法，但这个文档好像仅适用于微信登录等其他的情况，如果是微信网页唤起app，此时需要重写handleOpenContext方法才行！！！
到这里，已经可以成功接入SDK了，接收参数参考这里就可以了https://developers.weixin.qq.com/doc/oplatform/Mobile_App/WeChat_H5_Launch_APP.html

开放性标签的样式

这里也是很麻烦的地方，如果你的UI样式 是需要一个大按钮，那还可以，直接设置一个很大的区域盖住开放性标签，但是我的UI要求是两个并排的按钮，一个用来跳转app，一个用来跳转小程序。
这种情况只能在style中一点一点的写样式。
代码参考：

<view class="btn-confirm-fixed flex-between full-width" >
			<view class="flex-center"
				style="margin-left: 30rpx;width: 280rpx;background-color: #DEDFE9;height:110rpx;font-size: 34rpx;border-radius: 40rpx;">
				<wx-open-launch-app id="launch-app-btn" appid="wx123" style="display: block;"
					:extinfo="extinfo">
					<script type="text/wxtag-template">
						<div style="color: #3B3E5C;font-weight:bold;height: 100%;width: 100%;">App打开</div>
				  </script>
				</wx-open-launch-app>
			</view>
			<view class="flex-center"
				style="margin-right: 30rpx;width: 300rpx;background-color: #3B3E5C;height:110rpx;font-size: 34rpx;border-radius: 40rpx;box-shadow: 0 0 30rpx 0 rgba(59, 62, 92, 0.4);">
				<wx-open-launch-weapp id="launch-weapp-btn" username="gh_123" style="display: block;"
					:path="weappPath">
					<script type="text/wxtag-template">
						<div style="color: #ffffff;font-weight:bold;height: 100%;width: 100%;">小程序打开</div>
					 </script>
				</wx-open-launch-weapp>
			</view>
		</view>