微信外环境静态h5跳转小程序,如何传参?

文章来源:CSDN 发布日期:2024-04-18 分类:小程序博客 阅读( )

公司最近提了一个不常见的需求,就是在微信外环境静态h5跳转小程序并且还要传参,在查阅了大量资料后成功解决。

官网地址  静态网站 H5 跳小程序

一,环境准备

1.开通微信云开发和静态网站

点击微信开发者工具中的云开发

.

 现在是可以免费体验1个月,开通后进入云开发控制台点击更多-静态网站,直接点击开通,等初始化,可能需要点时间。

2.打开权限设置

点击设置-权限设置,把红框里面的那个勾上

 二,创建云开发小程序

1.创建

点击微信开发工具左上角【项目】-【新建项目】,后端服务选择微信云开发,AppId记得填开通了云开发小程序的AppId

 

创建成功后项目文件因该长这样

2.设置云开发环境

在cloudfunctions 目录上边单击鼠标右键,设置当前环境,选择前边创建的云环境

 

 3.创建云函数

官网云函数pubilc:点击下载

 下载后目录应该是这个样子

 打开h5-open-miniprogram-cloudfunctions文件夹,将里面的public文件夹复制到云开发小程序中的 cloudfunctions 目录下。

 

 

 4.修改跳转小程序路径和传参

编辑 public/index.js 文件,将 getUrlscheme函数中的path改成要调起小程序的页面路径

 传参的话要注意两个地方,这两个地方一定要传参和接受参数

 5.安装依赖

鼠标放到public目录上,单击鼠标右键,快捷菜单选中"在内建终端中打开",然后运行 npm install 安装依赖

 6.上传部署云函数

7.修改云函数权限

点击云开发控制台,云函数-云函数权限-修改-允许所有用户访问

 8.编写及上传h5静态页面到云开发环境

在之前下载的官网云函数pubilc中,找到这HTML文件

 在这个html文件中写一个方法来获取路由上的传参

 let id = 0    //获取路由参数    function GetQueryString(name) {      let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')      let r = window.location.search.substr(1).match(reg) // search,查询?后面的参数,并匹配正则      if (r != null) {        return unescape(r[2])      }      return null    }    id = GetQueryString('id')//这个地方你连接后传参名是什么就传什么。例:www.baidu.com?id=123,所以我这里是id

需要修改的地方就只有这几处

 

 云环境Id在这个地方

 

 

 9.上传h5页面到云开发环境

 云开发控制台——更多——静态网站——文件管理,点击上传文件,选择上边改好的h5页面即可

 10.访问

H5上传成功后在这个地方复制域名到其它浏览器测试跳转

 三、小程序接收传参

 

最新文章:

二维码