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


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 日期时间函数(经典+完善+实用)
May 27 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
Apr 02 Javascript
jquery选择器-根据多个属性选择示例代码
Oct 21 Javascript
超链接的禁用属性Disabled使用示例
Jul 31 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
详解JavaScript的Date对象(制作简易钟表)
Apr 07 Javascript
Angular工具方法学习
Dec 26 Javascript
ES6入门教程之Class和Module详解
May 17 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
js 数组详细操作方法及解析合集
Jun 01 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 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 伪造本地文件包含漏洞的代码
2011/11/03 PHP
php根据操作系统转换文件名大小写的方法
2014/02/24 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
input的focus方法使用
2010/03/13 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
JavaScript生成随机字符串的方法
2015/03/19 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
jQuery中deferred对象使用方法详解
2016/07/14 Javascript
Vue组件tree实现树形菜单
2017/04/13 Javascript
JavaScript设计模式之策略模式详解
2017/06/09 Javascript
webpack踩坑之路图片的路径与打包
2017/09/05 Javascript
JavaScript设计模型Iterator实例解析
2020/01/22 Javascript
[02:14]DOTA2英雄基础教程 修补匠
2013/12/23 DOTA
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
python创建文件备份的脚本
2018/09/11 Python
Python基础学习之基本数据结构详解【数字、字符串、列表、元组、集合、字典】
2019/06/18 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python3用urllib抓取贴吧邮箱和QQ实例
2020/03/10 Python
8种常用的Python工具
2020/08/05 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
Python解析m3u8拼接下载mp4视频文件的示例代码
2021/03/03 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
财务会计专业应届毕业生求职信
2013/10/18 职场文书
党课学习思想汇报
2014/01/02 职场文书
机械设计及其自动化求职推荐信
2014/02/17 职场文书
实习证明格式范文
2014/10/14 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
幼师辞职信范文
2015/02/27 职场文书
建议书的格式及范文
2015/09/14 职场文书