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

来源：互联网发布：梦想知乎编辑：程序博客网时间：2024/05/16 12:44

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

第一: 了解相关的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="https://cdn.bootcss.com/weui/1.1.0/style/weui.min.css" />        <!--jQuery weui-->        <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">    <!-- 这个地方的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 © 2010-2018 **dq.com</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', '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');  });  <!--这个是机车车型的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.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>

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

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

本地文件也有如下图:

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

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

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

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

阅读全文

0 0