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


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 相关文章推荐
javascrip关于继承的小例子
May 10 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
jQuery回到顶部的代码
Jul 09 Javascript
AngularJS辅助库browserTrigger用法示例
Nov 03 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
老生常谈jacascript DOM节点获取
Apr 17 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
尝试自己动手用react来写一个分页组件(小结)
Feb 09 Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 Javascript
vue-router重定向和路由别名的使用讲解
Jan 19 Javascript
Vue用mixin合并重复代码的实现
Nov 27 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
ftp类(myftp.php)
2006/10/09 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php文件操作相关类实例
2015/06/18 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Yii框架实现图片上传的方法详解
2017/05/20 PHP
PHP培训要多少钱
2017/06/06 PHP
浅谈PHP各环境下的伪静态配置
2019/03/13 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
浅探express路由和中间件的实现
2019/09/30 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
python中实现php的var_dump函数功能
2015/01/21 Python
Django中使用第三方登录的示例代码
2018/08/20 Python
对python cv2批量灰度图片并保存的实例讲解
2018/11/09 Python
解决PyCharm不运行脚本,而是运行单元测试的问题
2019/01/17 Python
Python 使用folium绘制leaflet地图的实现方法
2019/07/05 Python
python实现最大优先队列
2019/08/29 Python
python对文件的操作方法汇总
2020/02/28 Python
phonegap常用事件总结(必看篇)
2017/03/31 HTML / CSS
英国最大的LED专业零售商:Led Hut
2018/03/16 全球购物
瑞典最大的儿童用品网上商店:pinkorblue.se
2021/03/09 全球购物
小学教师学期末自我评价
2013/09/25 职场文书
医院后勤自我鉴定
2013/10/13 职场文书
学生就业推荐信
2013/11/13 职场文书
五好关工委申报材料
2014/05/31 职场文书
就业推荐表导师评语
2014/12/31 职场文书
三孔导游词
2015/02/05 职场文书
会议通知
2015/04/15 职场文书
签订劳动合同通知书
2015/04/16 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers