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

2024-06-02 05:20| 来源: 网络整理| 查看: 265

微信H5网页跳转app、小程序 wx-open-launch-app 实现跳转功能跳转后接参开放性标签的样式

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

实现跳转功能前提是你需要有一个***已认证的服务号***，然后绑定域名：登陆微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名” 【如果你仅需要跳转小程序，实用小程序云开发的静态网站托管绑定的域名下的网页，可以任意跳转合法的小程序】在页面中引入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'); 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需要额外的配置：

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

在这里插入图片描述此处绑定的移动应用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中一点一点的写样式。代码参考：

App打开小程序打开

【本文地址】

公司简介

联系我们