產制造追溯系統(tǒng)之通過微信小程序實現(xiàn)移動端報表平臺

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

這篇文章主要介紹了產制造追溯系統(tǒng)-通過微信小程序實現(xiàn)移動端報表平臺 ,本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

前言

前兩篇文章主要梳理了一下在生產過程中如何更高效、更穩(wěn)定的實現(xiàn)條碼打印，有不少園子里的朋友私信我，互相討論了一些技術方面的問題，雙方都各有收獲，再此感謝博客園提供的這個交流平臺，讓五湖四海的朋友能夠匯聚在一起，互相學習、互相進步！！

生產制造追溯系統(tǒng)-條碼打印

生產制造追溯系統(tǒng)-再說條碼打印

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

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

首先我們需要搭建環(huán)境，其實很簡單，按照“微信web開發(fā)者工具”即可，下載地址如下：

下載微信web開發(fā)者工具

安裝好了之后如下圖所示，可雙擊打開：

點擊上圖所示的 + 按鈕，彈出如下圖所示的配置對話框：

項目名稱：填寫該項目的名稱，沒有特別要求。

目錄：表示本地開發(fā)電腦上面存放該項目的地方。

APPID：這個 AppID 是需要我們登錄到微信公眾號平臺進行申請的，這里的 APPID一定要跟公眾平臺上面的 ID 一致。

配置完成之后，我們開發(fā)編寫代碼來實現(xiàn)我們需要的功能--通過小程序查詢生產狀態(tài)及進度，這里要區(qū)分一下每一種類型的文件表示的意思。

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>

初步效果如下圖所示，通過工單號碼隨時隨地查詢當前工單的完成進度,網頁端與小程序對比：