.

1.微信拍照组件:上传照片/上传图片

老赵发表于:2015年02月25日 09:06:44更新于:2021年10月22日 16:50:54

一、案例效果

0015cb578088efa4da4502709980577

《手机摄影大赛模板》


二、场景应用

用户需要在H5中上传照片,照片可用于跟其他图片元素生成海报或转发出去,可以选择拍照、或者选取相册中现有照片。目前该组件调用的是微信拍照接口,需在微信环境下生效,且每个公众号仅支持调用5000次/天,

若需避开该限制,只需勾选编辑器界面的【使用上传照片替代微信拍照】即可。

image.png


三、素材准备

如果需要替换微信拍照组件的标志素材,需要准备2张上传照片的标志图片,这两个小图片的尺寸必须保持一致,大小控制在30Kb左右。

0015cb578e5ca55fc91b2a4e8bbb8f3

2.因为微信拍照仅仅是一个功能组件,上传照片后,照片自己是不能显示的,需要我们再加一张图片,专门用于上传照片的显示。

这个照片的尺寸跟比例原理上应该跟上传照片的一致,但是用户上传何种尺寸比例的图片没有办法预测,所以上传后的照片只需要注意一个问题即可,即设置显示方式为【缩放以适合】或者【缩放以填充】,只有这两种显示方式,照片才不会变形。

0015cb57241f1e4979f65f47ec69a73


四、组件用法

基本用法

1.添加微信拍照组件。选中微信拍照组件,可以替换微信拍照组件的标志元素。

0015cb573b334477202d24d2dc032b5


2.给微信拍照组件设置【成功时】,【替换资源文件】,替换的就是提前放置在页面中的那张图。

0015cb5743349e1b4feff9314c41ea4


整个设置过程动图演示:

0015677a6f99dbd52aac9082cd1982d



高级用法

1.用于替换照片的图片,勾选可编辑后,上传的照片可以用双指调整大小。

0015cb575076f5a8c01f9bb9a3eff4e


2.拍照或选取图片后,由于之前设置了拍照后触发“替换资源文件”操作,此时会弹出图片编辑器,可以对图片进行位置和大小的调整,点击“查看效果”,确认调整。

00154ed19d8a0c3d29107b81f05e643


3.处于该界面时可调整

0015c3474424622804710468e714ae3


4.设置微信开发者信息

(1)体验版/基础版用户作品中,拍照后图片调整页将会出现“Epub360 免费技术支持”字样;

(2)专业版用户作品,不会出现上述提示信息;

(3)使用微信拍照组件,必须有经过认证的服务号,并正确设置微信开发者信息,正常是默认使用意派的,没有特殊情况不需要修改。了解如何设置微信开发者信息 。


5.后台查看照片。后台查看照片,至少是专业版用户有该权限。

(1)用户上传照片后,我没有使用数据库,怎样才能在后台查看?(教程链接

(2)用户上传照片到数据库,我该怎样设置?(教程链接

(3)用户参与我发起的拍照大赛,怎样在后台查看并实时更新在H5页面上?(教程链接)


除了使用微信拍照组件上传照片,还可以用一个触发行为设置,具体教程戳链接:微信拍照/上传照片触发行为教程


五、相关Q&A

1. 微信拍照组件中显示的微信公众号信息可以修改吗?

可以,但是需要时专业版及以上版本的用户才可以修改。

(A)体验版/基础版用户作品中,拍照后图片调整页将会出现“Epub360 免费技术支持”字样;

(B)专业版用户作品,不会出现上述提示信息;

(C)使用微信拍照组件,必须有经过认证服务号,并正确设置微信开发者信息(如下图所示)才能正常使用。了解如何设置微信开发者信息 。


2. 微信拍照组件开启微信功能失败怎么办?

(1)作品素材大,造成加载慢,启用微信功能失败;建议压缩素材大小;若拍照/上传照片的页面是在页面0,建议一定要把页面0的或者加载页的素材处理的特别小(不要几百KB以上),方便打开H5时提前加载好内容;并且在页面0加载时,就预加载其他页面(页面预加载教程)。

(2)检查公众号APPID设置是否有问题,建议【默认】直接使用意派的(了解APPID设置);如果是使用的是自己的还有问题,需要检查配置是否正确。(下图是默认使用Epub360的 公众号APPID)

image.png

(3)因为拍照功能是调用的微信接口,打开作品有一个初始化的过程,如果非常迅速的去上传照片测试,就会有失败的情况。

3. 部分图片在使用微信拍照组件时会翻转90度,该怎么办?

建议在作品信息面板上勾选使用上传图片代替微信拍照试试。

image.png


--------- 不了解设计的程序员不是好客服 ---------------

回复(16)