静态网站H5与微信小程序交互

阅读数: 次 2024-06-29

文章导航

📱💬🖥️

引言

什么是微信小程序？

微信小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。同时，它也具备了传统APP的功能，如消息通知、离线缓存等。

为什么需要从H5跳转到微信小程序？

在移动互联网时代，小程序的使用场景越来越广泛，而H5页面作为传统的网页形式，其功能和体验相较于小程序有所不足。因此，从H5页面跳转到微信小程序，可以为用户提供更好的服务和体验。

一、静态H5网站跳转到微信小程序

H5跳转到微信小程序

首先，我们需要在H5页面中添加一个跳转按钮，当用户点击该按钮时，触发跳转事件。

1	<button id="jumpToMiniProgram">跳转到微信小程序</button>

接下来，我们需要编写JavaScript代码，监听按钮的点击事件，并在点击事件中实现跳转逻辑。

1
2
3

document.getElementById('jumpToMiniProgram').addEventListener('click', function() {
  // 跳转到微信小程序的逻辑
});

在跳转逻辑中，我们需要使用微信小程序的scheme协议来实现跳转。具体实现如下：

function jumpToMiniProgram() {
  var appId = 'wx1234567890abcdef'; // 替换为你的小程序appId
  var path = 'pages/index/index'; // 替换为你的小程序页面路径
  var extraData = {
    foo: 'bar' // 携带的参数
  };
  var envVersion = 'release'; // 可选值：develop（开发版）、trial（体验版）、release（正式版）
  var href = `weixin://dl/${appId}?type=view&env_version=${envVersion}&page=${path}&extra_data=${JSON.stringify(extraData)}`;
  window.location.href = href;
}

最后，将上述代码添加到H5页面中，即可实现从H5页面跳转到微信小程序并携带参数的功能。

总结：通过以上步骤，我们可以实现从静态H5网站跳转到微信小程序并携带参数的功能。这不仅可以提高用户体验，还可以为用户提供更便捷的服务。希望本文对您有所帮助！

二、静态H5网站调用微信云函数

在现代Web开发中，云函数已经成为了一种非常流行的服务，它允许开发者在云端运行代码，而无需关心底层基础设施。微信云函数是腾讯云提供的一种云函数服务，它允许开发者在微信环境中运行代码。本文将介绍如何在静态H5网站上调用微信云函数。

准备工作

首先，你需要有一个微信公众号，并开通微信云开发环境。然后，你需要安装微信开发者工具，用于创建使用你的云函数。

创建云函数

在微信开发者工具中，选择“云开发”选项卡，然后点击“新建云函数”。输入函数名，例如“helloWorld”，并选择运行环境（如Node.js）。接下来，编写一个简单的云函数，如下所示：

// 云函数入口文件
const cloud = require('wx-server-sdk');

cloud.init({ env: '' }); // 使用当前云环境
//初始化云函数
const db = cloud.database();

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext();
  return {
    message: 'Hello World'
  }
}

部署云函数

保存云函数后，点击“上传并部署”按钮，等待部署完成。

在H5网站中调用云函数

在你的H5网站中，你可以使用wx.cloud.callFunction方法来调用云函数。首先，确保你已经引入了微信JS-SDK。然后，编写如下代码：

<script src="https://web-9gikcbug35bad3a8-1304825656.tcloudbaseapp.com/sdk/1.3.0/cloud.js"></script>


// 声明新的 cloud 实例
var c1 = new this.cloud.Cloud({
    // 必填，表示是未登录模式
    identityless: true,
    // 资源方 AppID
    resourceAppid: '',
    // 资源方环境 ID
    resourceEnv: '',
})

//初始化
await c1.init();
// 初始化执行完再调用
// 完成后正常使用资源方的已授权的云资源
c1.callFunction({
    name: 'helloWorld',
    success: res => {
		console.log('云函数调用成功', res)
    },
    fail: err => {
    	console.error('云函数调用失败', err)
    }
})