产制造追溯系统之通过微信小程序实现移动端报表平台


Posted in Javascript onJune 03, 2019

前言

前两篇文章主要梳理了一下在生产过程中如何更高效、更稳定的实现条码打印,有不少园子里的朋友私信我,互相讨论了一些技术方面的问题,双方都各有收获,再此感谢博客园提供的这个交流平台,让五湖四海的朋友能够汇聚在一起,互相学习、互相进步!!

生产制造追溯系统-条码打印

生产制造追溯系统-再说条码打印

突破,将报表延伸至移动端

最近几年手机应用的发展速度大家有目共睹,就拿移动支付来说,放在十年前根本不敢想象现如今出门完全不用带现金,一部手机足够了,甚至有的地方可以刷脸支付,忘了带手机也没关系;随着科技的飞速发展,用户的要求也随之越来越高,这篇文章要说的也是跟手机有关--移动报表平台.

首先我们需要搭建环境,其实很简单,按照“微信web开发者工具”即可,下载地址如下:

下载 微信web开发者工具

产制造追溯系统之通过微信小程序实现移动端报表平台

安装好了之后如下图所示,可双击打开:

产制造追溯系统之通过微信小程序实现移动端报表平台

产制造追溯系统之通过微信小程序实现移动端报表平台

点击上图所示的 + 按钮,弹出如下图所示的配置对话框:

产制造追溯系统之通过微信小程序实现移动端报表平台

项目名称:填写该项目的名称,没有特别要求。

目录:表示本地开发电脑上面存放该项目的地方。

APPID:这个 AppID 是需要我们登录到微信公众号平台进行申请的,这里的 APPID一定要跟公众平台上面的 ID 一致。

产制造追溯系统之通过微信小程序实现移动端报表平台

配置完成之后,我们开发编写代码来实现我们需要的功能--通过小程序查询生产状态及进度,这里要区分一下每一种类型的文件表示的意思。

产制造追溯系统之通过微信小程序实现移动端报表平台

index.wxml
<!--index.wxml-->
<view class="container">
<view class="section searcha" wx:for="{{numa}}">
 <view class="search-input-wrapper ">
     <input bindinput="bind_lotname_Input" bindconfirm="query"  class="search-input" placeholder="输入工单号码进行搜索" value="{{search_lotname}}" confirm-type="search" />
    </view>
 <block>
  <icon type="search"  bindtap="bind_icon_search"  size="30" color="'orange'"/>
 </block>
</view>
<view class="section">
 <view wx:for="{{json_str}}" wx:for-item="item" class="flex-wrp line" style="flex-direction:column;">
  <view style='display:flex;'>
  <view>产品名称:</view>
  <view>{{item["PRODUCT_NAME"]}}</view>
  </view>
  <view style='display:flex;'>
  <view>工单总数:</view>
  <view>{{item["QUANTITY"]}}</view>
  </view>
  <view style='display:flex;'>
  <view>生产工序:</view>
  <view>{{item["ROUTE_STEP"]}}</view>
  </view>
  <view style='display:flex;'>
  <view>产出数量:</view>
  <view>{{item["OUTPUT_QTY"]}}</view>
  </view>
  <view style='display:flex;'>
  <view>等待维修:</view>
  <view>{{item["WAITE_REPAIR_QTY"]}}</view>
  </view>
    <view style='display:flex;'>
  <view>完成进度:</view>
  <view>{{item["PROCESS_VALUE"]}}</view>
  </view>
 </view>
</view>
<!-- <button bindtap="bindButtonTap">Search</button> -->
</view>

初步效果如下图所示,通过工单号码随时随地查询当前工单的完成进度,网页端与小程序对比:

产制造追溯系统之通过微信小程序实现移动端报表平台

产制造追溯系统之通过微信小程序实现移动端报表平台

目前所踩到的坑

1.Api接口不支持 IP 地址与端口,只能使用域名。

微信开发文档里面已经说明了,不允许使用类似 127.0.0.1 这种 IP 地址直接访问服务器,路径中也不能包含端口,就算是默认的端口也不能出现,必须通过域名来访问,比如 https://www.baidu.com/api/...

2.只能使用 https协议。

http是不安全的,必须在 IIS 中配置 https协议,而https是需要证书的,我们可以购买或者使用免费的证书,作者是在阿里云申请的免费证书,将证书下载之后拷贝到IIS即可,下面会放图。

3.对应的服务器 TLS 为 TLS 1.0,小程序要求的 TLS 版本必须大于等于1.2。

这是由于服务器 TLS 版本过低引起的,windows server 2008 R2或以上,都可以打开 TLS 1.2,方法见下图。

产制造追溯系统之通过微信小程序实现移动端报表平台

产制造追溯系统之通过微信小程序实现移动端报表平台

产制造追溯系统之通过微信小程序实现移动端报表平台

总结

后续开发过程中,我会将所遇到的困难记录下来并做个总结,这样方便其他朋友少走弯路,如果您觉得对您有帮助,请帮忙点个赞,谢谢!!

目前还只是第一步,后续将会逐渐开发一些更实用的功能,比如说各种查询报表,从而提升用户操作的便利性。

以上所述是小编给大家介绍的产制造追溯系统之通过微信小程序实现移动端报表平台,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
jQuery检测返回值的数据类型
Jul 13 Javascript
Javascript的this用法
Jan 16 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
Oct 21 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
使用p5.js临摹动态图片
Nov 04 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
BootstrapValidator实现表单验证功能
Nov 08 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
js+css3实现简单时钟特效
Sep 13 Javascript
深入理解 JS 垃圾回收
Jun 03 #Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 #Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 #Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 #Javascript
深入理解JS异步编程-Promise
Jun 03 #Javascript
模块化react-router配置方法详解
Jun 03 #Javascript
react 组件传值的三种方法
Jun 03 #Javascript
You might like
『PHP』PHP截断函数mb_substr()使用介绍
2013/04/22 PHP
mysql_connect localhost和127.0.0.1的区别(网络层阐述)
2015/03/26 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
Javascript变量作用域详解
2013/12/06 Javascript
收集json解析的四种方法分享
2014/01/17 Javascript
jQuery插件分享之分页插件jqPagination
2014/06/06 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
2015/12/01 Javascript
AngularJS模仿Form表单提交的实现代码
2016/12/08 Javascript
JavaWeb表单及时验证功能在输入后立即验证(含用户类型,性别,爱好...的验证)
2017/06/09 Javascript
Angular2 组件交互实例详解
2017/08/24 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
原生js实现form表单序列化的方法
2018/08/02 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
使用vuex存储用户信息到localStorage的实例
2019/11/11 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
在cmd命令行里进入和退出Python程序的方法
2018/05/12 Python
Pycharm设置去除显示的波浪线方法
2018/10/28 Python
pytorch之Resize()函数具体使用详解
2020/02/27 Python
基于python实现matlab filter函数过程详解
2020/06/08 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
Pycharm 解决自动格式化冲突的设置操作
2021/01/15 Python
三维科技面试题
2013/07/27 面试题
上课看小说检讨书
2014/02/22 职场文书
妈妈活动方案
2014/08/15 职场文书
赔偿协议书
2015/01/27 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书