.

批量生成个性化二维码H5怎么做?

小常发表于:2023年06月19日 20:36:36更新于:2023年06月21日 17:45:29


问题场景:


做个电子展板,展示物品。物品大约100多件,物品旁边放相应的二维码来介绍每件物品。

基础解决思路:做相对应的100多个H5,一个H5生成一个二维码,一页生成一个项目,用于介绍此物品。

其他解决思路:数量上,按照一百个作品来算,分10个作品,每个作品10页;页面组织方面,布局模块化,做好一页,复制页面,修改替换图文内容就可以了。复制作品每一页单独的链接去生成二维码,确保有相对应的二维码

数量用于展示出去。需要的输出成果:100个 个性化二维码。



问题:我想展示100个物品的详情页,难道只能做100个/页H5或多个H5?

image.png


回答:当然不能这么干,这不得把人累坏了?

image.png


理想效果演示

物品电子展板物品数据录入H5

https://m.creatby.com/v2/manage/book/ypyotq/

 

物品电子展板物品展示H5,其中一个物品的

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A002

 

分享变量的值=物品编号1时,显示对应物品信息

image.png

分享变量的值=物品编号2时,显示对应物品信息

image.png

数据网址示例

序号

物品编号

物品名称

最终二维码网址

物品图片

1

A001

复古相机

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A001


image.png

2

A002

端午节粽子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A002

image.png


3

A003

杯子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A003

无图

4

A004

小汽车

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A004

无图

5

A005

自行车

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A005

无图

6

A006

摩托车

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A006

无图

7

A007

头盔

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A007

无图

8

A008

梳子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A008

无图

9

A009

镜子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A009

无图

10

A010

围巾

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A010

无图

11

A011

发卡

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A011

无图

12

A012

短裤

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A012

无图

13

A013

拖鞋

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A013

无图

14

A014

酒瓶

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A014

无图

15

A015

钩子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A015

无图

16

A016

小吃

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A016

无图

17

A017

盘子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A017

无图

18

A018

菜盆

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A018

无图

19

A019

筷子

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A019

无图

20

A020

轮船

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A020

无图

21

A021

跑车

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A021

无图

22

A022

雨棚

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A022

无图



二维码对应的是H5网址链接,其实是做100个H5网址,然后借助二维码生成工具批量生成全部的二维码。

二维码对应链接数据示例(详见附件)

image.png


怎么解决?具体步骤


1、先学习分享网址的结构

https://m.creatby.com/v2/manage/book/wepcd1?ShareVariable7a4f008b=A003

域名(m.creatby.com)+epub360编辑器完成的固定H5网址后缀(v2/manage/book/)+H5作品唯一编码(wepcd1)+作品编码和分享变量用“?”连接+分享变量在意派服务器上的唯一ID(ShareVariable7a4f008b)=

=等号后面就是分享变量的具体值。


2、添加分享变量至编辑器,并设置初始值

00164904d12e22ac19d5e93f09c3eba


3、添加一个文本框组件,后续用于获取分享网址

00164904d3bc10bc3a872bd0565e1f9


4、用页面触发器给分享变量赋值,赋值后才能拿到我们想要的分享网址

00164904d56bf036a887309ad655082


 5、在分享变量赋值后面再加一个设置参数值,让文本框等于作品分享网址,【作品分享网址】是系统变量,不需要额外添加,点击文本框等于后面的@即可,点击@后,具体请看下一截图

00164904d7864e934c516b39661b12b

6、在系统变量中找到作品分享网址,作品分享网址点击后就会自动出现在下方的输入位置,然后再点击确认按钮,赋值动作完成。

00164904d911526a48350366ab1f1f1

7、这两个设置参数值的设置主要用来获取分享网址,用完了可以删除

或者复制一份页面放在最后面,后续可能用得着。

00164904da7a4132ef229c14efda0c5


8、如何借助分享网址及分享变量实现个性化信息展示

一旦分享变量有了值,我们进入H5的时候,就可以去拿分享变量的值,用于赋值给其他组件(如段落、艺术字、文本、输入框组件)显示,或用作过滤使用。

本次的原理就是将分享变量用作数据表过滤使用,如下:

📢注意:如果想要展示的物品具有唯一性,最好是用具有唯一性特点的数据库字段作为筛选条件,如身份证号、物品唯一性编码。

00164904dc98a8c79ece1ae00737009


9、添加网格列表组件

00164904de220e413479aa0ed4fa2ab


10、点击选中网格列表组件,对网格列表要展示的信息模块做调整,比如加个文字显示模块,减少个图片显示模块。

00164904dfa3d446b87273ba4826712


11、网格列表是用来展示数据的,数据哪里来?新建数据表

00164904e10dca16c0327f66b60bf93


12、新建字段,注意字段类型

00164904e29113dcbf395a3c8edbcc2


13、建好了到编辑器里引用数据表

00164904e4a4c4ee0cc4fa77a57d343


14、找不到数据表就刷新

00164904e6162c420ae968d358db434


15、网格列表绑定过滤表,并绑定过滤表对应字段

00164904e97bea4effe17ee43f59b1b



16、预览

image.png



17、数据哪里来?

添加数据或者导入数据Excel,图片不支持图片格式的导入,需要以网址形式导入:

1)将图片上传至意派素材库

2)拿到图片网址

3)将图片网址复制到Excel

image.png

或者单独做个H5逐条录入数据,数据表还是引用同一个,2个H5可以共用一个数据表。

《物品电子展板物品数据录入H5》https://m.creatby.com/v2/manage/book/ypyotq/

00164904eea6c6952df0056b80a0794


 

18、在Excel中给物品定义唯一性编号,如果可以有规律,最好是定个编码规则去定义

00164904f0396972da66a93649fe0b5


19、在Excel拼接网址

00164904f28964a769548412b7c0abf


20、批量生成二维码

如果H5作品已经设置好了逻辑,直接复制网址在浏览器打开即可。

如果需要批量生成二维码,借助草料二维码工具。https://cli.im/url

1.1、点击批量生码
00164904f4c068397bc549e33ccbae9


1.2、选择任意模板

00164904f635b2dde46a5aa42e01662

1.3、将Excel中合并的网址数据,批量粘贴在此处,或导入Excel,也可看上方教程

1.4、点击每行的网址,右侧二维码跟随生成二维码并支持保存到电脑本地。

00164904f82e7630e6c2a4d98e9d530



附件:电子展板物品示例网址 (1).xlsx • 10.21KB • 下载