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


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 相关文章推荐
javascript 无提示关闭窗口脚本
Aug 17 Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
一些实用性较高的js方法
Apr 19 Javascript
JavaScript实现通过select标签跳转网页的方法
Sep 29 Javascript
详解vue-router基本使用
Apr 18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
vue自定义指令directive实例详解
Jan 17 Javascript
微信小程序中使用wxss加载图片并实现动画效果
Aug 13 Javascript
vue实现axios图片上传功能
Aug 20 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 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
全国FM电台频率大全 - 12 安徽省
2020/03/11 无线电
PHP多种序列化/反序列化的方法详解
2017/06/23 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
2010/09/12 Javascript
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
详谈nodejs异步编程
2014/12/04 NodeJs
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
javascript实现行拖动的方法
2015/05/27 Javascript
js基础知识(公有方法、私有方法、特权方法)
2015/11/06 Javascript
jQuery 1.9.1源码分析系列(十五)动画处理之缓动动画核心Tween
2015/12/03 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
vue 公共列表选择组件,引用Vant-UI的样式方式
2020/11/02 Javascript
python之import机制详解
2014/07/03 Python
Python contextlib模块使用示例
2015/02/18 Python
利用python获取某年中每个月的第一天和最后一天
2016/12/15 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
python 实现A*算法的示例代码
2018/08/13 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
英国手机壳购买网站:Case Hut
2019/04/11 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
巾帼文明岗汇报材料
2014/12/24 职场文书
先进党支部申报材料
2014/12/24 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
python随机打印成绩排名表
2021/06/23 Python
Python实现猜拳与猜数字游戏的方法详解
2022/04/06 Python