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


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+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
理解javascript中的回调函数(callback)
Sep 02 Javascript
Javascript中的包装类型介绍
Apr 02 Javascript
JavaScript实现表格点击排序的方法
May 11 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
Jan 17 Javascript
在javascript中使用com组件的简单实现方法
Aug 17 Javascript
php register_shutdown_function函数详解
Jul 23 Javascript
基于es6三点运算符的使用方法(实例讲解)
Oct 12 Javascript
用Fundebug插件记录网络请求异常的方法
Feb 21 Javascript
Vue-Cli 3.0 中配置高德地图的两种方式
Jun 19 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
Dec 14 Vue.js
react合成事件与原生事件的相关理解
May 13 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
自制汽车收音机天线:收听广播的技巧和方法
2021/03/02 无线电
一个经典实用的PHP图像处理类分享
2014/11/18 PHP
PHP 开发者该知道的 5 个 Composer 小技巧
2016/02/03 PHP
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
2013/04/17 Javascript
jquery中的on方法使用介绍
2013/12/29 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
jquery判断复选框选中状态以及区分attr和prop
2015/12/18 Javascript
jquery replace方法去空格
2017/05/08 jQuery
ReactNative列表ListView的用法
2017/08/02 Javascript
详解JS模块导入导出
2017/12/20 Javascript
vue的style绑定background-image的方式和其他变量数据的区别详解
2018/09/03 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
python http基本验证方法
2018/12/26 Python
Pytorch加载部分预训练模型的参数实例
2019/08/18 Python
python 实现绘制整齐的表格
2019/11/18 Python
Opencv图像处理:如何判断图片里某个颜色值占的比例
2020/06/03 Python
pycharm软件实现设置自动保存操作
2020/06/08 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
Java软件工程师综合面试题笔试题
2013/09/08 面试题
技术学校毕业生求职信分享
2013/12/02 职场文书
大学生实习自我鉴定
2013/12/11 职场文书
银行实习鉴定
2013/12/13 职场文书
政法学院毕业生求职信
2014/02/28 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
关于保护环境的建议书
2014/05/13 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
2015年办税服务厅工作总结
2015/07/23 职场文书
会议室管理制度范本
2015/08/06 职场文书
校运会班级霸气口号
2015/12/24 职场文书
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS