专栏首页只为你下基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
原创

基于Jquery WeUI的微信开发H5页面控件的经验总结(2)

  在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI,本篇随笔结合官方案例和自己的项目实际开发过程的经验总结,对在H5页面开发过程中设计到的界面控件进行逐一的分析和总结,以期能够给大家在H5页面开发过程中提供有用的参考。

  

  本篇随笔继续上篇随笔《基于Jquery WeUI的微信开发H5页面控件的经验总结(1)》进行介绍其他部分的内容。

  

  7)条码、二维码生成

  

  在我们做一些扫码操作的时候,我们可能需要根据一些参数生成一些URL,然后生成一个二维码的方式,方便手机扫码直接查看,或者给一些条码设备进行条码的读取,那么这两种情况结合起来就是二维码和条码的处理场景。

  

  例如下面的处方信息展示里面,就需要这样的场景。

  

  二维码QRCode使用的地址是:https://www.xinhuihpw.com github.com/davidshimjs/qrcodejs

  

  条码JsBarcode使用的地址是:https://www.motiazxzc.cn github.com/lindell/JsBarcode

  

  使用前,我们引入所需要的qrcodejs和JsBarcode的JS库文件。

  

  <script src="www.lishengzc.cn ~/Content/JQueryTools/qrcodejs/qrcode.min.js"></script>

  

  <script src=" www.feihongyul.cn ~/Content/JQueryTools/JsBarcode/dist/JsBarcode.all.min.js"></script>

  

  二维码和条码的处理脚本很简单,如下JS代码所示。

  

  复制代码

  

  //条码

  

  JsBarcode("#barcode", "@ViewBag.Info.PrescriptionNo", {

  

  format: "CODE128",

  

  lineColor: "#0aa",

  

  height: 50,

  

  displayValue: false

  

  });

  

  //二维码

  

  var url =www.lecaixuanzc.cn '@ViewBag.WebsiteDomain/h5/PrescriptionDetail?id=@ViewBag.Info.ID';

  

  var qrcode = new QRCode(document.getElementById("qrcode"), {

  

  text: url, //www.shentuylgw.cn"@ViewBag.Info.PrescriptionNo",

  

  width: 128,

  

  height: 128,

  

  colorDark : "#000000",

  

  colorLight : "#ffffff",

  

  correctLevel : QRCode.CorrectLevel.H

  

  });

  

  复制代码

  

  使用脚本处理的方式非常不错。

  

  8)JQuery的Ajax/Post/Get等相关处理

  

  在我们前面很多案例代码里面,都采用了JQuery的Ajax/Post/Get/getJSON等函数,它们之间很多时候可以相互替代,差异只是很少的部分。

  

  $.get()方法使用GET方式来进行异步请求,它的语法结构为:$.get( url [, data] [, callback] )。如下代码所示。

  

  $.getJSON()是专门为ajax获取json数据而设置的,并且支持跨域调用,其语法的格式为:getJSON(url,[data],[callback])。

  

  复制代码

  

  var flowUsers = [];

  

  var url = '/qyh5flow/GetCorpUser';

  

  $.getJSON(url, function (data) {

  

  $.each(data, function (www.yixingylzc.cn, item) {

  

  flowUsers.push({

  

  title: item.name, value: item.userid

  

  });

  

  });

  

  $("#txtSelectSignUser"www.wujiu5zhuce.cn).select({

  

  title: "选择会签人员",

  

  items: flowUsers,

  

  multi: true,

  

  //min: 2,

  

  //max: 3,

  

  });

  

  });

  

  复制代码

  

  $.get()和$.getJSON()两种方法,后者比前者多了一个对返回数据进行JSON转换对象的处理,$.get()方法需要使用下面代码进行JSON的转换。

  

  var data = $.parseJSON(json);

  

  $.post()方法使用POST方式来进行异步请求,它的语法结构为:$.post(url,[data],[callback],[type]),这个相对于$.get()的操作,使用POST方式提交。

  

  其中的type:type为请求的数据类型,可以是html,xml,json等类型,如果我们设置这个参数为:json,那么返回的格式则是json格式的,如果没有设置,就和$.get()返回的格式一样,都是字符串的。

  

  如下代码是我们使用$.post()的函数进行数据的提交,注意我们也需要使用$.parseJSON进行返回值JSON转换对象的处理。

  

  复制代码

  

  $.post(url, postData, function (json) {

  

  //转义JSON为对象

  

  var data = $.parseJSON(json);

  

  if (data.Success) {www.zhuyngyule.cn

  

  $.toptip("删除成功!", 'success');

  

  //在界面上找到对应控件ID,移除控件

  

  RemoveImg();

  

  }

  

  else {

  

  $.toast("操作失败:"www.huiyinpp3zc.cn + data.ErrorMessage, "forbidden");

  

  }

  

  });

  

  复制代码

  

  $.ajax()是jquery中通用的一个ajax封装,其语法的格式为:$.ajax(options),其中options是一个object类型,它指明了本次ajax调用的具体参数。

  

  一般在使用FormData对象的时候,我倾向于使用$.ajax进行处理,以便更多的弹性化设置。

  

  复制代码

  

  //提交表单数据和文件

  

  var url = "/qyH5Flow/PaymentSave?userid=@ViewBag.userid";

  

  $.ajax({

  

  url: url,

  

  type: 'post',

  

  processData: false,

  

  contentType: false,

  

  data: formData,

  

  success: function (www.yinmao2zhuce.cn json) {

  

  //转义JSON为对象

  

  var data = $.parseJSON(json);

  

  if (data.Success) {

  

  $.toast("保存成功,稍后请到列表界面查看。");

  

  }

  

  else {

  

  $.toast("保存失败:"www.motianydl.cn + data.ErrorMessage, "forbidden");

  

  }

  

  }

  

  });

  

  复制代码

  

  以上就我进行在案例里面使用的各种操作,有时候可以相互替换,根据需要选择不同的操作方式即可。

  

  9)JS脚本的数组对象处理

  

  上面我们使用了各种异步的操作,如JQuery的Ajax/Post/Get/getJSON等函数操作,经常会涉及对数组的遍历处理或者插入处理。

  

  JS数组是一个很的强大的数组对象,支持很多复杂的操作,对数组的操作也是我们经常处理的方式之一。

  

  例如对于返回的数据,我们一般需要进行数组的遍历,然后逐一追加到界面显示,这里就需要使用$.each()函数。

  

  复制代码

  

  //动态处理图片绑定

  

  $.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {

  

  $.each(data, function (i, item) {

  

  $("#imgAttach").append(`<img class='weui-uploader__file' src='${item.Text}' id='img_${item.Value}'/>`);

  

  });

  

  });

  

  复制代码

  

  $.each()函数另一个经常使用的场景就是根据JQuery选择器进行元素集合的遍历处理。

  

  复制代码

  

  var itemCount = 0;

  

  //计算单选框的选中数量

  

  $("input[type='radio']:checked"www.chaoyuepint.com ).each(function(){

  

  itemCount += 1;

  

  });

  

  //复选框选中算一个

  

  var chkName = []

  

  $("input[type='checkbox']:checked").each(function () {

  

  var name = $(this).attr('name');

  

  if (chkName.indexOf(name) < 0) {

  

  itemCount += 1;

  

  chkName.push(name);

  

  }

  

  });

  

  复制代码

  

  我们在需要加入对象的时候,就需要使用push()函数操作了,有时候往往和$.each()函数配合使用。

  

  复制代码

  

  var items = [];

  

  $.each(data, function (i, item) {

  

  items.push({

  

  title: item.Text, value: item.Value

  

  });

  

  });

  

  复制代码

  

  或者进行元素遍历查询的时候,如下代码所示。

  

  复制代码

  

  //构建选中的列表内容

  

  var list = [];

  

  //计算单选框

  

  $("input[type='radio']:checked").each(function () {

  

  list.push($(this).val());

  

  });

  

  //计算复选框

  

  $("input[type='checkbox']:checked").each(function () {

  

  list.push($(this).val());

  

  });

  

  复制代码

  

  如果我们需要判断某个对象是否在集合里面,我们就会用到$.inArray() 函数进行判断,如下代码所示。

  

  复制代码

  

  if ($.inArray(key, addKeyList) == -1) {

  

  addKeyList.push(key);

  

  addValueList.push(value);

  

  sendList.push({ key: key, value: value});

  

  $('#tagsToSend').addTag(value);

  

  }

  

  复制代码

  

  另外,我们对数组还需要了解,如何移除单个或者所有的集合,这个就用到了splice()函数,如下代码所示。

  

  addKeyList.splice(i, 1);//移除某个对象

  

  addValueList.splice(i, 1);//移除某个对象

  

  sendList.splice(i, 1);//移除某个对象

  

  如果需要清空数组,常用的做法如下所示,也是使用splice()函数。

  

  复制代码

  

  //清空用户选择

  

  function ClearChoice() {

  

  $('#tagsToSend').importTags('');

  

  sendList.splice(0, sendList.length);//待发送的部门、标签、用户列表

  

  addKeyList.splice(0, addKeyList.length);//键的集合

  

  addValueList.splice(0, addValueList.length);//值的集合

  

  }

  

  复制代码

  

  以上就是我们操作数据的时候,经常使用的一些方法。

  

  10)查询即时列表展示

  

  有时候,我们需要根据查询的条件,对数据库的信息进行检索,然后即时的显示在列表中,供选择使用,如下界面所示。

  

  上图是我项目中,根据拼音码或者名称对药品进行检索,返回的数据进行显示的处理。

  

  为了使用搜索栏,我们使用了微信WeUI定义的搜索栏样式,以下是界面定义的搜索栏DIV层,如下代码。

  

  复制代码

  

  <!--搜索栏,类似于微信原生的搜索栏,应用于常见的搜索场景。-->

  

  <div class="weui-search-bar" id="searchBar">

  

  <form class="weui-search-bar__form" onkeydown="if(event.keyCode==13) return false;">

  

  <div class="weui-search-bar__box">

  

  <i class="weui-icon-search"></i>

  

  <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">

  

  <a href="javascript:clear()" class="weui-icon-clear" id="searchClear"></a>

  

  </div>

  

  <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">

  

  <i class="weui-icon-search"></i>

  

  <span>请输入你想要查看的关键字</span>

  

  </label>

  

  </form>

  

  <a href="javascript:clear()" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>

  

  </div>

  

  复制代码

  

  我们在JS代码上执行对应事件的处理,如下所示。

  

  主要就是监控Input控件的内容变化,进行及时的查询和内容展示。

  

  复制代码

  

  //查询框输入内容触发事件

  

  $('#searchInput').bind('input propertychange', function () {

  

  var name = $("#searchInput").val();

  

  //获取Json对象集合,并生成数据显示内容

  

  var url = "/h5/FindDrugWithPager?page=1&rows=5&Name=" + encodeURI(name);

  

  $.getJSON(url, function (data) {

  

  $("#searchContent").html("");

  

  var html = "";

  

  $.each(data.rows, function (i, item) {

  

  var background = (i % 2 == 0) ? "background-color:Highlight" : "";

  

  html += `<li>

  

  <div class='pic'><img src='@ViewBag.WebsiteDomain/Content/images/drug.png' /></div>

  

  <div class='text'>

  

  <h2><i></i><span>` + item.CommonName + `</span><em>`+ item.Specification +`</em></h2>

  

  <p>商品名:` + item.ProductName + `</p>

  

  <p>厂 家:`+item.Manufacturer +`</p>

  

  </div>

  

  <a class='ture' href=\"javascript:;\" onclick=\"AddDrug('` + item.ID + `','`+ item.ProductName +`')\" ><img src='@ViewBag.WebsiteDomain/Content/images/add1-24.png'></a>

  

  </li>`;

  

  });

  

  $("#searchContent").html(html);

  

  });

  

  });

  

  function cancel() {

  

  $("#searchContent").empty();

  

  }

  

  function clear() {

  

  $('#searchInput').val('')

  

  $("#searchContent").empty();

  

  }

  

  复制代码

  

  这里的HTML模板,我们有时候也使用代码块的方式,在模板代码里面插入变量,如下所示。

  

  $.getJSON("/Qyh5Flow/GetImageList2?attachGuid=" + info.AttachGUID, function (data) {

  

  $.each(data, function (i, item) {

  

  $("#previewImage").append(`<img class="weui-preview-box" src='${item.Text}' id='img_${item.Value}'/>`);

  

  });

  

  });

  

  这里的代码块,开始和结束符使用了 ` ` 符号块,其中插入了变量${item.Text} 、${item.Value}等变量字符串,并没有打断模板的内容,如果多行,我们一样的处理,非常方便。

  

  复制代码

  

  $.getJSON(url, function (data) {

  

  var html = "";

  

  $.each(data.rows, function (i, item) {

  

  html += `<div class="weui-panel weui-panel_access">

  

  <div class="weui-panel__hd">

  

  <span>${item.FormName}</span>:<span>${item.EditorName}</span>,<span>${item.Edittime}</span>

  

  <span class="ord-status-txt-ts fr"><b>${GetStatus(item.Status)}</b></span>

  

  </div>

  

  <div class="weui-media-box__bd pd-10">

  

  <div class="weui-media-box_appmsg ord-pro-list">

  

  <div class="weui-media-box__bd">

  

  <p class="weui-media-box__desc">标题:<span>${item.Title}</span></p>

  

  <div class="clear mg-t-10">

  

  <div class="pro-amount fl"><span class="font-13">当前处理类型:<em class="num font-15">${item.Proc_TypeName}</em></span></div>

  

  <div class="pro-amount fr"><span class="font-13">当前处理人:<em class="name">${item.Proc_UserName}</em></span></div>

  

  </div>

  

  </div>

  

  </div>

  

  </div>

  

  <div class="weui-panel__ft">

  

  <div class="weui-cell weui-cell_access weui-cell_link oder-opt-btnbox">

  

  <a href="${item.ViewUrl}?id=${item.ID}" class="ords-btn-dele">查看详情</a>

  

  </div>

  

  </div>

  

  </div>`;

  

  });

  

  $("#" +divname).html(html);

  

  });

  

  复制代码

  

  这是我们推荐使用的JS代码块,整块代码都不影响阅读,而且可以换行排版,非常直观。

  

  11)界面弹窗处理

  

  在微信Weui里面定义了几种常规的弹窗处理。

  

  对话框只能通过 JavaScript 进行调用,微信WeUI提供了三种常用的对话框 Alert, Confirm, Prompt 和 Login。我们也可以通过 $.modal 来自定义对话框

  

  实际上, Alert, Confirm, Prompt 和 Login 都是 Modal 的一种定制而已。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 关于W3Cschool定义的设计模式--常用的9种设计模式的介绍

      tip:每种设计模式,其实都是为了更高效的,更方便的解决在面对对象编程中所遇到的问题。

    不会飞的小鸟
  • Java日期处理易踩的十个坑

      我们设置了10小时,但运行结果是22点,而不是10点。因为Calendar.HOUR默认是按12小时制处理的,需要使用Calendar.HOUR_OF_DA...

    不会飞的小鸟
  • 构建于 B/S 端的 3D 摄像头可视化监控方案

    随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用。

    不会飞的小鸟
  • 使用C#+FFmpeg+DirectX+dxva2硬件解码播放h264流

    本文门槛较高,因此行文看起来会乱一些,如果你看到某处能会心一笑请马上联系我开始摆龙门阵 如果你跟随这篇文章实现了播放器,那你会得到一个高效率,低cpu占用(单路...

    梁规晓
  • 《Vue3.0抢先学》系列之:一个简单的例子

    书接上文:你被我撩拨了一下,从Github上下载了Vue3.0的源码。然后呢,你是不是已经迫不及待的想知道到底怎么样快速的把这个源代码用起来呢?

    一斤代码
  • 程序设计思维

    《SICP》的全名是《Structure and Interpretation of Computer Programs》,中文译名《计算机程序的构造与解释》。...

    Sheepy
  • .net core 实现简单爬虫—抓取博客园的博文列表

    晓晨
  • 从青铜到王者10个css3伪类使用技巧和运用

    伪类经常与伪元素混淆,伪元素的效果类似于通过添加一个实际的元素才能达到,而伪类的效果类似于通过添加一个实际的类来达到。实际上css3为了区分两者,已经明确规定了...

    Nealyang
  • MVC和三层,我的一个不成熟的看法,大家批批

      这里说的MVC指的是设计模式里的MVC不是asp.net mvc。   既然MVC是一种设计模式,那么他就应该在任何地方都可以使用。比如三层。   有人说...

    用户1174620
  • 要啥给啥的写作AI:新闻评论小说都能编,题材风格随便选,真假难辨,16亿参数模型已开源

    这里“一模”,自然是OpenAI横空出世的GPT-2。但今日更秀的另一模型,来自Salesforce——全球最大的SaaS提供商,虽然之前AI能力展露不多,但这...

    量子位

扫码关注云+社区

领取腾讯云代金券