微信h5页面开发教程

篇一：HTML5微信页面设计

我保证你一分钟就能看完这篇文章! 真的..

角色解释：

需求方：有钱大爷

设计人员：美工殿下

前端工程师：前端文艺青年

一个HTML5页面从提出到完成上线的流程：

1、需求方、设计人员、H5实现人员三方共同讨论实现方案

2、设计人员出设计图

3、H5人员按设计图出H5页面

4、需求方评估已实现的H5页面后给予反馈

5、设计人员与H5人员根据反馈进行适当调整

6、发布推广

如何提出一个合理的微信HTML5页面设计诉求？

合理分析诉求与公司团队拥有的资源：

1、需求完成时间；

时间给的越多，项目做的就越扎实，优化的也更好，就像造一座桥，三个星期完工，保质10年，1年完工，保质100年

2、现有技术能力；

根据人员的能力选用合适的技术，以及设计对应能实现的视觉特效

3、工作人员配备；

有些狂拽酷炫屌炸天的特效需要专业的游戏或影视人员参与制作

4、领导B格

不解释

5、公司B格

不解释

好吧以上都是枯燥的叙述，后面会有可爱的喵星人出现，所以往下看吧。

三方需要达成的共识与常识

一、手机屏宽度高度不一

由于手机屏大小不一，所以H5页面所承载的设计图相应的宽高也会不一样，是否需要设计多套不同的设计图以适应不同的手机屏？

最好的效果肯定是设计多套不同的效果针对不同的屏幕尺寸，但这样需要大量的人力与时间，而且维护成本太高，不符合大部分团队的实际情况。

典型的手机屏尺寸如：

导航栏+iphone状态栏高度： 64px

iphone4

屏幕总宽度: 320px

屏幕总高度: 480px

微信网页可视高度: 416px

iphone5

屏幕总宽度: 320px

屏幕总高度: 568px

微信网页可视高度: 504px

iphone6

屏幕总宽度: 375px

屏幕总高度: 667px

微信内网页可视高度: 603px

iphone6 plus

屏幕总宽度: 414px

屏幕总高度: 736px

微信网页可视高度: 672px

samsung galaxy note3 （三丧手机开发者的黑洞。。）

导航栏+Android状态栏高度： 73px

屏幕总宽度: 360px

屏幕总高度: 640px

微信网页可视高度: 567px

仅iphone就4个尺寸了，更别说Android阵营的手机了

特别注意：以上不是手机的分辨率单位，而是普通电脑上浏览网页时的像素，这和客户端Native制作有很大的区别。

比如iphone4,宽度就是320px像素，高度为480px，如果以实际分辨率来设计即640*960来排列设计，实际在H5页面显示时会显得很小。

一般我们都是以用自适应的解决方案，以一套或两套效果图适应大部分的屏目，放弃极端屏或对其优雅降级，牺牲一些效果

正因为只有一套或两套效果图，团队、公司拥有的手机型号又是有限的，那么其它型号的手机显示效果就需要大家脑补了，

需要需求方脑补一下在特别小的屏或特别大的屏上你当前效果图的显示效果。

二、两种效果图排列，以及对应的解决方案

1、效果图水平居中排列设计（较容易实现自适应）

由于是水平居中，则两边可以用纯色平铺，不管屏有多宽，都可以以纯色填充，这就是最最容易的自适应了。

篇二：腾讯微校微信H5海报制作教程

在朋友圈里面传播的H5页面很酷炫有木有，但是微信H5海报的制作一般需要借助第三方平台，这里给大家推荐的第三方是腾讯微校。

操作步奏如下 》》》

1.进入腾讯微校官网并完成接入

2.登录后点击微校的左侧导航【活动功能】->【微海报】，进入微海报列表页

点击左上角的创建海报，在选择模板对话框中选择通用模板

3.填写微海报的基本信息，这一需要注意封面图片在分享给朋友时会作为封面图，所以记得选一张漂亮的图片哦。

4.保存基本信息后进入到微海报的页面编辑，点击+号选择页面模板，换上自己精选的背景图和文字，一页美美的海报就快速生成了，是不是很简单。

5.编辑完所有页面后记得点击预览区下方的发布按钮正式发布。注意发布后微海报内容将不可以修改。

《微信h5页面开发教程》由：免费论文网互联网用户整理提供；
链接地址：http://www.csmayi.cn/show/165238.html
转载请保留,谢谢!

• 上一篇：元宵小礼品
• 下一篇：2017年元宵灯谜