太原零元网站建设,包装设计报价明细,东莞设计网站建设方案,长沙竞价优化微信官方提供的开放文档如下#xff1a;
静态网站 H5 跳小程序 | 微信开放文档
想必大家都能看懂官网提供的文档#xff0c;但实战时却遇到很多问题#xff0c;博主总结一下遇到的坑#xff0c;如果您也有遇到#xff0c;希望可以帮到您。
1.小程序已经发布上线了…微信官方提供的开放文档如下
静态网站 H5 跳小程序 | 微信开放文档
想必大家都能看懂官网提供的文档但实战时却遇到很多问题博主总结一下遇到的坑如果您也有遇到希望可以帮到您。
1.小程序已经发布上线了怎么实现跳转呢怎么开通云开发呢
2.H5页面如何传自定义参数给到小程序呢
3.不需要开通静态网站功能不需要绑定自定义域名就能实现自动跳转
最终实现效果 H5打开微信小程序支付 第一步开通微信云开发 没有开通云开发资源的小程序是没有图上这个文件夹的不管你得小程序之前有没有上架过都需要在小程序编辑器中新建一个开通云微信开发的小程序创建方式如下图 如果你之前已经上架过小程序目录可以选择你之前的文件夹后端服务选择“微信云开发”模板选择“基础”的就行 第二步创建完之后可以按照微信官方文档通过云开发控制台新建云函数
新建一个云函数名为 public然后将其 index.js 设为以下内容在云开发控制台中的设置 - 权限设置中将对应开通了静态网站的云环境开启未登录模式访问在云开发控制台中的云函数 - 权限设置中配置安全规则选择 “允许所有用户访问” 的模板并确认。如果需要更安全的控制即只让 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 srchttps://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js/scriptscriptvar 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:amountamount},})location.href res.result.openlink;}/script
