收藏
评论

小程序+云托管,轻松打造二维码生成工具官方


案例背景

本示例展示如何使用小程序+云托管开发一个二维码生成小工具,用这个工具,输入一个 URL 就可以生成相应的二维码,其他用户扫了这个码之后就会打开对应的链接。除了 URL 外,也可以生成对应任意文字的二维码。

比如:下图是实际开发后的效果图,在打开开发好的小程序后,在输入框中输入云开发官网文档URL:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/container/,点击生成二维码,效果如下:

扫码之后会直接访问到该链接内容;

如在文本框中输入的是文字:哈哈哈,扫码之后效果如下:


源代码

点此领取


技术栈


开发工具

建议提前安装好

  • 微信开发者工具


代码准备

  • 生成二维码的代码包
  • Dockerfile文件


1. 生成二维码的代码包

此处参考开源项目zxing的二维码生成算法。

构建java后端程序,监听端口。依赖Google的Zxing包生成二维码。

执行命令mvn compile &mvn package生成jar包。

可以看到target目录下有刚刚编译好的jar包。

2.Dockerfile文件

如已编译好jar包,在根目录下编写Dockerfile文件,通过云托管生成包含jar包的镜像并运行,详情如下:

FROM java:8

COPY /target/*.jar /app.jar

EXPOSE 8080

ENTRYPOINT ["java","-jar","/app.jar"]


如只是源代码未编译,在根目录下编写Dockerfile,通过云托管直接生成代码的镜像并运行,详情如下:

FROM maven:3.5-jdk-8-alpine as builder

WORKDIR /app

COPY pom.xml .

COPY src ./src

CMD mvn compile &mvn package

ADD /target/*.jar /app.jar

EXPOSE 8080

ENTRYPOINT ["java","-jar","/app.jar"]


开通与部署云托管

进入微信开发者工具-云开发-云托管,创建云托管服务。

点击新建服务,新建完成后将在服务列表生成一条服务数据;

点击版本与配置,进入服务版本中,点击新建版本;

选择本地上传代码包或者直接从线上代码库拉取均可,高级配置可直接使用默认内容,点击确定,云托管会根据上传的代码包/线上代码,按照Dockerfile内容进行构建镜像并运行;

此处注意Dockfile的路径默认在根目录下;构建出现问题的时候可以查看详情进行排查;

点击分配流量,可以更改不同版本之间的流量,高级配置为自定义配置,如不需要则不需配置;

此时后端接口就可以访问了。


前端输入与调用

前端页面设置文本框输入,点击按钮生成对应二维码。

在前端通过wx.cloud.container方法访问后端容器。

前端页面组件包括input文本框、提交按钮与生成的二维码图片。

其中path为路径,需要参考实际状况填写,在微信云开发控制台可以看到。

注意需要在前端代码app.js中指定具体的env,否则会请求不到云托管后台程序。


参考项目

wxapp-qrcode 

zxing 


参考文档

产品文档:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/container/

交流社区:https://developers.weixin.qq.com/community/minihome/mixflow/1286298401038155776

最后一次编辑于  09-10
赞 4
收藏

2 个评论

登录 后发表内容

微信云托管

课程标签