微信中H5页面唤起 APP方案_直接打开appStore

更新日期: 2023-01-08阅读: 320标签: 微信

wx-open-H5网页在微信上是无法直接打开app链接的,需要使用微信开放标签wx-open-launch-app,它主要用于微信H5网页唤醒app,该标签只有在微信中才会显示。下面由“fly63前端网”为大家整理记录使用wx-open-launch-app跳转app的历程,方便大家以后查阅和参考。


步骤一:域名和应用Appid的绑定

绑定H5域名:登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

关联移动应用:移动应用Appid在开放平台管理中心/移动应用中,根据自己的应用进行选择;开放平台绑定的每个移动应用都有一个AppID。需要注意的是:目前安全域名只绑定了一个移动应用。

关于微信外部链接内容管理规范的声明:点击查看


步骤二、获取签名

获取签名这一块由后端的同事来完成,原因很简单,因为获取access_token要的ip必须加入服务号的ip白名单中,而我们本地的IP不是固定的

官网文档:后端获取签名方式

调用这个接口我们会获取到如下参数appId、timestamp、nonceStr、signature。


步骤三、前端引入微信的jssdk

网页中需要引入weixin.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.j"></script>

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)

当然也支持npm的方式安装:

npm install weixin-js-sdk

引入:

import wx from 'weixin-js-sdk'


步骤四、前端完整示例

<wx-open-launch-app id="openApp" appid="xxx" extinfo="">
<!-- template为必选项 -->
<template>
<!-- 样式写在了template中的style里才生效哦 -->
<style>
.wx-btn{
width:100%;
color: #666;
}
</style>
<button>App内查看</button>
</template>
</wx-open-launch-app>

<script>
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开
appId: '', // 必填,开发者ID
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: ["onMenuShareAppMessage"], // 必填,需要使用的JS接口列表
openTagList: ['wx-open-launch-app'] // 可选,需要使用的开放标签列表
});
wx.ready(() => {
console.log("ready")
})
wx.error(() => {
console.log("error")
})
var btn = document.getElementById('openApp');
btn.addEventListener('launch', () => {
console.log('success');
});
btn.addEventListener('error', (e) => {
console.log('fail', e.detail);
});
</script>

说明:

config的appId为开发者ID是公众号的获取的。wx-open-launch-app标签里的appid为步骤一里配置的移动应用Appid(不要跟wx.config里面的appid弄混了)。 

标签里的extinfo通常传入的是一个url,用来打开指定的页面,这里有一点需要注意的是,我们应使用一个自定义的scheme,否则我们在打开App 的过程中会出现一个选取浏览器的过程。

关于标签的样式问题:

1. wx-open-launch-app 这个标签可以加样式style
2. wx-open-launch-app 标签外部样式和内部样式是隔离的

在开发中,我们需要判断是否是微信环境,根据环境不同做相应的处理,判断微信的方法:

is_weixn() {
let ua = navigator.userAgent.toLowerCase()
if (ua.match(/MicroMessenger/i) == 'micromessenger') {
return true
} else {
return false
}
}


关于未成功唤醒App

当我们完成上述工作之后,准备唤起我们的app的时候,发现居然不好使!!

你遇见的问题可能是这样的:

1. IOS能成功唤起,Android无法唤起
2. Android在后台运行时,能成功唤起app,当结束app进程时,无法唤起
3. Android唤起app之后,出现一层蒙版导致无法点击

出现这一系列问题,大概率是SDK关于Android和IOS的接入配置有问题。参考以下文档

IOS接入指南
Android接入指南


总结

  • 配置需严格按照文档,wx.config调用时,jsApiList必须传入至少一项Api,不能只传openTagList。
  • 外部样式无法影响标签内样式,因为template下生成了document-fragment单独的doc,样式已于外界隔离。
  • template样式无法使用position。
  • 标签本身可以设置样式,因此对其设置absolute,外部按正常方式写,只是样式多一个relative即可。
  • 内部高度无法使用百分比,需要传入真实高度,因此不适用不知道外部高度的场景。
  • 弹窗唤起后,不报错的情况下,点击允许和取消都会进入launch事件,按现在逻辑无法区分用户是点击的允许还是取消的。


链接: https://www.fly63.com/article/detial/12298

H5解决浏览器,微信背景的上下滑动问题,脱离窗口的js局部滚动解决方法

当我们使用手机浏览器或微信浏览器打开Html网页的时候,如果上下滑动页面,页面就会出现黑色的空白(如图所示)。那么如何解决滑动的时候如何避免出界,出现头部和底部的黑底?

js判断是否是微信浏览器方法总结【整理4种方式】

在实际开发中,我们需要知道当前的浏览器是微信内置的浏览器,那么如何判断呢?以下提示了四种方法,每一种都可以进行判断是否是微信浏览器。

用cookie解决新版微信中H5页面底部白条问题

实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。

微信JS支付代码 前端调用微信支付接口

跟大家分享一段微信支付的js代码片段、V3版的微信支付没有paySignKey参数、基本上是直接复制就可以使用了、改一改自己的参数就好了

H5微信JS-SDK实现分享朋友、朋友圈以及QQ自定义分享

先登录微信公众平台进入公众号设置的功能设置里填写JS接口域名,支持使用AMD/CMD标准加载方法,通过config接口注入权限验证配置,通过ready接口处理成功验证,通过error接口处理失败验证

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

解决微信公众平台网页授权两次或多次重定响应问题

在做微信公众平台网页授权时,发现每次请求授权链接时都会重定向链接redirect_uri都会自动请求两次,由于并发导致了一些问题,那么,为什么会请求两次呢?,调试时发现会访问两次,一次是301,页面重定向了,第二次跟第一次就差这个参数connect_redirect=1

微信跳转外部浏览器打开的代码实现

在我们做营销活动或推广宣传的时候,容易遇到域名被封,无法跳转app下载等情况。这时需要微信跳转外部浏览器打开页面的功能,目前ios只能通过遮罩层来提示用户,对于安卓可以直接跳转外面默认浏览器

微信投票找人拉票怎么算价格?微信买投票多少钱

首先大家为了取得一个良好的名次是可以理解的,但是需要合理的去操作,为什么这么说呢,如果你找到一个不负责的商家不给你控量,或者胡乱操作,往往无得其反,因小失大就不好,所以投票这个还是需要找一个专业的团队

微信已停止访问该网页解决方法分享

由于微信限制比较严格,域名一不小心就被判定是诱导分享的。所以,公司内部决定调研一套稳定、快速、正确率高的微信域名拦截检测查询接口。开发组尝试谷歌搜索了一段时间,发现很少把源码及原理分享出来的。后来我们摸索了几天

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!