微信外H5唤起小程序-携带参数（二）

前端

2023-11-02 10:02:14

创建小程序与页面设置

首先，在微信开发者工具中创建一个小程序项目，并确保在项目中有需要跳转的页面。为了测试目的，可以添加名为testPage的新页面到你的小程序中。

获取小程序AppID

获取目标小程序（例如“微信读书”）的AppID是关键步骤之一。这一步通常由开发团队中的指定人员负责，确保安全地保管和使用这些敏感信息。

编写H5跳转代码

接下来，在HTML文件中编写代码以实现从H5页面唤起小程序的功能，并携带参数。这里需要使用wx.miniProgram.navigateTo()方法来调用微信小程序的接口。

示例代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>测试唤起小程序</title>
</head>
<body>
    <button onclick="navigateToMiniProgram()">跳转到小程序</button>

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
function navigateToMiniProgram() {
    // 小程序AppID
    const appId = 'wx8bd49d2b37f9e885';  // 示例AppId，需要替换为实际值
    
    // 携带参数
    var extraData = {key1: "value1", key2: "value2"};

    wx.miniProgram.navigateTo({
        appId,
        path: 'pages/testPage/index?param=value', // 小程序页面路径及参数
        success(res) {
            console.log('成功唤起小程序');
        },
        fail(err) {
            console.error('失败原因：', err);
        }
    });
}
</script>
</body>
</html>