VIP用户交流群:462197261 收藏本站北冥有鱼 互联网前沿资源第一站 助力全行业互联网+
在线客服:78895949
tonglan
  • 当前位置:
  • 产制造追溯系统之通过微信小程序实现移动端报表平台

    前言

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

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

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

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

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

    首先我们需要搭建环境,其实很简单,按照“微信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数据操作和函数调用方法
    • 微信小程序按钮点击跳转页面详解

    广而告之:
    热门推荐:
    PHP排序算法之冒泡排序(Bubble Sort)实现方法详解

    本文实例讲述了PHP排序算法之冒泡排序(Bubble Sort)实现方法。分享给大家供大家参考,具体如下: 基本思想: 冒泡排序是一种交换排序,它的基本思想是:两两比较相邻记录的关键字,如果反序则交换,直到没有反序的记录为止。 最简单排序实现: 我们先来看看在没有学习各种排序···

    WindowsXP中快速配置Apache+PHP5+Mysql

    汗。废话不多说,先罗列出我下载的相关程序的版本: Mysql-4.1.8-essential-win Mysql-gui-tools-5.0-r12-win32 php-5.2.5-win32-installer apache_2.2.4-win32-x86-no_ssl phpMyAdmin-2.11.5.1-all-languages navicat8_mysql_cs-v8.0     对这些···

    浅析css3中matrix函数的使用

    scale(sx,sy)对应matrix(sx,0,0,sy,0,0)  拉伸 rotate(θ)对应matrix(cosθ,sinθ,-sinθ,cosθ,0,0)  旋转 skew(θx,θy)对应matrix(1,tan(θy),tan(θx),1,0,0)   倾斜 以上这篇浅析css3中matrix函数的使···

    Three.js中网格对象MESH的属性与方法详解

    前言 本文主要给大家介绍了关于Three.js网格对象MESH的属性与方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍: 创建一个网格需要一个几何体,以及一个或多个材质。当网格创建好之后,我们就可以将它添加到场景中并进行渲染。网格对象提供了几个属性和方···

    dedecms织梦dede:arclist按照自定义字段的条件调用相关文章

    dedecms织梦dede:arclist按照自定义字段的条件调用相关文章,这对于想要在首页调用某个自定义字段的文章的同学来讲,非常不错 打开 \include\taglib\arclist.lib.php 找到 //关键字条件 在它的上面加入 1 2 ···

    Vue框架里使用Swiper的方法示例

    下载swiper 首先使用npm 或者cnpm下载swiper cnpm install swiper 引入swiper import Swiper from ‘swiper'; import ‘swiper/dist/css/swiper.min.css'; 使用swiper <div class="swiper-container"> <div class="swiper-wrapper"> <div class="s···

    dedecms安全防范措施设置的集锦大全

    很多所谓的“黑客”都是用工具来扫描入侵,厉害点的人是不屑来黑我们的小网站的,所以我们一般做好安全防护就可以了。以下是我收集整理的内容: 第一、安装的时候数据库的表前缀,最好改一下,不用dedecms默认的前缀dede_,可以改成ljs_,随便一个名称即可。 第二、···

    PHP命令空间namespace及use的用法小结

    命名空间一个最明确的目的就是解决重名问题,PHP中不允许两个函数或者类出现相同的名字,否则会产生一个致命的错误。这种情况下只要避免命名重复就可以解决,最常见的一种做法是约定一个前缀。 使用namespace的目的: 团队合作项目时,避免与团队其它成员新建的类发生冲突;个···

    Mysql WorkBench安装配置图文教程

    本文为大家分享了Mysql WorkBench安装配置图文教程,供大家参考,具体内容如下 workbench下载地址 下载到workbench下载包后按照默认提示安装。 如果需要切换workbench的新老版本,可以按照如下提示切换: workbench连接数据库 输入连接数据库id、端口号、用户名和密码。 ···

    php中mysql连接和基本操作代码(快速测试使用,简单方便)

    偶尔要用到php做一些mysql数据库的操作测试,自己写起来太麻烦,搜索的结果一般都又包含一大堆没用的代码,这里将php mysql的操作做一下总结,希望以后用到的时候不用再感到麻烦了。 复制代码 代码如下:<?php$dbhost='localhost';//数据库服务器名称$dbuser='root';//···