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

这篇具有很好参考价值的文章主要介绍了微信外环境静态h5跳转小程序,如何传参?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

一,环境准备

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

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

.h5跳转小程序携带参数,微信,小程序

 现在是可以免费体验1个月,开通后进入云开发控制台点击更多-静态网站,直接点击开通,等初始化,可能需要点时间。h5跳转小程序携带参数,微信,小程序

2.打开权限设置

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

h5跳转小程序携带参数,微信,小程序

 二,创建云开发小程序

1.创建

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

h5跳转小程序携带参数,微信,小程序

 文章来源地址https://www.toymoban.com/news/detail-797865.html

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

h5跳转小程序携带参数,微信,小程序

2.设置云开发环境

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

 h5跳转小程序携带参数,微信,小程序

 3.创建云函数

官网云函数pubilc:点击下载

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

h5跳转小程序携带参数,微信,小程序

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

 h5跳转小程序携带参数,微信,小程序

 h5跳转小程序携带参数,微信,小程序

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

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

h5跳转小程序携带参数,微信,小程序

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

h5跳转小程序携带参数,微信,小程序

 5.安装依赖

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

h5跳转小程序携带参数,微信,小程序

 6.上传部署云函数

h5跳转小程序携带参数,微信,小程序

7.修改云函数权限

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

h5跳转小程序携带参数,微信,小程序

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

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

h5跳转小程序携带参数,微信,小程序

 在这个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

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

h5跳转小程序携带参数,微信,小程序

 h5跳转小程序携带参数,微信,小程序

 云环境Id在这个地方

h5跳转小程序携带参数,微信,小程序

 h5跳转小程序携带参数,微信,小程序

 h5跳转小程序携带参数,微信,小程序

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

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

h5跳转小程序携带参数,微信,小程序

 10.访问

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

h5跳转小程序携带参数,微信,小程序

 三、小程序接收传参

h5跳转小程序携带参数,微信,小程序

 

到了这里,关于微信外环境静态h5跳转小程序,如何传参?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信公众号H5跳转小程序,wx-open-launch-weapp

    直接上干货,不多哔哔~~ 注意事项 : 需要再公众号里面绑定需要跳转的小程序 获取 jssdk 配置的时候需要再公众平台绑定安全域名 微信版本要求为:7.0.12及以上。 系统版本要求为: iOS  10.3及以上、 Android 5.0及以上。 如若需要在微信的 wx-open-launch-weapp 添加 img 标签, img 的

    2024年02月02日
    浏览(35)
  • 微信h5跳转小程序wx-open-launch-weapp开放标签不显示(已解决)

    项目需要使用开放标签,按照各种博文上的各种解决方案都不显示, 我都服了,搞来搞去都没用。 最后我搞下来问题我都服了!!!!! 我下载的jweixin-1.6.0.js 不是 正确的 , 对你没看错,这个jssdk应该是我从某个项目里复制出来的 所以遇到不显示的问题没办法解决就需要

    2024年02月13日
    浏览(31)
  • 微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

    微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数) 微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新) 微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度

    2024年02月04日
    浏览(42)
  • 微信公众号自动回复消息如何跳转小程序?

    微信公众号自动回复如何显示小程序并且支持跳转到小程序? 比如像这样 其实上也很简单,只需要一串代码即可实现。 微信公众号自动回复消息如何跳转小程序? 这样就行了。 其实就是一个类似于超链接的东西,只不过是需要几个特性的属性 data-miniprogram-appid=“wx2b38b5a0

    2024年02月07日
    浏览(35)
  • 外部h5跳转小程序页面传递参数

    h5页面传递参数:h5页面的参数是点击进入该页面利用api直接获取code跟click_id。 跳转方法一:  利用写好的接口将获取到的小程序码添加到a标签的路径进行跳转  跳转方法二: 利用接口跳转至对应的小程序    小程序接收h5传过来的数据:在app.js中,利用onLaunch生命周期获取

    2024年02月16日
    浏览(26)
  • H5跳转小程序的方案及适用场景

    1、通过 URL Scheme 适用场景 适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景(第三方普通浏览器跳转小程序) 获取方法:通过后端服务器生产 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html 使用URL Scheme注意事项 a、有实效性 b、一条scheme只针

    2024年02月11日
    浏览(38)
  • flutter App如何跳转小程序如何调用微信sdk(ios/andriod)

            实不相瞒,这一块着实耗费了我很大的时间,因为没有太多ios和andriod原生开发的知识储备,在很多方面就会踩不少坑,这里总结几种app跳转微信小程序的方式 第一种方案:使用明文URL Scheme 这是最简单!不需要太多配置的方式!但是这里有一个坑就是对于ios是无痛拉

    2024年03月14日
    浏览(45)
  • h5页面跳转小程序-----明文URL Scheme

         1.1  登录微信公众平台      1.2  设置 - 基本设置 - 隐私与安全 - 明文scheme拉起此小程序 - 配置          1.3  进入配置后,在里面配置允许通过scheme URL进入的小程序路径 ps:多个路径用分号隔开,且路径必须在小程序正式版存在 否则会报: 小程序path格式不对,请填

    2024年03月26日
    浏览(47)
  • H5页面跳转小程序的三种方式

    实际开发中,小程序和H5往往有很多业务场景需要来回跳转,这里主要介绍三种跳转方式供大家参考。 场景:微信小程序登录有时候需要和公众号进行绑定,获取公众号code和appid传给后台进行绑定 该接口用于获取小程序 scheme 码,适用于短信、邮件、外部网页、微信内等拉起

    2024年01月25日
    浏览(51)
  • H5跳转小程序 (wx-open-launch-weapp开放性标签跳转)

    最近公司有一个新的业务需求,企微分享卡片到企微、企微分享卡券到微信,点击领取、打开小程序进行领取。 企微好像不可以直接跳转微信小程序,没有这样的接口,所以只能想另一种方法实现跳转,通过H5跳转微信小程序      我是V2的写法 这是第一次写这种需求,脑袋

    2024年02月12日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包