返回顶部
首页 > 资讯 > 前端开发 > VUE >微信小程序Page中怎么实现data数据操作和函数调用方法
  • 748
分享到

微信小程序Page中怎么实现data数据操作和函数调用方法

2024-04-02 19:04:59 748人浏览 独家记忆
摘要

这篇文章主要为大家展示了“微信小程序Page中怎么实现data数据操作和函数调用方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序Page中怎么实现d

这篇文章主要为大家展示了“微信小程序Page中怎么实现data数据操作和函数调用方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序Page中怎么实现data数据操作和函数调用方法”这篇文章吧。

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

//index.js
Page({
 data: {
  text: "This is page data.",
  sliderOffset: 0,
  sliderLeft: 0,
  state:{
     genre:[],
     genre_index: 0,
     model:[],
     model_index: 0,
     terminalStatus:'',
  }
 },
 onLoad: function(options) {
  // Do some initialize when page load.
 },
 onReady: function() {
  // Do something when page ready.
 },
 onShow: function() {
  // Do something when page show.
 },
 onHide: function() {
  // Do something when page hide.
 },
 onUnload: function() {
  // Do something when page close.
 },
 onPullDownRefresh: function() {
  // Do something when pull down.
 },
 onReachBottom: function() {
  // Do something when page reach bottom.
 },
 // Event handler.
 viewTap: function () {
  var p = this.position
  ball(p, 150)
  function ball(x, y) {
   console.log(x,y)
  }
 },
 customData: {
  hi: 'MINA'
 }
})

1、设置data数据

setData 函数用于将数据从逻辑层发送到视图层,同时改变对应的 this.data 的值。注意: 

(1)、直接修改 this.data 无效,无法改变页面的状态,还会造成数据不一致。 

(2)、单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。

setData() 参数格式:接受一个对象,以 key,value 的形式表示将 this.data 中的 key 对应的值改变成 value。其中 key 可以非常灵活,以数据路径的形式给出,如 array[2].message,a.b.c.d,并且不需要在 this.data 中预先定义。
下面设置data中的text和genre_index的值

this.setData({
   'state.genre_index':1,
   text:'data value'
})

2、获取data数据

获取data中的text和genre_index值需要使用this

var gener_index=this.data.state.genre_index
var text=this.data.text

3、调用viewTap函数

在viewTap函数中调用内部的ball函数可以直接调用,如果需要在onReady函数中调用viewTap函数需要使用this。

onReady: function () {
  this.drawBall()
 },

以上是“微信小程序Page中怎么实现data数据操作和函数调用方法”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网VUE频道!

--结束END--

本文标题: 微信小程序Page中怎么实现data数据操作和函数调用方法

本文链接: https://lsjlt.com/news/76978.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 微信小程序Page中怎么实现data数据操作和函数调用方法
    这篇文章主要为大家展示了“微信小程序Page中怎么实现data数据操作和函数调用方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序Page中怎么实现d...
    99+
    2024-04-02
  • 微信小程序Page中如何实现data数据操作和函数调用
    这篇文章主要介绍了微信小程序Page中如何实现data数据操作和函数调用,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序Page中d...
    99+
    2024-04-02
  • 微信小程序Page中data数据操作和函数调用的案例代码
    这篇文章主要介绍了微信小程序Page中data数据操作和函数调用的案例代码,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。微信小程序 详解Pa...
    99+
    2024-04-02
  • 微信小程序中Page()函数怎么用
    这篇文章给大家分享的是有关微信小程序中Page()函数怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。PagePage() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函...
    99+
    2023-06-26
  • 怎么在微信小程序中操作数组
    在微信小程序中操作数组的方法:1.使用push()函数向数组添加数据;2.使用split()函数删除数组数据;3.使用setData方法修改数组数据;具体方法如下:使用push()函数向数组添加一条数据saveNote: function(...
    99+
    2024-04-02
  • 微信小程序中ECMAScript5数组操作方法是什么
    这篇文章主要讲解了“微信小程序中ECMAScript5数组操作方法是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“微信小程序中ECMAScript5数组操作方法是什么”吧!首先补充说明一...
    99+
    2023-06-19
  • 微信小程序怎么实现数据共享与方法共享
    微信小程序怎么实现数据共享与方法共享,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。全局数据共享 Mobox原生小程序开发中我们可以通过 mobx-miniprogram 配...
    99+
    2023-06-26
  • 微信小程序中的数据存储实现方式
    目录全局变量globalData 页面私有变量 datastorage异步存储(根据设备性能的不同,你还真不知道他会存多久) 同步存储(会造成阻塞~) 文件存储 fileSysteM...
    99+
    2024-04-02
  • 微信小程序中App()函数有什么用
    小编给大家分享一下微信小程序中App()函数有什么用,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!AppApp()App()函数用来注册一个小程序。接受一个object参数,其指定小程序的生命周期函数等。object参数说...
    99+
    2023-06-26
  • 微信小程序中怎么存储和查询数据
    在微信小程序中,可以使用小程序的本地存储功能来存储和查询数据。这可以通过微信小程序的wx.setStorageSync和wx.get...
    99+
    2024-04-09
    微信小程序
  • 微信小程序中怎么绑定和传递数据
    要在微信小程序中绑定和传递数据,可以通过以下几种方式: 绑定数据:可以在wxml中使用{{}}来绑定数据,例如:<view...
    99+
    2024-04-09
    微信小程序
  • 微信小程序在{{ }}中怎么直接使用函数
    本篇内容主要讲解“微信小程序在{{ }}中怎么直接使用函数”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“微信小程序在{{ }}中怎么直接使用函数”吧!1. 使用<view>¥{{(m...
    99+
    2023-06-08
  • 微信小程序中本地数据读取的方法
    小编给大家分享一下微信小程序中本地数据读取的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!微信小程序 本地数据读取实例一般情...
    99+
    2024-04-02
  • 如何实现微信小程序中的数据侦听
    这篇文章将为大家详细讲解有关如何实现微信小程序中的数据侦听,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面...
    99+
    2024-04-02
  • 微信小程序中怎么使用store数据共享
    这篇文章主要介绍“微信小程序中怎么使用store数据共享”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“微信小程序中怎么使用store数据共享”文章能帮助大家解决问题。全局数据共享 全局数据共享(状态...
    99+
    2023-07-06
  • 微信小程序比较两个数大小的实现方法
    目录效果图wxml代码wxss代码index.js代码总结效果图 wxml代码 <!--index.wxml--> <view class="demo-box"...
    99+
    2024-04-02
  • 微信小程序在{{ }}中直接使用函数的方法示例
    前言 在微信小程序开发中(原生wxml、wxcss),想直接在{{ }}调用方法处理数据, 但是会报错。如:在项目中涉及到百分比的计算,js浮点数运算会出现精度问题,造成小数位数过...
    99+
    2024-04-02
  • 微信小程序自定义函数的方法是什么
    在微信小程序中,可以通过以下方法自定义函数:1. 在`app.js`中定义全局函数:可以在`App`函数中定义全局函数,这样在整个小...
    99+
    2023-09-29
    微信小程序
  • 微信小程序中数据双向绑定与数据操作的示例分析
    这篇文章主要为大家展示了“微信小程序中数据双向绑定与数据操作的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“微信小程序中数据双向绑定与数据操作的示例分析...
    99+
    2024-04-02
  • 微信小程序如何实现用户数据解密
    小编给大家分享一下微信小程序如何实现用户数据解密,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!微信小程序 用户数据解密官方指引图...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作