微信小程序如何實現移動端報表平臺

這篇文章主要介紹了微信小程序如何實現移動端報表平臺，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序如何實現移動端報表平臺”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!