一、案例效果

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

二、应用场景

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

三、具体设置

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

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

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

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

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

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

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

8.模板修改说明：

（1）这页同样也是使用layer组件，可在layer里面找到可以替换的内容；

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

（3）图片双击即可替换。

9. 注：

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

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