微信开发和响应式.docx
- 文档编号:4424345
- 上传时间:2022-12-01
- 格式:DOCX
- 页数:25
- 大小:2.55MB
微信开发和响应式.docx
《微信开发和响应式.docx》由会员分享,可在线阅读,更多相关《微信开发和响应式.docx(25页珍藏版)》请在冰豆网上搜索。
微信开发和响应式
价值万元的微信课程
(二)
目录
价值万元的微信课程
(二)1
一、响应式设计概述2
1、未来网页流行区域2
2、早期解决方案2
3、解决方案2
4、自使用网页设计3
5、响应式设计核心原理(有舍有得)5
二、响应式设计核心6
1、DW(DreamweaverCC)设计软件的使用6
2、响应式核心标签viewport6
3、不使用绝对宽度6
4、使用相对大小的字体6
5、媒体查询标签(重点)7
6、让多媒体标签实现自适应7
三、响应式案例8
1、让网页可以识别设别的宽度8
2、使用mediaquery标签实现根据不同的宽度加载不同的css8
3、让网页可以自动去适应终端的宽度,8
4、初始化CSS代码9
5、设计Logo导航条9
6、设计相关板块9
四、FontAwesome矢量图标集10
1、复制css与fonts文件夹到项目目录中并保持路径一致10
2、使用link标签引入font-awesom.min.css11
3、在网页的合适位置,设计HTML与CSS代码11
4、使用FontAwesome矢量图标集11
五、十分钟搞定Javascript特效11
1、设计网页中的html与css代码12
2、为元素添加.hd与.bd标签12
3、在demo.html页面找到你要使用的特效12
六、综合案例:
整合微信与响应式13
1、项目需求13
2、搭建dedecms系统到BAE云平台13
3、让BAE提供BAE的支持13
4、把昨天开发的微信接口对接系统(更换主机或服务器)16
七、微信的自定义菜单17
1、微信自定义菜单(创建)17
2、微信自定义菜单接口分析17
3、ACCESS_TOKEN17
4、创建自定义菜单18
5、根据以上菜单创建项目菜单(微网站、产品中心、联系我们)20
6、自定义菜单的事件推送功能21
八、微信与MySQL数据库23
九、关注回复接口23
一、响应式设计概述
1、未来网页流行区域
随着3G、4G的普及,越来越多的人使用手机上网。
移动设备正超过桌面设备,成为访问互联网的最常见终端。
于是,网页设计师不得不面对一个难题:
如何才能在不同大小的设备上呈现同样的网页?
2、早期解决方案
手机的屏幕比较小,宽度通常在600像素以下;PC的屏幕宽度,一般都在1000像素以上(目前主流宽度是1366×768),有的还达到了2000像素。
同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。
很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个mobile版本,或者iPhone/iPad版本。
这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,而且如果一个网站有多个portal(入口),会大大增加架构设计的复杂度。
3、解决方案
于是,很早就有人设想,能不能"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局(layout)?
4、自使用网页设计
2010年,EthanMarcotte提出了"自适应网页设计"(ResponsiveWebDesign)这个名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计。
他制作了一个范例,里面是《福尔摩斯历险记》六个主人公的头像。
如果屏幕宽度大于1300像素,则6张图片并排在一行。
超宽屏幕PC端:
纯屏PC端:
平板计算机:
手机端:
5、响应式设计核心原理(有舍有得)
二、响应式设计核心
1、DW(DreamweaverCC)设计软件的使用
2、响应式核心标签viewport
上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。
3、不使用绝对宽度
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。
这一条非常重要。
具体说,CSS代码不能指定像素宽度:
如:
width:
xxxpx;
只能指定百分比宽度:
如:
width:
xx%;
4、使用相对大小的字体
字体也不能使用绝对大小(px),而只能使用相对大小(rem)。
rem是相对于网页根元素的文字大小,默认html标签的文字大小为16px,1rem=16px
html{
font:
normal100%Helvetica,Arial,sans-serif;
}
上面的代码指定,字体大小是页面默认大小的100%,即16像素
h1{
font-size:
1.5rem;
}
然后,h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。
small{
font-size:
0.875rem;
}
small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)
技巧:
在实际项目开发中,如果按照以上形式进行换算过于麻烦,有没有更简单的办法来实现这个单位的换算呢?
答:
可以人为设计html标签的文字大小
html{
font-size:
62.5%;相对于16像素的62.5%,等于10px
}
html元素的文字大小为10px,根据rem的设定规则,其1rem=10px,以后换算时:
12px=1.2rem14px=1.4rem16px=1.6rem
5、媒体查询标签(重点)
"自适应网页设计"的核心,就是CSS3引入的MediaQuery模块。
它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
400px)“href="tinyScreen.css"/> 上面的代码意思是,如果屏幕宽度小于400像素(max-width: 400px),就加载tinyScreen.css文件。 400px)and(max-width: 600px)"href="smallScreen.css"/> 如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。 6、让多媒体标签实现自适应 除了布局和文本,“自适应网页设计”还必须实现多媒体的自动缩放。 img{max-width: 100%;} img,object,embed{max-width: 100%;} 三、响应式案例 1、让网页可以识别设别的宽度 2、使用mediaquery标签实现根据不同的宽度加载不同的css 实际项目开发中,一般是分为三部分: 手机端: 最大宽度小于767px 平板端: 介于768px到1023px之间 PC端: 最小宽度大于1024px 3、让网页可以自动去适应终端的宽度, 为了让网页自动去适应屏幕的宽度,可以在整个内容的最外层为其添加一个div元素 4、初始化CSS代码 5、设计Logo导航条 6、设计相关板块 详细代码参考css/phone.css,内容如下: 四、FontAwesome矢量图标集 我们在实际项目开发中,经常会使用小图标的功能,在早期都是采用PS等设计软件进行设计开发的,但是在现在大家可以使用Bootstrap框架中内置的矢量图标集来实现网页中的小图标——FontAwesome矢量图标集 1、复制css与fonts文件夹到项目目录中并保持路径一致 2、使用link标签引入font-awesom.min.css 3、在网页的合适位置,设计HTML与CSS代码 4、使用FontAwesome矢量图标集 效果如下: 扩展: 拨打电话与发送短信功能(html5标签) 五、十分钟搞定Javascript特效 我们在实际项目开发中,经常会使用特效功能,但是对于我们的JS的要求会比较高,如果想在实际项目开发中,高效的完成Javascript特效不妨考虑使用SuperSlider2插件。 这款插件是由动易现设计师——大话主席设计开发的基于jQuery的一款Javascript特效库。 使用前提: 在使用SuperSlider时必须载入以下两个Javascript文件: 1、设计网页中的html与css代码 2、为元素添加.hd与.bd标签 使用SuperSlider2有一个前提: 必须在标签中包含了两个class=hd(控制条)与class=bd(内容区)的div标签 3、在demo.html页面找到你要使用的特效 把以上代码复制放到刚才html标签的最低端即可,如下图所示: 六、综合案例: 整合微信与响应式 1、项目需求 ①可以在先浏览器响应式网站,还需要提供数据库的支持 ②在微信中定义自定义菜单(服务号),自定义一共有三个: 微网站: 点击这个链接,可以跳转到响应式网站的首页 产品中心: 点击产品中心连接,可以以图文信息的形式返回数据库中最新的5个产品 联系我们: 以文本形式显示公司的联系信息 ③当用户关注我们的微信公众账号时,可以实时返回一条图文信息,引导用户进入微站 2、搭建dedecms系统到BAE云平台 使用SVN上传dedecms系统源代码到XX的BAE云平台,上传完毕后,我们可以直接预览效果,但是其并没有数据库的支持。 3、让BAE提供BAE的支持 1)单击BAE平台中的扩展服务 2)添加新服务(MySQL) 3)选择MySQL套餐 4)创建完成后,效果如下图所示 5)使用phpmyadmin导入数据到数据库 6)设置dedecms系统的配置文件,连接MySQL数据库 在dedecms系统的根目录下有一个data文件夹,里面有一个common.inc.php文件,这个文件就是dedecms系统的配置文件,相当于中级项目的config.php 通过单击数据库名称,可以获取如下MySQL信息: 设置common.inc.php文件,效果如下图所示: 设置完成后,通过SVN软件上传到服务器端。 7)登陆dedecms系统后台http: //域名/dede/即可,输入用户名admin密码admin 如果出现如上界面代表已经配置成功! 4、把昨天开发的微信接口对接系统(更换主机或服务器) ①复制昨天的api.php文件到dedecms系统目录下并上传到BAE服务器中 ②由于api.php文件位置改变了,所以微信服务器中也需要调整接口地址,又由于api.php文件中的valid验证接口已被注释,所以想重新验证必须开启valid验证接口,如下图所示: ③在微信公众平台,重新设置链接地址 ④设置完成后,必须注释掉valid方法,如下图所示: 重新通过SVN提交到BAE云平台,使用微信验证是否成功 七、微信的自定义菜单 1、微信自定义菜单(创建) 在实际项目开发中,个人建议: 二级菜单不要超过3个 2、微信自定义菜单接口分析 由上图可知,如果想创建自定义菜单必须有一个前提: 需要ACCESS_TOKEN 3、ACCESS_TOKEN 在开发中,如果获取ACCESS_TOKEN密钥: 以上接口调用方式非常简单,只需要提供两个参数appid与secret,这两个选项可以在以下位置获取: (基本配置选项下方) 使用get请求获取access_token,效果如下图所示: 4、创建自定义菜单 通过自定义菜单的创建接口+access_token实现自定义菜单的创建(curl支持) curl如何模拟post请求四步走: 1)初始化curl句柄 2)设置curl 3)执行curl 4)关闭curl 例1: 使用curl抓取XX页面 例2: 使用curl+access+token+微信接口实现自定义菜单的创建 当我们第一次运行时,系统会自动弹出如下错误: SSL证书错误: 当正常请求时,当我们访问服务器时,系统会自动进行证书校检,这个证书可以在浏览器端访问到,但是如果你采用的是模拟访问的方式,则找不到此证书,所以以上程序会报错。 那如何解决以上问题呢? 答: 可以使用curl禁止服务器端校检SSL证书,只需要在设置curl中,添加以下两行代码即可: 再次请求,结果如下图所示: 特别注意: 菜单创建成功后,微信端无法马上生效,因为微信具有缓存,必须等待24小时才可以生效,我们可以通过取消关注并再次关注微信账号来达到更新的目的。 5、根据以上菜单创建项目菜单(微网站、产品中心、联系我们) 说明: type: view,代表跳转链接,可以跳转到指定的url页面 type: click,代表单击按钮,代表向微信服务器发送请求(api.php接口) 对于我们很多小伙伴使用的都是订阅号,其默认没有自定义菜单怎么办呢? 答: 可以使用官方提供的测试账号 6、自定义菜单的事件推送功能 自定义菜单的推送事件对于微信公众平台而言是一个接收过程,所以可以通过接收接口来实现判断用户单击了哪个按钮: ①定义两个变量$event与$key用于接收Event与EventKey节点 ②在接收类型中,判断用户请求 设置完成后,通过SVN上传,测试结果: 八、微信与MySQL数据库 设置完成后,通过SVN上传代码到BAE云平台 九、关注回复接口 当我们关注微信公众账号时,系统会自动返回一条信息,那么这个就是关注回复接口。 分析关注回复接口XML文本: 通过以上代码分析可知,如果用户发送的节点信息包含MsgType为event且Event=subscribe代表用户单击是关注按钮。 测试结果:
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 开发 响应