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

前言

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

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

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

 

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

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

 

首先咱们须要搭建环境，其实很简单，按照“微信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>

index.js


    wx.request({
      url: 'https://www.123.cn/api/type=wip&action=wip_status', //获取JSON数据
      data: { str: that.data.search_lotname },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {        
        that.setData({
          json_str:res.data
        });
        console.log(res.data);
      }
    })

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

  

目前所踩到的坑

 

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，方法见下图。

 

 

 

总结

 

后续开发过程当中，我会将所遇到的困难记录下来并作个总结，这样方便其余朋友少走弯路，若是您以为对您有帮助，请帮忙点个赞，谢谢！！

目前还只是第一步，后续将会逐渐开发一些更实用的功能，好比说各类查询报表，从而提高用户操做的便利性。