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

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

一般情况下,小程序的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中显示了。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

时间: 2017-04-24

微信小程序学习之数据处理详解

前言 微信小程序数据处理 的核心就是js文件 Page 的 data.他是WXML 和js交互的重要桥梁,WXML 页面需要展示的数据都需要被定义在data中,否则就无法在页面进行展示.data中的数据是通过网络请求或者一些逻辑处理进行设置以及初始化的. data数据的设置有两种方式,例如我们data中的有一个name并且初始化为空 data:{ name:'我是初始化的name' } 当有多个数据时用逗号英文逗号','进行分开,那么如果我们想更改数据就可以 //方式1 this.data.na

微信小程序动态添加分享数据

微信小程序分享效果: js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; return { title: that.data.common.act_name, desc: that.data.common.introduction, path: '/pages/xiangqing/xiangqing?id='+that.data.id, success: functio

微信小程序 本地数据存储实例详解

微信小程序 本地数据存储实例详解 前言 如果您在看此文章之前有过其他程序的开发经验,那一定会知道一般例如安卓或者苹果的原生APP都提供了本地的存储功能,甚至可以使用sqlite数据库来做存储.可是微信的小程序框架基于微信本身,其实际运行环境只是在浏览器里面,所以不会提供那么丰富的数据存储实力.但html5开始已经可以在浏览器里面存储数据,好在微信的小程序给这个功能封装好了,这样我们可以使用数据存储. 每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStor

微信小程序动态的加载数据实例代码

微信小程序刚出来有很多的东西还在更新,先写些刚开始要做的工作 1.首先要写在js里定义一个全局变量 data: { datalist: [] }, 2.请求数据加载,获得整个数组信息 wx.request({ url: httpUrl, data: {}, success: function (res) { that.setData({ datalist: res.data.courses }) },  3.在.wxml中调用 数组的调用用:wx:for="{{datalist}}"

微信小程序 跳转传递数据的实例

微信小程序 跳转传递数据的实例 点击view 跳转页面 <view class="album_image" data-album-obj="{{item}}" bindtap="imageclick"> <image style="width:98%;" src="{{item.data[0].url}}"></image> </view> 声明变量  dat

微信小程序 详解页面跳转与返回并回传数据

微信小程序 详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu

微信小程序之数据双向绑定与数据操作

 微信小程序之数据双向绑定与数据操作 数据双向绑定是指js部分数据发生变化是html部分的数据也会发生变化,当然html部分数据发生变化js部分数据也会发生变化,从而使界面很方便的实现动态数据显示,一般拥有数据双向绑定的前端框架都为mvvm结构.数据双向绑定是个好东西,an1 an2 vue  也都有数据双向绑定的机制,而且基本都差不多,抄来抄去嘛!!下面以一个列表为例子来说下数据双向绑定及数据的操作. 1.把要进行数据双向绑定的属性放在page的data里,然后在html里使用{{属性名}}即

微信小程序 页面跳转及数据传递详解

微信小程序 页面跳转及数据传递详解 类似 Android 的 Intent 传值,微信小程序也一样可以传值: 例如:wxml 中写了一个函数跳转: <view class="itemWeight" catchtap="jumpToOverMissionList"> <view class="textStatus">已完成任务</view> <view class="containVertical

微信小程序 页面跳转和数据传递实例详解

微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navigateBack(OBJECT) 5.使用实现对应的跳转功能: 分析: 其中navigateTo是将原来的页面保存在页面栈中,在跳入到下一个页面的时

微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法

本文实例讲述了微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法.分享给大家供大家参考,具体如下: 很多项目都会有消息记录页,即列表页,紧接着就是点击列表的某一项进入到消息的详情页,这里承接上一篇文章,继续分享如何从列表的item项跳转到下一个页面. 一.效果图 从左边的列表页调到右边的详情页 二.页面之间的跳转 首先要看的是页面的跳转,微信小程序有三种跳转方式可供选择: 1.保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navi

微信小程序 页面跳转传参详解

微信小程序 页面跳转传参,做微信小程序必定会用的这样的功能,这里就记录下本人学习实现代码资料. 刚接触微信小程序,多里面的语法和属性还不怎么聊解,如有不多的地方希望各位大神多多指教.今天来说下微信小程序怎么跳转和传参,话不多说直接上代码. 实现的功能是给列表增加点击功能传参到下一页: 代码如下: <import src="../WXtemplate/headerTemplate.wxml"/> <view> <!--滚动图--> <view&g

微信小程序 页面跳转事件绑定的实例详解

微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

微信小程序 页面跳转传值实现代码

微信小程序 页面跳转传值实现代码 微信小程序的页面路径只能是五层: 现在场景如下: index(首页)打开新页面 list(列表)打开新页面search(条件查询)确定条件返回 list(列表): 这里有个限制,微信只能打开五层网页,意味着:在search页面点击确定的时候是要返回上一页: wx.navigateBack(OBJECT) 该api是无法带参数返回上一页的,微信给出的方法是在全局变量里面添加对象:(真特么操蛋) app.js加入变量search search:'', 后续js头部全

微信小程序 页面跳转传递值几种方法详解

微信小程序 页面跳转传递值 微信小程序导航有两种形式:一种是在写在js中进行跳转,另一种是写在wxml页面中进行跳转. 1.js导航 (1).wx.navigateTo(OBJECT) :保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面. wx.navigateTo({ url: 'test?id=1' }) 获取传递的值: //test.js Page({ onLoad: function(option){ console.log(option.id)

微信小程序 页面跳转如何实现传值

微信小程序 页面跳转如何实现传值 (1)页面跳转如何传值(实现跳转到不同页面) 点击页面 WXML:加入自定义属性(data-category="{{categoryTitle}}") <view class="more" catchtap="onMoreTap" data-category="{{categoryTitle}}"> js:在event中取出category值并加到URL中 onMoreTap:fu

微信小程序视图template模板引用的实例详解

微信小程序视图template模板引用的实例详解 WXML 提供两种文件引用方式import和include. include可以将目标文件除了的整个代码引入,相当于是拷贝到include位置 temlate.wxml <template name="tmp_data" > <view class="content"> <!-- 头像 --> <view class="author-date"> &

微信小程序之绑定点击事件实例详解

微信小程序之绑定点击事件实例详解 微信小程序出来那么久了,趁着有时间自己研究一下,前阶段看一了一下,但是不允许个人注册,现在已经对个人开放了,所以爱好者们可以自己研究了. 首先,我们看一下如何添加底部的标签栏:在app.json里操作 { "pages":[ //在这里添加页面的路径 "pages/index/index", "pages/logs/logs", "pages/home/home" ], "windo