产制造追溯系统之通过微信小程序实现移动端报表平台


Posted in Javascript onJune 03, 2019

前言

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

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

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

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

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

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

产制造追溯系统之通过微信小程序实现移动端报表平台

产制造追溯系统之通过微信小程序实现移动端报表平台

产制造追溯系统之通过微信小程序实现移动端报表平台

总结

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

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

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

Javascript 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
关于scrollLeft,scrollTop的浏览器兼容性测试
Mar 19 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
仅9张思维导图帮你轻松学习Javascript 就这么简单
Jun 01 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
js上传图片预览的实现方法
May 09 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
Vue切换div显示隐藏,多选,单选代码解析
Jul 14 Javascript
深入理解 JS 垃圾回收
Jun 03 #Javascript
如何让微信小程序页面之间的通信不再变困难
Jun 03 #Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
Jun 03 #Javascript
使用watch在微信小程序中实现全局状态共享
Jun 03 #Javascript
深入理解JS异步编程-Promise
Jun 03 #Javascript
模块化react-router配置方法详解
Jun 03 #Javascript
react 组件传值的三种方法
Jun 03 #Javascript
You might like
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
ThinkPHP 连接Oracle数据库的详细教程[全]
2012/07/16 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
ThinkPHP中create()方法自动验证表单信息
2017/04/28 PHP
PHP连续签到功能实现方法详解
2019/12/04 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
Javascript document.referrer判断访客来源网址
2020/05/15 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
js点击更换背景颜色或图片的实例代码
2013/06/25 Javascript
IE下写xml文件的两种方式(fso/saveAs)
2013/08/05 Javascript
JS随机调用指定函数的方法
2015/07/01 Javascript
js style.display=block显示布局错乱问题的解决方法
2016/09/21 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
jQuery实现可拖动进度条实例代码
2017/06/21 jQuery
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
详解Vue之计算属性
2020/06/20 Javascript
Swift中的协议(protocol)学习教程
2016/07/08 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
基于Django URL传参 FORM表单传数据 get post的用法实例
2018/05/28 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Python3.7安装pyaudio教程解析
2020/07/24 Python
总经理岗位职责描述
2014/02/08 职场文书
学前班评语大全
2014/05/04 职场文书
暑假学习心得体会
2014/09/02 职场文书
2014会计年终工作总结
2014/12/20 职场文书
Python Pandas模块实现数据的统计分析的方法
2021/06/24 Python