微信外H5页面中流畅实现小程序唤起

前端

2024-02-16 19:14:21

在当今移动互联网时代，微信小程序已经成为商家和企业开展营销活动的重要工具。然而，当用户在微信外访问H5页面时，如何流畅地唤起小程序却成了难题。

本文将详细介绍如何通过微信开发工具、云函数和静态网站实现微信外H5页面流畅唤起小程序的解决方案，并提供详细的步骤指导。

步骤一：微信开发工具

启用云开发

首先，您需要在微信开发工具中启用云开发功能。点击微信开发工具界面右上角的“云开发”按钮，然后选择“启用云开发”。

创建云环境，选择按量计费

在云开发面板中，点击“创建云环境”。在弹出的对话框中，选择“按量计费”选项，然后点击“创建”。

设置云函数权限，修改为允许所有用户访问

在云开发面板中，点击“云函数”选项。在云函数列表中，找到您需要使用的小程序云函数，然后点击“编辑”。

在云函数编辑页面中，找到“权限设置”选项卡。将“允许所有用户访问”选项勾选，然后点击“保存”。

开通静态网站服务

在微信开发工具中，点击“静态网站”选项。在静态网站面板中，点击“开通静态网站服务”。

在弹出的对话框中，选择您需要使用的云环境，然后点击“开通”。

步骤二：H5页面代码修改

引入微信JS SDK

在H5页面的<head>标签中，引入微信JS SDK。

<script src="https://res.wx.qq.com/open/js/jweixin-1.4.2.js"></script>

初始化微信JS SDK

在H5页面<body>标签的开头，初始化微信JS SDK。

wx.config({
  debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: 'YOUR_APP_ID', // 必填，公众号的唯一标识
  timestamp: timestamp, // 必填，生成签名的时间戳
  nonceStr: nonceStr, // 必填，生成签名的随机串
  signature: signature, // 必填，签名
  jsApiList: [
    'checkJsApi',
    'onMenuShareTimeline',
    'onMenuShareAppMessage',
    'onMenuShareQQ',
    'onMenuShareWeibo',
    'onMenuShareQZone',
    'hideMenuItems',
    'showMenuItems',
    'hideAllNonBaseMenuItem',
    'showAllNonBaseMenuItem',
    'translateVoice',
    'startRecord',
    'stopRecord',
    'onVoiceRecordEnd',
    'playVoice',
    'pauseVoice',
    'stopVoice',
    'onVoicePlayEnd',
    'uploadVoice',
    'downloadVoice',
    'chooseImage',
    'previewImage',
    'uploadImage',
    'downloadImage',
    'getNetworkType',
    'openLocation',
    'getLocation',
    'hideOptionMenu',
    'showOptionMenu',
    'closeWindow',
    'scanQRCode',
    'chooseWXPay',
    'openProductSpecificView',
    'addCard',
    'chooseCard',
    'openCard'
  ] // 必填，需要使用的JS接口列表
});

唤起小程序

当用户点击唤起小程序的按钮时，调用微信JS SDK的wx.miniProgram.navigateToMiniProgram()方法。

wx.miniProgram.navigateToMiniProgram({
  appId: 'YOUR_APP_ID', // 必填，小程序的唯一标识
  path: 'pages/index/index', // 可填，小程序的页面路径
  envVersion: 'develop', // 可填，开发版本，默认为 'develop'
  extraData: {}, // 可填，分享到其他小程序的附加数据
  success(res) {
    // 唤起成功
  },
  fail(err) {
    // 唤起失败
  }
});