有问题可以关注公众号：提着月亮去火星
由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求.
第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架.
第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应.
目前完成三个界面如下:
上面的就是 目前的界面以及手机适应的效果,后期需要修改.
下面的是第一个界面的代码:
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" /><!-- Jquery --><script src="/WeChatDemo/jquery-weui/dist/lib/jquery-2.1.4.js"></script><!--weui css--><link rel="stylesheet" href="/weui/1.1.0/style/weui.min.css" /><!--jQuery weui--><link rel="stylesheet" href="/jquery-weui/0.8.0/css/jquery-weui.min.css"><!--切换样式--><style type="text/css">.weui_navbar_item.weui_bar_item_on {color: #2196F3;cursor: pointer;}</style><title>售后测试</title></head><body ontouchstart><header class="ui-header"><h1>**电气售后服务公众号</h1></header><div class="weui-cells weui-cells_form"><!-- 车型 --><div class="weui-cell"><div class="weui-cell__hd"><label class="weui-label ">车型</label></div><div class="weui-cell__bd"><!-- 这个地方的pattern 需要进行修改 --><!-- 此处输入车型信息 添加 车型class --><input class="weui-input chexing" type="text" placeholder="点击选择车型"></div></div><!-- 车型 --><!-- 车号 --><div class="weui-cell weui-cell_vcode"><div class="weui-cell__hd"><label class="weui-label">车号</label></div><div class="weui-cell__bd"><!-- 此处添加车号信息 添加车号 class --><input class="weui-input chehao" type="text" placeholder="请手动输入机车号"></div></div><!-- 车号 --><!-- 日期 --><div class="weui-cell"><div class="weui-cell__hd"><label for="" class="weui-label">日期</label></div><div class="weui-cell__bd"><!-- 此处添加 日期信息 添加日期 class --><!-- <input class="weui-input faultdate" type="date" value=""/> --><input class="weui-input faultdate" type="text" data-toggle='date'/></div></div><!-- 日期 --><!-- 故障发生地点 --><!-- 暂时有些问题 先去掉 --><!-- <div class="weui-cell"><div class="weui-cell__hd"><label for="" class="weui-label">地点</label></div><div class="weui-cell__bd"><input class="weui-input faultarea" type="text" data-toggle="city-picker" value="浙江 杭州 拱墅区" /></div></div> --><!-- 故障发生地点 --><!-- 时间 --><!-- 这个部分暂时省略,等待后期需求需要在改回去 --><!-- <div class="weui-cell"><div class="weui-cell__hd"><label for="" class="weui-label">时间</label></div><div class="weui-cell__bd">此处添加 时间信息 添加时间 class<input class="weui-input faulttime" type="datetime-local" value="" placeholder=""></div></div> --><!-- 时间 --><!-- 机车故障信息 --><div class="weui-cells__title">机车故障填报区</div><div class="weui-cells weui-cells_form"><div class="weui-cell"><div class="weui-cell__bd"><!-- 故障信息 添加故障class faultinfo --><textarea class="weui-textarea faultinfo" placeholder="请在此处填写机车故障信息!" rows="3"></textarea><div class="weui-textarea-counter"><span>0</span>/200</div></div></div></div><!-- 机车故障信息 --></div><!-- 提交成功提示界面 --><a class="weui-btn weui-btn_primary">提交</a><a class="weui-btn weui-btn_warn">取消</a><!-- 提交成功提示界面 --><!-- 底部foot --><div class="weui-footer weui-footer_fixed-bottom"><p class="weui-footer__links"><a href="javascript:void(0);" class="weui-footer__link ">**电气售后</a></p><p class="weui-footer__text ">Copyright © - **</p></div><!-- 底部foot --><script type="text/javascript">$(document).ready(function(){$("a.weui-btn.weui-btn_primary").click(function(){alert("已经获取点击事件"); var chexing = $(".weui-input.chexing").val();var chehao = $(".weui-input.chehao").val();var faultdate = $(".weui-input.faultdate").val();var faulttime = $(".weui-input.faulttime").val();var faultinfo = $(".weui-textarea.faultinfo").val();alert("车型是:" + chexing + "车号是:" + chehao + "故障填报时间是:" + faultdate+"故障时间是:" + faulttime + "故障信息是:" + faultinfo); /* $.ajax({//直接"post"或者"get",不需要"doPost","doGet"，该函数到后端接收缓冲区会自动匹配type : "post",//servlet文件名为Calculator，需要提前在web.xml里面注册url : "FaultServlet", dataType : "json", //数据类型，可以为json，xml等等，data :{"chexing" : chexing,//车型"chehao":chehao,//车号"faultdate":faultdate,//故障时间"faultinfo":faultinfo //故障信息},success : function(response){//处理后端传递过来的 JSON 数据.var success = response.success;alert("后端处理完毕");if(success == "SUCCESS"){//使用jquery 代码进行跳转.$(location).attr('href', '//WeChatDemo/submitsuccess.html');}},error : function(xhr, status, errMsg,response){//服务器错误处理var v1 = xhr;var v2 = status;var v3 = errMsg;alert("数据传输失败!");}}); */// $(location).attr('href', '//WeChatDemo/submitsuccess.html');$(location).attr('href', 'http://localhost:20000//WeChatDemo/submitsuccess.html');});<!--这个是机车车型的Picker-->$(".weui-input.chexing").picker({// input: '.weui-input.chexing',//这两个属性加上之后没有效果.有待测试.// container: '#container',title: "选择您的故障车型",cols: [{textAlign: 'center',values: ['HXD1', 'HXD3', 'HXN5', 'HXN5B', 'HXN3', 'HXN3B', 'HXD3D']}]});<!--这个是机车车型的Picker--><!--这个是机车型号的Picker-->/* $(".weui-input.chehao").picker({// input: '.weui-input.chexing',//这两个属性加上之后没有效果.有待测试.// container: '#container',title: "选择您的故障车号",cols: [{textAlign: 'center',values: ['0001', '0002', '0003', '0004', '0005', '0006', '0007']}]}); *///车号的picker 暂时禁用 由于车号估计数量比较多 //所以 为了便于用户的使用 决定使用 手动输入的方式.<!--这个是机车型号的Picker--><!--这个是日期的Picker-->/* $(".weui-input.faultdate").calendar(); */ //这个只是日期的简单的日期 不包括时间的格式.//下面的这个是包括的日期还有时间$(".weui-input.faultdate").calendar();<!--这个是日期的Picker--><!--故障填报区这写字体增加样式-->$(".weui-cells__title").css({"color":"red","font-size":"12px"});/* #18b4ed 蓝色的背景 不正常的绿色 #33cc00 */$(".ui-header").css({"color":"#fff","font-size":"15px","background-color":"#1AAD19","text-align": "center"});/* $(".ui-header h1").css({"color":"#fff","font-size":"20px",}); */<!--故障填报区这写字体增加样式--><!--故障地点-->//$(".weui-input.faultarea").cityPicker();//目前有问题 暂时先去掉<!--故障地点-->});</script><!--页面切换--><script src="https://res./open/libs/zepto/1.1.6/zepto.js"></script><script src="/jquery/1.11.0/jquery.min.js"></script><script src="/jquery-weui/0.8.2/js/jquery-weui.min.js"></script></body></html>
上面引入文件的时候注意这个地方:
<!--weui css--><link rel="stylesheet" href="/weui/1.1.0/style/weui.min.css" /><!--jQuery weui--><link rel="stylesheet" href="/jquery-weui/0.8.0/css/jquery-weui.min.css">
本地文件也有如下图:
但是引入本地的文件,在电脑测试的时候是可以出现效果的,可是在手机端测试的时候无法适应移动端设备.
改为代码中的引入方式就可以做到适应,不清楚是版本的问题,还是文件的问题.
这里是Jquery-WeUI官网首页:JQueryWeUI官网.
我们可以参照相关Demo,根据自身需求进行前端界面的设计以及代码的编写.
如果觉得《微信公众号开发（三）前端界面》对你有帮助，请点赞、收藏，并留下你的观点哦！
