生産制造追溯系統-通過微信小程式實作移動端報表平台

前言

前兩篇文章主要梳理了一下在生産過程中如何更高效、更穩定的實作條碼列印，有不少園子裡的朋友私信我，互相讨論了一些技術方面的問題，雙方都各有收獲，再此感謝部落格園提供的這個交流平台，讓五湖四海的朋友能夠彙聚在一起，互相學習、互相進步！！

生産制造追溯系統-條碼列印

生産制造追溯系統-再說條碼列印

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

最近幾年手機應用的發展速度大家有目共睹，就拿移動支付來說，放在十年前根本不敢想象現如今出門完全不用帶現金，一部手機足夠了，甚至有的地方可以刷臉支付，忘了帶手機也沒關系；随着科技的飛速發展，使用者的要求也随之越來越高，這篇文章要說的也是跟手機有關--移動報表平台.

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

總結

後續開發過程中，我會将所遇到的困難記錄下來并做個總結，這樣友善其他朋友少走彎路，如果您覺得對您有幫助，請幫忙點個贊，謝謝！！

目前還隻是第一步，後續将會逐漸開發一些更實用的功能，比如說各種查詢報表，進而提升使用者操作的便利性。

作者：Allen Chen無影

出處：http://www.cnblogs.com/allen0118/

郵箱：[email protected] 本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則保留追究法律責任的權利.