需求:老板要求是在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
上一篇:切换模糊化的自适应滑模控制