微信外部浏览器唤起微信小程序
目的:通过发送短信召回流失用户。
官方文档地址
步骤一
- 该API我们主要用到的配置如下:
- jump_wxa:跳转到的目标小程序信息。该对象内包含两个字段。
- path:通过scheme码进入的小程序页面路径,必须是已经发布的小程序存在的页面,不可携带query
- query:通过scheme码进入小程序时的query。
步骤二
- 需要注意的是,query必传,然而如果我们需要跳转的页面不需要参数,也需要配置上query,默认我们填写的是from=sms, 用于统计是从浏览器渠道来的。
步骤三
- 与后端约定access_token 通过前端传递appKey进行区分,传哪个微信小程序的appKey 就生成对应小程序的access_token。
步骤四
- 支持设置scheme的过期时间,默认永久,我们的应用场景很少,暂不详说。
步骤五
- 代码里操作如下,由后端聚合参数信息。
let postData = {
appKey: 'QTSHE_MINI_APP',
path: 'pages/partdetails/partdetails',
query: 'partJobId=123456' || 'a=1'
}
this.$axios.post('/qtsWeChat/wechat/qrCode/scheme/info', postData).then((res) => {
if (res.success) {
const url = res.data.openlink
// 将scheme转为我们平台的短链接,否则在安卓手机上无法打开微信小程序,会默认打开浏览器搜索。
this.$axios.get(`/misc/shortLink/conversion`, {url}).then((res) => {
if (res.success) {
this.shortLink = res.data
}
})
} else {
this.$Message.error('获取失败,请稍后重试')
}
}).catch((err) => {
console.log(err)
})
注意点
- 该链接只支持在外部浏览器打开,微信内部浏览器访问是无法打开的,微信内部浏览器打开需要使用微信的开放标签<wx-open-launch-weapp>,下面详说。
微信内部浏览器唤起小程序
官方文档地址
步骤一
- 首先需要登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”,该域名我们配置的是https://m.qtshe.com, 所以导致我们调试的时候需要每次都发布到线上看效果(大坑)。
步骤二
- 在需要调用JS接口的页面引入如下JS文件:https://res.wx.qq.com/open/js/jweixin-1.6.0.js,1.6.0版本内才增加了上述标签,低于该版本的都无法显示。
步骤三
- 通过config接口注入权限验证配置并申请所需开放标签, 在wx.config里增加openTagList标签,内置两个开放标签
wx-open-launch-app
微信h5唤起本地已经安装的app,以及wx-open-launch-weapp
微信h5唤起小程序,操作如下:
window.wx.config({
debug: false,
appId: window.g_info.wx_appid,
timestamp: data.data.timestamp,
nonceStr: data.data.nonceStr,
signature: data.data.signature,
jsApiList: [],
openTagList: [
'wx-open-launch-app',
'wx-open-launch-weapp'
]
})
注意点
- 对于Vue等视图框架,为了避免template标签冲突的问题,可使用
<script type="text/wxtag-template"></script>
进行代替,来包裹插槽模版和样式。 - 页面中与布局和定位相关的样式,如
position: fixed; top -100;
等,尽量不要写在插槽模版的节点中,请声明在标签或其父节点上; - 对于有CSP要求的页面,需要添加白名单
frame-src https://*.qq.com webcompt:
,才能在页面中正常使用开放标签。 - Vue里操作代码如下,如果需要写样式,最好是外部包一个div进行样式编写,内部的内容宽高100%即可,调试样式可使用微信开发者工具的网页模式:
<style>
img {
width: 100%;
display: block;
}
</style><img src="
https://qiniu-image.qtshe.com/20220317quick-apply.png" alt="" />
示例效果
扩展
// 各个端口跳转兼职详情页
jumpToPartJobDetail(partJobId) {
util.isAliMiniApp().then((res) => {
if (res) { // 如果是在支付宝小程序环境则打开小程序详情页
my.navigateTo({
url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
})
} else {
// 如果是在客户端app环境,则打开原生岗位详情页
if (util.isAndroidApp() || util.isIosApp()) {
jsBridge.evokeNormalPartJobDetailPage(partJobId)
} else if (util.isMiniApp()) { // 微信小程序里则打开微信小程序岗位详情
wx.miniProgram.navigateTo({
url: `/pages/partdetails/partdetails?partJobId=${partJobId}`
})
} else if (util.isMobile()) {
// 如果是在手机自带浏览器或者除微信外的app浏览器,统一打开支付宝小程序
let url = `alipays://platformapi/startapp?appId=2018082861168647&page=pages/partdetails/partdetails&query=partJobId%3D${partJobId}`
window.location.href = `https://ds.alipay.com/?scheme=${encodeURIComponent(url)}`
} else { // pc端打开h5的兼职详情页
window.location.href = `/app/partdetails?partJobId=${partJobId}`
}
}
})
}
具体示例
为了方便运营同学,做了个工具给他们使用。
4.11号新版本后的改版方案:
首先做一个落地页:https://b.qtshe.com/1DF43E
代码如下:
import toast from 'toast'
export default {
created() {
this.init()
},
methods: {
// 获取微信scheme地址,并且主动跳转一次
init() {
this.$axios.post(`https://xxx/你们的接口地址/user/device/scheme`, this.$route.query).then(res => {
if (res.success) {
window.location.href = res.data
} else {
toast(res.msg)
}
}).catch(() => {
toast('服务器错误,请稍后重试')
})
}
}
}
原理:通过地址栏配置需要跳转的参数,h5页面拿到参数后通过接口转换为weixin://xxxx 开头的scheme协议地址,并且主动location.href一次。这样能保证用户每次打开都是新的scheme地址,针对一天50w数量上限的问题,可尝试同一个用户在固定时间内相同的参数,返回相同的scheme地址。
以上限制只存在于除微信外的外部浏览器,微信容器里没有以上的限制。
老哥,太厉害了啊,同一个scheme url,我用安卓系统,无论是浏览器还是h5页面,死活打不开小程序,在苹果下直接就可以打开。一直纳闷,没人说问题所在,直到老哥你这句“需要注意的是,query必传”,然后就随便传了个“a=1”,果然就可以了。。。。多谢老哥!!
请问楼主,我看文档说的需要绑定服务号,我没有这种微信服务号。我只想在我自己写的个人网页里能跳转到别人的小程序,这种需求可以实现吗,别人的小程序也不会提供技术支持。
感谢分享,给你点赞~
请问大佬 微信外部浏览器打开小程序 jumpWxa下的query参数 这样传的话 hid=123, 已经在对应的页面的onLoad方法中通过options.hid做了处理,还需要针对这个跳转做特殊处理么?
我是做app分享,图文分享到朋友圈一个h5链接,点击链接想打开小程序对应的页面,用了window.location.href跳转明文URLScheme,这个方法在微信环境下h5跳转不到小程序,在外部浏览器可以。怎么实现我需要的功能啊,大佬,球球惹
请问楼主,我们有个需求是很多不同的用户从其它平台app跳转到我们公共的一个H5页面(外部网页),然后我们需要在这个网页唤起用户填写的不同appid的微信小程序,目前除了使用云开发静态网页托管的方式,请问还有什么方式吗,我看了云开发这个是需要收费的。
请问大佬具体如何添加白名单
frame-src https://*.qq.com webcompt:
请问能在支付小程序的webview环境里打开微信小程序吗?
// 支付宝小程序内打开微信小程序
let path = `https://render.alipay.com/p/s/i/?appId=20000067&url=${encodeURIComponent('https://ds.alipay.com/error/redirectLink.htm?url=weixin:// 微信的scheme地址')}`
my.ap.navigateToAlipayPage({
path
})
// 支付宝小程序内h5打开微信小程序。
window.location.replace(`alipays://platformapi/startapp?appId=10000007&clientVersion=3.7.0.0718&qrcode=${encodeURIComponent('https://ds.alipay.com/error/redirectLink.htm?url=weixin:// 微信的scheme地址')}`)
大佬 请教一下 微信浏览器打开的h5页面能不能唤起第三方的小程序?
第三方小程序也不会提供任何支持
你好,请问微信外环境可以打开第三方小程序吗?