微信公众号开发（三）前端界面

àì夳堔傛蜴生んèń 2022-06-04 08:27 414阅读 0赞

有问题可以关注公众号：YangzaiLeHeHe

由于该公众号主要的用途是用于公司售后服务,经沟通确定相关需求.

第一: 了解相关的UI框架,最终选定了Jquery-WeUI框架.

第二: 制作简单案例,在移动端进行测试,要达到移动端的自适应.

目前完成三个界面如下:

![Center][]

![Center 1][]

![Center 2][]

![Center 3][]

上面的就是 目前的界面以及手机适应的效果,后期需要修改.

下面的是第一个界面的代码:

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0" />
            
            
            <script src="/WeChatDemo/jquery-weui/dist/lib/jquery-2.1.4.js"></script>
            
            <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
            
            <link rel="stylesheet" href="https://cdn.bootcss.com/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">
        
        
          <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">
        
          <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">
        
          
          <input class="weui-input faultdate" type="text" data-toggle='date'/>
        </div>
      </div>
    
    
    
     
    
    
    
    
      
    
    
    <div class="weui-cells__title">机车故障填报区</div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cell">
        <div class="weui-cell__bd">
        
          <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>
    
    
    <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 © 2010-2018 **dq.com</p>
    </div>
    
    
    
    
    
    <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', 'http://inut5w.natappfree.cc//WeChatDemo/submitsuccess.html');
    	               }
    	        },
    	        error : function(xhr, status, errMsg,response)
    	        {	
    	        	//服务器错误处理
    	        	var v1 = xhr;
    	        	var v2 = status;
    	        	var v3 = errMsg;
    	            alert("数据传输失败!");
    	        }
    	    });  */
    	 	
    //	 	 $(location).attr('href', 'http://inut5w.natappfree.cc//WeChatDemo/submitsuccess.html');
    	 	 $(location).attr('href', 'http://localhost:20000//WeChatDemo/submitsuccess.html');
    	  });
    	  
    	  $(".weui-input.chexing").picker({
    		 // input: '.weui-input.chexing',//这两个属性加上之后没有效果.有待测试.
    		 // container: '#container',
    		  title: "选择您的故障车型",
    		  cols: [
    		    {
    		      textAlign: 'center',
    		      values: ['HXD1', 'HXD3', 'HXN5', 'HXN5B', 'HXN3', 'HXN3B', 'HXD3D']
    		    }
    		  ]
    		});
    	  
    	  
    	 /*  $(".weui-input.chehao").picker({
    		 // input: '.weui-input.chexing',//这两个属性加上之后没有效果.有待测试.
    		 // container: '#container',
    		  title: "选择您的故障车号",
    		  cols: [
    		    {
    		      textAlign: 'center',
    		      values: ['0001', '0002', '0003', '0004', '0005', '0006', '0007']
    		    }
    		  ]
    		}); */
    		//车号的picker 暂时禁用 由于车号估计数量比较多 
    		//所以 为了便于用户的使用 决定使用 手动输入的方式.
    	  
    	  
    	/*   $(".weui-input.faultdate").calendar(); */ //这个只是日期的简单的日期 不包括时间的格式.
    	//下面的这个是包括的日期还有时间
    	  $(".weui-input.faultdate").calendar();
    	  
    	  
    	  $(".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.wx.qq.com/open/libs/zepto/1.1.6/zepto.js"></script>
            <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
            <script src="https://cdn.bootcss.com/jquery-weui/0.8.2/js/jquery-weui.min.js"></script>
        </body>
    </html>

上面引入文件的时候注意这个地方:

<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />
            
            <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/0.8.0/css/jquery-weui.min.css">

本地文件也有如下图:

![Center 4][]

但是引入本地的文件,在电脑测试的时候是可以出现效果的,可是在手机端测试的时候无法适应移动端设备.

改为代码中的引入方式就可以做到适应,不清楚是版本的问题,还是文件的问题.

这里是Jquery-WeUI官网首页:[JQueryWeUI官网][JQueryWeUI].

我们可以参照相关Demo,根据自身需求进行前端界面的设计以及代码的编写.

[Center]: /images/20220604/a9ba03e5c341461595f39d4e9234c5f7.png
[Center 1]: /images/20220604/d909c60fb8f146e8994396e75d460ca0.png
[Center 2]: /images/20220604/4e6f02d0ee3c4d8cb26eb1523cb4940f.png
[Center 3]: /images/20220604/490df9b8ab0641a59f4330d486886691.png
[Center 4]: /images/20220604/c6dd9cbcde8446719101d6add60f240a.png
[JQueryWeUI]: http://jqweui.com/