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


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 相关文章推荐
js 手机号码合法性验证代码集合
Sep 29 Javascript
获取当前点击按钮的id用this.id实现
Mar 17 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
jQuery插件zepto.js简单实现tab切换
Jun 16 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
easyui tree带checkbox实现单选的简单实例
Nov 07 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
AngularJS 的$timeout服务示例代码
Sep 21 Javascript
Element-UI+Vue模式使用总结
Jan 02 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 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
PHP出错界面
2006/10/09 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
ThinkPHP入库出现两次反斜线转义及数据库类转义的解决方法
2014/11/04 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
PHP7 其他语言层面的修改
2021/03/09 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
如何快速的呈现我们的网页的技巧整理
2007/07/01 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
javascript实现的元素拖动函数宿主为浏览器
2014/07/21 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
详解vue-cli 脚手架项目-package.json
2017/07/04 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vue自定义指令的创建和使用方法实例分析
2018/12/04 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
2019/01/19 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
vue仿ios列表左划删除
2019/09/26 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
详谈python read readline readlines的区别
2017/09/22 Python
python 数字类型和字符串类型的相互转换实例
2018/07/17 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
django框架使用方法详解
2019/07/18 Python
python分割一个文本为多个文本的方法
2019/07/22 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
全球最大的生存食品、水和装备专用在线市场:BePrepared.com
2020/01/02 全球购物
外语专业毕业生自我评价分享
2013/10/05 职场文书
个人求职信范文分享
2014/01/06 职场文书
大学生个人自荐信样本
2014/03/02 职场文书
促销活动总结
2014/04/28 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
农民工预备党员思想汇报
2014/09/14 职场文书
起诉书格式范文
2015/05/20 职场文书
Vue实现下拉加载更多
2021/05/09 Vue.js
python process模块的使用简介
2021/05/14 Python