.

2.模拟朋友圈教程

伯益发表于:2017年03月27日 15:45:58更新于:2021年11月10日 17:17:33

一、案例效果

image.png

案例为模板,可拷贝《秦孝公邀你加入群聊》


二、应用场景

微信拟态类作品一直刷爆朋友圈,2017两会之际,大量群聊朋友圈案例再次引起了大家学习的兴趣,上期我们讲解了群聊类的效果制作方法,下面给大家介绍使用Epub360意派这个专业H5设计工具,轻松制作模拟微信朋友圈类的H5页面,本期还附赠一个综合模板(面对面建群+群聊+朋友圈),专业版及以上用户可免费拷贝。相关教程《模拟微信群聊教程》


三、具体设置

1.朋友圈长图也是使用layer做的,我们切换到layer页面,新建一个空白的layer页面,更改layer的尺寸为370*3350(具体的长度根据你的内容来定),调整layer页面的颜色为纯白色和透明度为100%;

image.png


2.我们插入一张370*256尺寸的图片作为朋友圈封面,再添加一个微信头像尺寸(63*63px)、圆角(无)以及边框(白色,2px);

image.png


3.添加微信头像、文本段落,图片,并设置内容、样式,文本段落要勾选右侧“锁定”与“以图片方式展现”(这是为了文字适配,如果对文字显示比较高,建议使用图片);

image.png


4.同理,我们再把后面的内容填充完整,接着给评论内容分别添加渐现的等待触发动画,添加锚点,设置向上滚动接触时触发这些动画,触发基准点为视窗上边线,仅执行一次;

image.png


5.我们切换到页面,把做好的layer插入到页面

image.png


6.这个朋友圈案例的操作内容与群聊设置方法几乎一样,这里就不多讲解了,文字的字号、颜色、位置不固定,需要根据具体的内容多预览多调整。另外,朋友圈案例用到微信头像,需要用户授权的和填写认证的服务号信息。《如何填写认证的服务号信息?》


7.如果需要获取进入H5用户的微信头像和昵称,就需要开启微信授权。

0015cc2e2531a69046f72bed7f84c4c


8.模板修改说明:

(1)这页同样也是使用layer组件,可在layer里面找到可以替换的内容;

(2)在layer里,选中文本段落组件,在右侧面板的把“锁定”与“以图片方式展现”,修改完成后再勾选“锁定”与“以图片方式展现”即可

(3)图片双击即可替换。


9. 注:

(1)勾选“锁定”与“以图片方式展现”是为了适配不同机型的显示效果,其他动画不建议有大的调整,除非你也是老司机,不然恢复起来可能不太容易;


(2)如果对于文字要求适配所有机型的话,建议文字部分用做成图片导入。