手机浏览器H5打开微信小程序支付，自定义传参

微信官方提供的开放文档如下：

静态网站 H5 跳小程序 | 微信开放文档

想必大家都能看懂官网提供的文档，但实战时却遇到很多问题，博主总结一下遇到的坑，如果您也有遇到，希望可以帮到您。

1.小程序已经发布上线了，怎么实现跳转呢？怎么开通云开发呢？

2.H5页面如何传自定义参数给到小程序呢？

3.不需要开通静态网站功能，不需要绑定自定义域名就能实现自动跳转

最终实现效果：

H5打开微信小程序支付

第一步：开通微信云开发

没有开通云开发资源的小程序是没有图上这个文件夹的，不管你得小程序之前有没有上架过，都需要在小程序编辑器中新建一个开通云微信开发的小程序，创建方式如下图：

如果你之前已经上架过小程序，目录可以选择你之前的文件夹，后端服务选择“微信云开发”，模板选择“基础”的就行

 第二步：创建完之后，可以按照微信官方文档，通过云开发控制台新建云函数

1. 新建一个云函数，名为 public，然后将其 index.js 设为以下内容：
2. 在云开发控制台中的设置 -> 权限设置中，将对应开通了静态网站的云环境开启未登录模式访问
3. 在云开发控制台中的云函数 -> 权限设置中，配置安全规则，选择 “允许所有用户访问” 的模板并确认。如果需要更安全的控制，即只让 public 函数开启未登录访问，可参见底部安全规则模板

只需要保留public函数，其他函数可以删除（小程序如果自带其他云函数业务可自行保留） 

创建完之后，在微信编辑器中修改云函数public中index.js的代码（加多了页面参数的传递）

 index.js代码如下：

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {const wxContext = cloud.getWXContext()switch (event.action) {case 'getUrlScheme': {return getUrlScheme(event.options)//与官方文档区别：小程序页面接受的参数}}return 'action not found'
}
async function getUrlScheme(options) {//return options;return cloud.openapi.urlscheme.generate({jumpWxa: {path: '/pages/pay/pay', // 调转到小程序要打开的页面路径，根据实际业务设置query: options,//与官方文档区别：小程序页面接受的参数},// 如果想不过期则置为 false，并可以存到数据库isExpire: false,// 一分钟有效期expireTime: parseInt(Date.now() / 1000 + 60),})
}

 云函数修改完之后记得public右键选择：创建并部署：云端安装依赖（不上传node_modules） 

第三步：小程序内部页面设置

外部链接打开小程指定页面，根据实际业务进行设置，我这里设置了支付页面，小程序代码可参考博主之前的文章：微信H5页面实现微信小程序支付_小程序嵌套h5页面调起支付_我是小木木的博客-CSDN博客

 第四步：H5前端页面设置

只需要在页面加上以下代码即可，页面js调用openWeapp方法，传相应的支付金额即可。

<!-- 云开发 Web SDK -->
<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script><script>var c = new cloud.Cloud({// 必填，表示是未登录模式identityless: true,// 资源方小程序 AppIDresourceAppid: 'wx6aXX',  // 资源方环境 IDresourceEnv: 'XXXXXXX',  })c.init();window.c = c//需要延迟加载，要使用async	async function openWeapp(amount) {var c = window.cconst res = await c.callFunction({name: 'public',data: {action: 'getUrlScheme',options:'amount='+amount},})location.href = res.result.openlink;}</script>