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


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 相关文章推荐
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
JavaScript获取select中text值的方法
Feb 13 Javascript
深入解析js轮播插件核心代码的实现过程
Apr 14 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
Vue官方文档梳理之全局配置
Nov 22 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
Laravel 6 将新增为指定队列任务设置中间件的功能
2019/08/06 PHP
iframe 自适应高度[在IE6 IE7 FF下测试通过]
2009/04/13 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
2015/08/06 Javascript
jQuery实现类似老虎机滚动抽奖效果
2015/08/06 Javascript
JS实现的仿QQ空间图片弹出效果代码
2016/02/23 Javascript
基于jQuery插件实现点击小图显示大图效果
2016/05/11 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
2019/01/30 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
使用python实现扫描端口示例
2014/03/29 Python
跟老齐学Python之数据类型总结
2014/09/24 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
浅谈Python2之汉字编码为unicode的问题(即类似\xc3\xa4)
2019/08/12 Python
将labelme格式数据转化为标准的coco数据集格式方式
2020/02/17 Python
Python爬虫与反爬虫大战
2020/07/30 Python
python eventlet绿化和patch原理
2020/11/21 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
澳大利亚最超值的自行车之家:Reid Cycles
2019/03/24 全球购物
前处理班长职位说明书
2014/03/01 职场文书
初中作文评语大全
2014/04/23 职场文书
平安工地汇报材料
2014/08/19 职场文书
作风建设年度心得体会
2014/10/29 职场文书
2015年教师党员公开承诺书
2015/01/22 职场文书
2015年思想品德教学工作总结
2015/07/22 职场文书
2016年大学生社区服务活动总结
2016/04/06 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
python3读取文件指定行的三种方法
2021/05/24 Python