交流群:462197261站长百科站长论坛热门标签收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
点击这里给我发消息
  • 当前位置:
  • 产制造追溯系统之通过微信小程序实现移动端报表平台

    前言

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

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

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

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

    最近几年手机应用的发展速度大家有目共睹,就拿移动支付来说,放在十年前根本不敢想象现如今出门完全不用带现金,一部手机足够了,甚至有的地方可以刷脸支付,忘了带手机也没关系;随着科技的飞速发展,用户的要求也随之越来越高,这篇文章要说的也是跟手机有关--移动报表平台.

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

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

    目前所踩到的坑

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

    总结

    后续开发过程中,我会将所遇到的困难记录下来并做个总结,这样方便其他朋友少走弯路,如果您觉得对您有帮助,请帮忙点个赞,谢谢!!

    目前还只是第一步,后续将会逐渐开发一些更实用的功能,比如说各种查询报表,从而提升用户操作的便利性。

    以上所述是小编给大家介绍的产制造追溯系统之通过微信小程序实现移动端报表平台,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持!
    如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

    您可能感兴趣的文章:

    • 微信小程序用户授权,以及判断登录是否过期的方法
    • 微信小程序Page中data数据操作和函数调用方法
    • 微信小程序按钮点击跳转页面详解

    广而告之:
    热门推荐:
    .Net 调用存储过程取到return的返回值

    1. 存储过程 SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: <Author,,Name> -- Create date: <Create Date,,> -- Description: <Description,,> -- ==========================···

    织梦系统字符串内容截取函数

    在织梦(即dedecms)二次开发以及网站建设时,我们经常会用到字符串截取的问题,在织梦中字符串内容截取函数比较常用的有两个。 Html2text() 函数是去掉html标签代码。  cn_substr(str,80) 函数是截取字符串长度。  当然,他们也可以合···

    web.config中配置数据库连接的方式

    在网站开发中,数据库操作是经常要用到的操作,ASP.NET中一般做法是在web.config中配置数据库连接代码,然后在程序中调用数据库连接代码,这样做的好处就是当数据库连接代码需要改变的时候,我们只要修改web.config中的数据库连接代码即可,而不必在修改每一个页面中的数据库连···

    IE下JS保存图片的简单实例

    IE下JS保存图片的简单实例 function ieSave() { var img = document.images[0]; var oPop = window.open(img.src, "", "width=0,height=0,top=5000,left=5000"); for (; oPop.document.readyState != "complete";) { ···

    php使用自定义函数实现汉字分割替换功能示例

    本文实例讲述了php自定义函数实现汉字分割替换功能。分享给大家供大家参考,具体如下: header("Content-type:text/html;charset=utf-8"); $str="赵钱孙"; function mbstringToArray($str,$charset) { $strlen=mb_strlen($str); while($strlen){ $array[]=mb_substr($···

    jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据

    jQuery ajax webservice:get 和 post 一、GET 方式 客户端 复制代码 代码如下: var data = { classCode: "0001"}; // 这里要直接使用JOSN对象 $.ajax({ type: "GET", contentType: "application/json; charset=utf-8", url: "/WebServices/ProductPropertyWebService.as···

    jQuery选择器源码解读(三):tokenize方法

    /* * tokenize方法是选择器解析的核心函数,它将选择器转换成两级数组groups * 举例: * 若选择器为“div.class,span”,则解析后的结果为: * group[0][0] = {type:'TAG',value:'div',matches:match} * group[0][1] = {type:'CLASS',value:'.class',matches:match} * ···

    jQuery移除tr无效的解决方法(tr是动态添加)

    今天在做项目时,碰到一个问题,那就是移除掉某些tr(tr是动态添加的)。尝试了很多方法,都不见效(比如,deleteRow方法,貌似传的参数只能是tr的行数。没有仔细研究目前)。后来,发现这个方法效果不错,特此记录。 $(temp).parent().remove(); //temp为td的id code class=···

    jQuery中页面返回顶部的方法总结

    当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。 方法一 锚点定位 <a href="#" class="top" id="top">返回頂部</a> 这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的)。 方法···

    PHP实现视频文件上传完整实例

    本文以一个完整实例的形式实现了视频文件上传的功能。虽然是比较基础的应用,仍有一定的参考价值。分享给大家供大家参考之用。具体方法如下: 首先,对PHP来说视频也属于文件,我们利用这个道理,可以通过与上传普通文件类似的方式实现上传PHP视频文件。不同的是视频文件一般较···