前端---H5唤醒微信小程序

柔光的暖阳◎ 2022-09-03 01:18 495阅读 0赞

前言：

H5唤醒小程序目前有两种方式。本篇博客研究的是H5通过获取URL Scheme打开小程序。此种方式的思路：先通过小程序的appid和secret(小程序密钥)调接口获取一个token。再通过token去调另一个接口获取URL Scheme。最后打开URL Scheme即唤醒小程序。

官方API参考：

[        ][Link 1][获取Token][Link 1]    [获取urlscheme][urlscheme]

其他文章参考：

[唤醒小程序][Link 2]

我成功实例的代码(需要自己解决跨域问题，可参考我的[这篇博客][Link 3])：

const appid = '' // appid
    const secret = '' // secret
    const granttype = 'client_credential' // 固定值
    
    // 获取Token
    axios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=${granttype}&appid=${appid}&secret=${secret}`).then(res => {
        // 获取 urlscheme
        axios.post(`https://api.weixin.qq.com/wxa/generatescheme?access_token=${(res.data as { 'access_token': string }).access_token}`, {
            jump_wxa: {
                path: 'pages/home/home'
            }
        }).then(response => {
            // 唤醒小程序
            window.open((response.data as { 'openlink': string }).openlink) // weixin://xxxxxxxxx
        }).catch(() => { /* */ })
    }).catch(() => { /* */ })

最终效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70][]

踩坑：

第二步生成urlscheme时，必须填写path参数，即唤醒小程序要跳转的页面。

H5唤醒小程序只支持企业小程序，个人小程序无权限生成urlscheme。

H5唤醒小程序只能在微信端打开，因为生成的urlscheme是微信生态中的连接。

调接口过程最好也有必要做在服务端，一是为了安全，二是调接口时的跨域问题。

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/access-token/auth.getAccessToken.html
[urlscheme]: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html#method-http
[Link 2]: https://mp.weixin.qq.com/s/ikaBgTnZ6e0IrQTCBQqbLQ
[Link 3]: https://blog.csdn.net/qq_39115469/article/details/108391387
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MTE1NDY5_size_16_color_FFFFFF_t_70]: /images/20220829/e81a2baf4a834117b854b20ad951472d.png