h5跳微信小程序流程实现——使用云函数,不开通静态网站

news/2024/5/8 20:08:37/文章来源:https://blog.csdn.net/weixin_44137575/article/details/115084730

官方开源库:

GitHub  TCloudBase/WXSEVER-SMS

参考教程:

https://developers.weixin.qq.com/community/develop/doc/000ae2a7a7c9402a4d8bca2875b409

此教程为官方提供,包含视频+文档

步骤:

1. 开通云开发

image.png

2. 新建云函数 openMini

image.png

3. 重新打开“微信开发者工具”,即会在项目工程中自动生成云函数目录

image.png

关于此云函数目录:

  • 文件夹上会有 云 logo
  • 文件名后会注明云开发环境
  • 右键会看到云操作项,可更改环境、同步云函数、部署云函数等

若未如愿生成云函数目录,有两种解决方案:

  • 可在 project.config.json 中添加 "cloudfunctionRoot": "cloudbase/"  // cloudbase是云函数目录名
  • 微信开发者工具版本过低,尝试升级

4. 云函数开发并部署

在 openMini 下创建俩文件 index.js  package.json

   index.js 内开发云函数

const cloud = require('wx-server-sdk')
cloud.init()exports.main = async (event, context) => {return cloud.openapi.urlscheme.generate({jumpWxa: {path: '', // 打开小程序时访问路径,为空则会进入主页query: '',// 可以使用 event 传入的数据制作特定参数,无需求则为空},isExpire: true, //是否到期失效,如果为true需要填写到期时间,默认falseexpire_time: Math.round(new Date().getTime()/1000) + 3600//我们设置为当前时间3600秒后,也就是1小时后失效//无需求可以去掉这两个参数(isExpire,expire_time)})
}

   package.json 配置依赖等

{"name": "openapi","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","dependencies": {"wx-server-sdk": "~2.4.0"}
}

npm install 安装依赖后,右键上传并部署

5. 创建h5网页

创建 webviews 文件夹,与云开发目录 cloudbase 同级。

webviews 下创建 index.html 文件。内容如下:

<script src="https:acc.cloudbase.vip/res/web2weapp.js" charset="utf-8"></script>
<script>window.onload = function(){window.web2weapp.init({appId: 'appid', //替换为自己小程序的AppIDgh_ID: 'gh_id', //替换为自己小程序的原始IDenv_ID: 'cloud_id', //替换小程序底下云开发环境IDfunction: {name:'openMini', //提供UrlScheme服务的云函数名称data:{} //向这个云函数中传入的自定义参数},path: 'pages/index/index.wxml' //打开小程序时的路径})}
</script>

6. 查看效果

vscode 安装插件 Live Server ,成功后在 webviews/index.html 右键 → 选用 live server 启动网页。

注:一定要用 live server 方式启动,不能用 localhost 启动。

启动成功的网页上,会出现一个按钮 “点击进入微信小程序”

image.png

F12 打开控制台 console → 刷新页面,让控制台重刷数据 → 控制台会打印出一组数据,里面包含result.openlink,值类似于 "weixin://dl/bussiness/?t=NapElbyOrIo" 即说明已成功。

7. 后续需要把h5网页部署到服务器上,在手机浏览器打开,即可使用跳转功能

都多数人在进行此功能调研或者仅作为学习的话,不想开通需要付费的云开发-静态网站功能,但是h5网页还需要部署到服务器上才能走通流程。

这里可以用webpack启动一个项目,项目地址包含ip地址,在手机浏览器输入(webpack服务的ip)+(上个步骤 live server 启动的端口及路径),正常情况下可加载h5网页跳转到小程序。

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_856895.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

搜索引擎SEO外挂:一边搜索,一边看PageRank

搜索引擎SEO外挂&#xff1a;一边搜索&#xff0c;一边看PageRank 下载地址&#xff1a;多么乐站长工具 我原来曾写过一篇统计分析搜索引擎排名和Page Rank 关联分析 的文章。很多人引用&#xff0c;回复和我讨论了我的结论。有赞成的&#xff0c;有反对的&#xff0c;有鼓励的…

seo优化:把百度放进数据库

seo优化:把百度放进数据库 有时候我想&#xff0c;能把百度的数据放进数据库&#xff0c;用广大程序员熟悉的sql语句查询百度的搜索结果应该是一个不错的主意。在这方面Google早已经跨出了一大步&#xff0c;利用Google Search API 把Google的搜索结果放进数据库是很容易办到得…

商业网站 第八章 注册登陆模板设计

注册——插入记录 服务器行为——添加——插入记录——连接:web_ljdata——插入到表格&#xff1a;T_user——获取值自&#xff1a;form1(注册表单&#xff09;——表单元素——注册成功后&#xff1a;插入后转到&#xff08;注册成功表单&#xff09; 验证登陆信息 数据库面板…

网站推荐机制中的艺术、科学与商务问题

网站推荐机制是电子商务或内容网站的核心功能之一。例如你在一个网站买了一本书后&#xff0c;网站会推荐其他你可能会感兴趣的书。这被认为是亚马逊等电子商务巨头成功的关键。本文对几个出色的推荐系统进行了较透彻的分析。 2006年10月&#xff0c;Netflix搞了一次不寻常的有…

平面设计素材网站-庞姿姿

哈喽&#xff0c;大家好&#xff01;今天为大家分享的是免费的平面设计素材网站&#xff0c;设计类网站是大家在所难免需要的了吧&#xff0c;下面就是我发现的比较好用的免费的平面设计素材网站&#xff0c;感兴趣的小伙伴看过来&#xff0c;如果你还发现其它好的网站评论一起…

OpenCms创建网站过程图解——献给OpenCms的初学者们

很多人都听说了OpenCms&#xff0c;知道了它的强大&#xff0c;索性的下载安装了&#xff0c;终于见到了久违OpenCms&#xff0c;看到了它简洁的界面&#xff0c;欣喜过后却不免一脸茫然&#xff0c;这个东西怎么用&#xff0c;我怎么用它来建站&#xff0c;从哪开始&#xff0…

视觉素材-免费高清!10个无版权限制的大图特供网站

今天为大家整理目前优秀的提供免费图片素材资源网站&#xff0c;这些网站的图片质量相当高&#xff0c;大部分为高分辨率&#xff08;高解析&#xff09;&#xff0c;并且&#xff0c;最重要的是&#xff0c;它是免费的&#xff0c;无版权限制&#xff01;同时具备免费、高清&a…

获取任意网站的图标,标题栏logo,网站logo的方法

不错呦~我想要这个图标怎么办呢&#xff1f; 直接使用网址加上&#xff1a; https://csdn.net/favicon.ico 获取到了 说明&#xff1a;这种方法适用于百分之九十的站点&#xff0c;如果你有想要使用的LOGO或者ico可以使用此方法简单获取。

【引用】iphone开发的好网站

分享iphone开发的好网站&#xff0c;希望大家也能提供一些分享下 收藏 1、http://developer.apple.com/iphone/library 这个是官方的代码实例 2、www.cocoachina.com 这个网站比较适合初期开发者&#xff0c;上面的版主之类的也比较热心&#xff0c;一般的问题都会提供帮助 3…

[.Net Core学习一]网站发布

1.首先点击图片IIS上的模块 判断是否存在 如果没有去官网下载 安装好后 按照formwork版发布即可 结果

功能超全的在线文件转换网站

转自http://blog.360converter.com/archives/1314 最近在做一个图标&#xff0c;找了很多的网站&#xff0c;有些根本就不能转换&#xff0c;有些可以转换&#xff0c;不过转换的出来的icon文件超级大&#xff0c;一个6464的icon转换出来达到了几百k&#xff0c;甚至上1M。不过…

免费文字转语音的网站

此文链接&#xff1a;http://blog.360converter.com/archives/1318 在通常的工作生活中&#xff0c;有时&#xff0c;我们需要将一段话&#xff0c;一段文字转换语音&#xff0c;语音文件以音频格式存储传播&#xff0c;如mp3, wma,wav等格式。 为了完成上述功能&#xff0c…

利用一句话木马获取网站web权限

1.登录网站后台&#xff0c;寻找文件上传地方 进入网站管理后台并登录管理员帐户和密码&#xff0c;寻找文件上传点。此网站有多个可上传文件的地方&#xff0c;在这我们选择附件管理页面中的上传附件。 2.写入一句话木马文件&#xff0c;并上传到网站上 为方便寻找可直接在…

使用LNMP架构部署动态网站环境

使用LNMP架构部署动态网站环境 实验环境 linux操作系统&#xff0c;本文用的是centos7版本的 实验是需要的安装软件包 链接&#xff1a;https://pan.baidu.com/s/11f4Y6GO0ehQDjc-idUJ5lA 提取码&#xff1a;nxfv 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便…

使用 Chrome 开发者工具实现网站快速开发的12个小技巧

转载 chrome迷 http://www.chromi.org/archives/10612 Google 的软件工程师 Pavel Feldman 和 Alexander Pavlov 最近在 Chromium 官方博客公布了一段视频(iOS用户点这里)&#xff0c;讲述了使用 Chrome 开发者工具进行快速网站开发的12个小技巧&#xff0c;对于 Web 开发人员来…

浅谈大型网站的算法和架构(1)

51cto 上个月老大给我们讲解了"浅谈大型网站的算法和架构"&#xff0c;获益匪浅。由于篇幅太多&#xff08;光数据结构大概就有20多种&#xff09;&#xff0c;我也没有办法一下全部吸收&#xff0c;故我边理解&#xff0c;边分章节与大家分享。 这周我查阅资料&a…

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);报错

这里关闭窗口提示了错误&#xff0c;查找了好久才发现是是继承错误了&#xff0c;把Frame改为JFrame就可以了。

网站后端使用java还是php多_网站建设时是使用单页面,还是使用多页面设计?...

对于很多客户而言&#xff0c;网站是做单页面还是做多页面设计&#xff0c;是个很纠结的问题。随着移动端还有社交媒体的出现&#xff0c;简简单单响应式的单页面&#xff0c;成为了现在网建设的趋势。传统多页面的设计已经得到了广泛的认知和认可。所以&#xff0c;是选择单页…

怎么做网站在线客服_怎么做网站推广?

网站推广对于大多数网站来说都是一门必修课&#xff0c;目前&#xff0c;互联网上的网站推广方式有很多种&#xff0c;但是最典型的就是搜索引擎推广、电子邮件推广、资源合作推广、信息发布和网络广告推广等方式&#xff0c;无论哪种推广方式对于提升网站知名度和流量具有一定…