关于H5拉起微信小程序

2,025 阅读1分钟

首先一张图看下,被跳转的小程序你能拿到哪些变量

云开发

没有实操过,但是官方文档写的很清楚
地址

Url Scheme

官方文档地址

注⚠️: 如果是在 app 中内嵌的 h5, 需要 app 支持跳转 weixin 协议

加密

最终跳转都是通过 weixin://dl/business/?t=xxx

<script>
import axios from 'axios'
// 获取access_token
axios
  .get(
    '/weixin/cgi-bin/token?grant_type=client_credential&appid=*你的小程序Appid*&secret=*你的小程序密钥*'
  )
  .then((res) => {
    // 获取openurl (data.openlink), 如果有获取 access_token 的接口,直接调这个就可以了
    axios
      .post(
        `/weixin/wxa/generatescheme?access_token=${res.data.access_token}`,
        {
          jump_wxa: {
            path: '*你要跳转的path*',
            ...其它参数
          },
          ...其它参数
        }
      )
      .then((urlData) => {
        console.log(urlData.data.openlink)
      })
  })
</script>

拿到 openlink 后,可以用 live server启动如下 HTML,访问测试。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script>
    window.location.href="*你得到的openlink*"
  </script>
</head>
<body>
</body>
</html>

注⚠️:获取access-token文档地址 获取加密scheme码官方文档地址

明文

测试 code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script>
    window.location.href="*weixin://dl/business/?appid=*APPID*&path=*PATH*&query=*QUERY*&env_version=*ENV_VERSION**"
  </script>
</head>
<body>
</body>
</html>