生產製造追溯系統-經過微信小程序實現移動端報表平臺

前言

前兩篇文章主要梳理了一下在生產過程當中如何更高效、更穩定的實現條碼打印，有很多園子裏的朋友私信我，互相討論了一些技術方面的問題，雙方都各有收穫，再此感謝博客園提供的這個交流平臺，讓五湖四海的朋友可以匯聚在一塊兒，互相學習、互相進步！！

生產製造追溯系統-條碼打印

生產製造追溯系統-再說條碼打印

 

突破，將報表延伸至移動端

最近幾年手機應用的發展速度你們有目共睹，就拿移動支付來講，放在十年前根本不敢想象現現在出門徹底不用帶現金，一部手機足夠了，甚至有的地方能夠刷臉支付，忘了帶手機也不要緊；隨着科技的飛速發展，用戶的要求也隨之愈來愈高，這篇文章要說的也是跟手機有關--移動報表平臺.

 

首先咱們須要搭建環境，其實很簡單，按照「微信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，方法見下圖。

 

 

 

總結

 

後續開發過程當中，我會將所遇到的困難記錄下來並作個總結，這樣方便其餘朋友少走彎路，若是您以爲對您有幫助，請幫忙點個贊，謝謝！！

目前還只是第一步，後續將會逐漸開發一些更實用的功能，好比說各類查詢報表，從而提高用戶操做的便利性。