微信小程序 本地数据读取实例


Posted in Javascript onApril 27, 2017

微信小程序 本地数据读取实例

一般情况下,小程序的utils这个文件夹下,我们可以把本地的数据写进去,封装成.js文件,提供对外暴露的接口,然后读取本地数据。如果涉及到一些针对这些数据的处理方法,也可以把方法写好,封装到.js文件里面,然后需要时调用。

module.exports = { 
  mtData: mtData, 
  searchmtdata: searchmtdata, 
  usedraw: usedraw 
} 
var mt_data = mtData() 
function searchmtdata(id) { 
  var result 
  for (let i = 0; i < mt_data.list.length; i++) { 
    var mt = mt_data.list[i] 
    if (mt.id == id) { 
      result = mt 
    } 
  } 
  return result || {} 
} 
 
function mtData() { 
  var arr = { 
    list: [ 
      { 
        id: '1', 
        MTId: 'MT001', 
        status: 'working', 
        Duration: 3, 
        Operator: 'tom', 
        IdleReason: 'lunch' 
      }, { 
        id: '2', 
        MTId: 'MT002', 
        status: 'Idle', 
        Duration: 7, 
        Operator: 'jerry', 
        IdleReason: 'reparied' 
      }, { 
        id: '3', 
        MTId: 'MT003', 
        status: 'Idle', 
        Duration: 6, 
        Operator: 'tom', 
        IdleReason: 'lunch' 
      }, { 
        id: '4', 
        MTId: 'MT004', 
        status: 'working', 
        Duration: 9, 
        Operator: 'jerry', 
        IdleReason: 'reparied' 
      }, { 
        id: '5', 
        MTId: 'MT005', 
        status: 'Idle', 
        Duration: 2, 
        Operator: 'tom', 
        IdleReason: 'lunch' 
      }, { 
        id: '6', 
        MTId: 'MT006', 
        status: 'working', 
        Duration: 6, 
        Operator: 'jerry', 
        IdleReason: 'reparied' 
      }, { 
        id: '7', 
        MTId: 'MT007', 
        status: 'Idle', 
        Duration: 1, 
        Operator: 'tom', 
        IdleReason: 'lunch' 
      } 
    ] 
  } 
  return arr 
}

如上面的代码片段所示,function mtData写好的本地数据,其中包含对象List。另外还有一个function searchmtdata,这个方法是根据传参的不同加载具体的数据,接下来会用到,方法和数据都写好后,需要写一个对外暴露的接口:

module.exports = { 
  mtData: mtData, 
  searchmtdata: searchmtdata, 
  usedraw: usedraw 
}

在其他页面调用data文件(一般是在js文件里面)

var fileData = require('../../utils/data.js') 
Page({ 
 data: { 
  showData: fileData.mtData().list, 
 }, 
})

像上面的示例一样,在data{}中赋值后,showData就可以直接在wxml中显示了。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Javascript验证上传图片大小[前台处理]
Jul 18 Javascript
js变量、作用域及内存详解
Sep 23 Javascript
js阻止默认浏览器行为与冒泡行为的实现代码
May 15 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
Aug 01 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
bootstrap轮播模板使用方法详解
Nov 17 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 #Javascript
js获取浏览器的各种属性
Apr 27 #Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 #jQuery
详解axios在node.js中的post使用
Apr 27 #Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 #jQuery
js绑定事件和解绑事件
Apr 27 #Javascript
详解ECMAScript6入门--Class对象
Apr 27 #Javascript
You might like
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php str_replace的替换漏洞
2008/03/15 PHP
php类的扩展和继承用法实例
2015/06/20 PHP
Yii2框架自定义类统一处理url操作示例
2019/05/25 PHP
PHP设计模式入门之迭代器模式原理与实现方法分析
2020/04/26 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
js 控制页面跳转的5种方法
2013/09/09 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JavaScript判断访问的来源是手机还是电脑,用的哪种浏览器
2013/12/12 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
下一代Bootstrap的5个特点 超酷炫!
2016/06/17 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
解决Vue页面固定滚动位置的处理办法
2017/07/13 Javascript
详解RequireJs官方使用教程
2017/10/31 Javascript
微信小程序 弹窗输入组件的实现解析
2019/08/12 Javascript
vue 实现websocket发送消息并实时接收消息
2019/12/09 Javascript
微信浏览器左上角返回按钮监听的实现
2020/03/04 Javascript
JS实现瀑布流效果
2020/03/07 Javascript
iview实现图片上传功能
2020/06/29 Javascript
Python实现SMTP发送邮件详细教程
2021/03/02 Python
Python3之文件读写操作的实例讲解
2018/01/23 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python读取Kafka实例
2019/12/23 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
PHP面试题大全
2015/10/16 面试题
教师绩效考核方案
2014/01/21 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
党校学习心得体会范文
2014/09/09 职场文书
劳动纠纷调解协议书格式
2014/11/30 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书
vue项目两种方式实现竖向表格的思路分析
2021/04/28 Vue.js
MySQL 分页查询的优化技巧
2021/05/12 MySQL
python的变量和简单数字类型详解
2021/09/15 Python