微信外H5唤起小程序(一)

2,257 阅读1分钟

关键词:微信小程序云开发、静态网站、云函数

实现微信内和微信外唤起小程序

步骤一、微信开发工具

1、启用云开发

image.png

2、创建云环境,选择按量计费

image.png

3、设置云函数权限

修改为允许所有用户访问

image.png

image.png

4、开通静态网站

image.png

5、环境权限设置

为了微信外部也能唤起小程序,此处权限要打开

image.png

步骤二、准备好相关文件(云函数、H5html)

H5跳小程序官方文档developers.weixin.qq.com/miniprogram…

官方文档提供了demo文件(云函数、H5html)的下载

下载demo

并根据文档提示,修改下载下来的demo

步骤三、uniapp端

1、创建云函数文件夹

项目根目录创建云函数文件wxcloudfunctions

把下载的public(云函数)文件复制到里面

image.png

2、manifest.json文件

image.png

3、创建vue.config.js 安装copy-webpack-plugin @5.00npm包

image.png

步骤四、编译到微信开发者工具

1、编译小程序

此时微信开发工具中,编辑栏里,多了这个文件夹,右键设置云环境

image.png

2、部署云函数

右键public,上传并部署

image.png

步骤五、微信开发工具-云开发控制台

静态网站-上传文件夹

把之前从官网文档下载的demo中的h5文件夹,上传到静态网站

image.png

步骤六、得到H5链接地址

image.png

image.png

就是它:https://shymall-9g0a4z6kbf382b74-1305109476.tcloudbaseapp.com/h5/jump-mp.html?sign=b40df49885fb6807775cd485ad582218&t=1614750553

完成!

相关资料:

小程序官方文档 developers.weixin.qq.com/miniprogram…

uniapp开发小程序云函数 developers.weixin.qq.com/community/d…

\