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

更新时间：2019年06月03日 11:45:06 作者：https://www.cnblogs.com/allen0118/p/10965897.html

这篇文章主要介绍了产制造追溯系统-通过微信小程序实现移动端报表平台 ,本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

前言

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

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

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

首先我们需要搭建环境，其实很简单，按照“微信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中this的学习笔记及用法整理
在本篇文章里小编给大家整理的是关于JavaScript中this的使用以及代码实例，需要的朋友们学习下。
2020-02-02
两种JS实现屏蔽鼠标右键的方法
这篇文章主要介绍了两种JS实现屏蔽鼠标右键的方法，浏览者在访问你网页的时候就不能点击右键，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2015-08-08
js词法作用域与this实例详解
作用域值一个变量的作用饿范围,下面这篇文章主要给大家介绍了关于js词法作用域与this的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
TypeError document.getElementById(...) is null错误原因
这篇文章主要介绍了TypeError document.getElementById(...) is null错误原因,这是很容易犯的一个低级错误,需要的朋友可以参考下
2015-05-05
JS实现的DOM插入节点操作示例
这篇文章主要介绍了JS实现的DOM插入节点操作,结合实例形式分析了javascript针对页面dom元素动态操作相关实现技巧,需要的朋友可以参考下
2018-04-04
js 深拷贝函数
Javascript中的对像赋值与Java中是一样的,都为引用传递.就是说,在把一个对像赋值给一个变量时,那么这个变量所指向的仍就是原来对像的地址.那怎么来做呢答案是克隆.
2008-12-12
JS之相等操作符详解
下面小编就为大家带来一篇JS之相等操作符详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
javascript时间戳和日期字符串相互转换代码(超简单)
下面小编就为大家带来一篇javascript时间戳和日期字符串相互转换代码(超简单)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-06-06
javascript dom 操作详解 js加强
javascript dom 操作详解 js加强操作实现代码。
2009-07-07
JavaScript 题型问答有答案参考
JavaScript 题型问答有答案参考，都是一些开发中容易碰到的问题。
2010-02-02