云开发静态网站H5跳转小程序(记录过程)以及云环境共享(同一主体)
创始人
2024-03-08 14:23:43
0

需求:老板要求是在H5网页端,无论是在微信浏览器还是在微信外部浏览器都可以打开这个H5之后,然后跳转到小程序上。 查看了微信相关的文档,发现H5端跳转小程序是有两种方式:
一:微信内网页跳转小程序 官方文档

二:静态网站H5跳转小程序:微信外部浏览器和内部浏览器都可以跳转小程序。官方文档

静态网站H5可以解决老板的这个需求。今天我们就主要来说静态网站H5跳转小程序。

1.新建一个小程序,开通云开发:现在云开发没有免费的了,都是按量付费,基础的一个月的费用是19.9.
这里的环境名称:写一个自己需要区分记忆的名字
在这里插入图片描述

2.云函数
云函数微信给写好了,但是,还有很多其他的问题,我们需要自己配置。
1.新建一个专门写云函数的文件夹:我这里自己写的是function的文件夹
在这里插入图片描述

2.在manifest.json文件夹里面填写 云函数的文件夹地址 “cloudfunctionRoot”
在这里插入图片描述

3.在function里面直接把维信给我们写好的public函数复制过来就可以
同时我们要修改一下云函数里面的我们需要修改的内容,把path修改为我们自己需要页面

在这里插入图片描述
在这里插入图片描述

4.鼠标点钟public,点击右键,选择 使用命令行打开所在目录,在命令行执行: npm install 命令,安装所需依赖。

在这里插入图片描述

到这一步,我们运行我们的小程序,发现在微信开发者工具中根本找不到functions这个文件,也没有云函数。原因是因为我们这个functions是我们自己加上去的,并不属于uniapp默认的文件夹里面的内容。所以,我们这里通过webpack包管理工具的复制插件将 /functions 复制到项目包中(以下解决方案是在网上的资料后得出来的解决方案。)

1.在根目录下面新建vue.config.js文件
vue.config.js里面的内容:里面的from:path.join(__dirname,‘functons’) 这个文件夹的名字修改成自己的文件夹名字就可以


const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = {configureWebpack: {plugins: [new CopyWebpackPlugin([{from: path.join(__dirname, 'functions'),to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'functions')}])]}
}

2.找到小程序的根目录,使用命令窗口打开根目录 执行以下命令

npm install -save copy-webpack-plugin

这个时候我们就可以在unpackage文件夹 看到functions了,然后我们重新运行小程序项目
在这里插入图片描述

3.运行小程序项目到微信开发者工具,点击右键选择环境,然后,点击右键上传云函数

在这里插入图片描述

云函数结束,然后我们配置静态H5,

1.打开云开发

在这里插入图片描述

2.选择静态网站 并开通

在这里插入图片描述

3.上传文件,现在官方提供给的文件,我们修改成自己的即可

`

打开小程序

正在打开 “填入你的小程序名称”...

打开小程序

点击以下按钮打开 “填入你的小程序名称”

请在手机打开网页链接

`
重点:我们修改的部分是:appid 修改成我们自己要跳转的小程序的appid,resourceAppid也是我们要跳转小程序的appid,resourceEnv 就是我们开通云开发的这个环境id
wx-open-launch-weapp 里面的username 和path 修改成我们自己小程序的那个原始id和我们小程序跳转的页面路径

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

以上上传到静态网站中,我们点击HTML后面的详情,可以看到一个下载地址,我们可以先暂时通过这个地址查看我们跳转的效果。

在这里插入图片描述

最后:关于云环境共享:
共享的前提是:小程序是同一主体下的非个人小程序。(同一个公司的资质注册的小程序),否则,无法共享环境。
1.开通云环境共享: 在云开发-设置-拓展功能-环境共享 -点击开通

2.点击更多--环境共享--添加共享,填写要共享的appid(必须是同一资质下的小程序,否则无法共享,下面会有提示)

以上就是所有的步骤了,借鉴了网上其他的优秀大佬的文章,如果我这个方案大家没有成功,可以看一下大佬的文章

https://developers.weixin.qq.com/community/develop/article/doc/000204bd4d41a879112edbae354c13

https://blog.csdn.net/wang1099970453/article/details/111239868

https://blog.csdn.net/hlc162181/article/details/113503220?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166985901916782425196583%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166985901916782425196583&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2allfirst_rank_ecpm_v1~rank_v31_ecpm-6-113503220-null-null.142v67pc_rank_34_queryrelevant25,201v3add_ask,213v2t3_esquery_v2&utm_term=uniapp%20%E9%9D%99%E6%80%81H5%E8%B7%B3%E8%BD%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F&spm=1018.2226.3001.4187

相关内容

热门资讯

AWSECS:访问外部网络时出... 如果您在AWS ECS中部署了应用程序,并且该应用程序需要访问外部网络,但是无法正常访问,可能是因为...
AWSElasticBeans... 在Dockerfile中手动配置nginx反向代理。例如,在Dockerfile中添加以下代码:FR...
AWR报告解读 WORKLOAD REPOSITORY PDB report (PDB snapshots) AW...
AWS管理控制台菜单和权限 要在AWS管理控制台中创建菜单和权限,您可以使用AWS Identity and Access Ma...
北信源内网安全管理卸载 北信源内网安全管理是一款网络安全管理软件,主要用于保护内网安全。在日常使用过程中,卸载该软件是一种常...
​ToDesk 远程工具安装及... 目录 前言 ToDesk 优势 ToDesk 下载安装 ToDesk 功能展示 文件传输 设备链接 ...
Azure构建流程(Power... 这可能是由于配置错误导致的问题。请检查构建流程任务中的“发布构建制品”步骤,确保正确配置了“Arti...
群晖外网访问终极解决方法:IP... 写在前面的话 受够了群晖的quickconnet的小水管了,急需一个新的解决方法&#x...
AWSECS:哪种网络模式具有... 使用AWS ECS中的awsvpc网络模式来获得最佳性能。awsvpc网络模式允许ECS任务直接在V...
不能访问光猫的的管理页面 光猫是现代家庭宽带网络的重要组成部分,它可以提供高速稳定的网络连接。但是,有时候我们会遇到不能访问光...