微信小程序中如何获取data内的数据,并且从新赋值,用代码说明

2021-02-20 13:38发布

6条回答
芒果
2楼 · 2021-02-20 14:10

Page({

    //定义初始化数据

    data: {

        name: ”mary”,

        message: ”ma”

    },

    onready: function() {

        //获取初始化数据

        console.log(this.data.name)

        //设置

        This.setData({

            Name:”jack”

        })

    }

})

我是大脸猫
3楼 · 2021-02-20 15:17

通过小程序官方文档可知:

 

Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。其中的参数data用来设置初始数据,WXML 中的动态数据均来自对应 Page 的 data。

所以如果页面需要显示动态数据必须要把数据更新到data中对应的变量中。

  • 页面js文件中这么写:

Page({data: {message: 'Hello MINA!'}})
  • wxml中这么写:

 {{ message }} 

如果该数据在操作过程中发生变化,需要将新数据重新绑定到该变量中,写法如下:

function setData(){var that = this;that.setData({message: '新消息'})}

 

  • 如果想在js文件中使用data中的数据写法如下:

function getData(){var that = this;console.log(that.data.message)}

 

 

传递数组:

其他数据格式暂时不知道,我的数据主要是对象数组格式,传递的时候总是获取不到数据。所以网上找了好多没有具体方案。自己写了一下。仅供参考!

arraylist2 是一个数组,数据格式是[{"id",1},{"content","我的"}]

格式差不多就是这样 然后将它JSON.stringify()传递一下
 

wx.navigateTo({url:'../textcontent/textcontent?arraylist2=' + JSON.stringify(that.data.arraylist2),success:function(res) {console.log("成功回调",res);},fail : function(res){console.log("失败回调",res);}})

在下一个页面 获取值然后JSON.aprse()转换成json对象

data: {arraylist:""},onLoad: function (options) {console.log("options", options.arraylist2.title);//var array = options.arraylist2.split(",");var array = JSON.parse(options.arraylist2);this.setData({arraylist: array})console.log("arraylist", this.data.arraylist);},

在需要数据的页面就可以获取{{arraylist.title}}

{{arraylist.title}}{{arraylist.content}}

 

微信小程序 跳转传参数 传对象

微信小程序跳转传参

一般都是传字符串到下一页,如果要想传对象怎么办呢?

我的解决办法是先将对象转换为json字符串然后到下个页面将json字符串,再转化为对象。如下:

 

let str=JSON.stringify(e.currentTarget.dataset.item);wx.navigateTo({url: '../toMybaby/babyDetail/babyDetail?jsonStr='+str,success: function (res) {// success},fail: function () {// fail},complete: function () {// complete}})

 

onLoad:function(options){// 生命周期函数--监听页面加载let item=JSON.parse(options.jsonStr);this.setData({ward:item});},


aijingda
4楼 · 2021-02-20 15:18

获取page数据,看代码:var text=this.data.name ,这样就获取到初始化的值

page({

data:{name:"test"},

showData:function(){

var text=this.data.name

}

})


无需指教
5楼 · 2021-02-22 09:36

网络的使用说明

  • 域名只支持 https。包括普通 HTTPS 请求(wx.request)、上传文件(wx.uploadFile)、下载文件(wx.downloadFile) 和 WebSocket 通信(wx.connectSocket)协议

  • 每个微信小程序需要事先设置一个通讯域名,小程序只可以跟指定的域名与进行网络通信。 服务器域名请在 「小程序后台-设置-开发设置-服务器域名」 中进行配置。

  • 域名不能使用 IP 地址或 localhost;

  • 可以配置端口,如 https://myserver.com:8080,但是配置后只能向 https://myserver.com:8080发起请求。如果向 https://myserver.comhttps://myserver.com:9091 等 URL 请求则会失败。

  • 如果不配置端口。如 https://myserver.com,那么请求的 URL 中也不能包含端口,甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443请求则会失败。

  • 域名必须经过 ICP 备案;

  • 出于安全考虑,api.weixin.qq.com不能被配置为服务器域名,相关API也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API;

  • 对于每个接口,分别可以配置最多 20 个域名。`

  • 引用高德地图,腾讯地图等第三方时也需要配置相应的域名

网络请求

超时时间

  • 默认超时时间和最大超时时间都是 60s;

  • 超时时间可以在 app.json 中配置。

"networkTimeout": {
    "request": 20000,                //wx.request 的超时时间,单位:毫秒。
    "connectSocket":20000,    //wx.connectSocket 的超时时间,单位:毫秒。
    "uploadFile":20000,            //wx.uploadFile 的超时时间,单位:毫秒。 
    "downloadFile": 20000       //wx.downloadFile 的超时时间,单位:毫秒。
  }123456

使用限制

  • 网络请求的 referer header 不可设置。其格式固定为https://servicewechat.com/{appid}/{version}/page-frame.html,其中 {appid}为小程序的 appid,{version}为小程序的版本号,版本号为 0 表示为开发版、体验版以及审核版本,版本号为 devtools 表示为开发者工具,其余为正式版本;

  • wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个;

  • 小程序进入后台运行后(非置顶聊天),如果 5s 内网络请求没有结束,会回调错误信息 fail interrupted;在回到前台之前,网络请求接口调用都会无法调用。

返回值编码

  • 建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码,小程序会尝试进行转换,但是会有转换失败的可能。

  • 小程序会自动对 BOM 头进行过滤(只过滤一个BOM头)。

回调函数

  • 只要成功接收到服务器返回,无论 statusCode 是多少,都会进入 success 回调。请开发者根据业务逻辑对返回值进行判断。

常见问题
HTTPS 证书
小程序必须使用 HTTPS/WSS 发起网络请求。请求时系统会对服务器域名使用的 HTTPS 证书进行校验,如果校验失败,则请求不能成功发起。由于系统限制,不同平台对于证书要求的严格程度不同。为了保证小程序的兼容性,建议开发者按照最高标准进行证书配置,并使用相关工具检查现有证书是否符合要求。

对证书要求如下:

  • HTTPS 证书必须有效;
    1. 证书必须被系统信任,即根证书被已系统内置
    2. 部署 SSL 证书的网站域名必须与证书颁发的域名一致
    3. 证书必须在有效期内
    4. 证书的信任链必需完整(需要服务器配置)

  • iOS 不支持自签名证书;

  • iOS 下证书必须满足苹果 App Transport Security (ATS) 的要求;

  • TLS 必须支持 1.2 及以上版本。部分旧 Android 机型还未支持 TLS 1.2,请确保 HTTPS 服务器的 TLS 版本支持 1.2 及以下版本;

  • 部分 CA 可能不被操作系统信任,请开发者在选择证书时注意小程序和各系统的相关通告。
    Chrome 56/57 内核对 WoSign、StartCom 证书限制周知

注:

  • 证书有效性可以使用 openssl s_client -connect example.com:443 命令验证,也可以使用其他在线工具。

  • 除了网络请求 API 外,小程序中其他 HTTPS 请求如果出现异常,也请按上述流程进行检查。如 https 的图片无法加载、音视频无法播放等。

跳过域名校验
在微信开发者工具中,可以临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书选项,跳过服务器域名的校验。此时,在微信开发者工具中及手机开启调试模式时,不会进行服务器域名的校验。


在这里插入图片描述

  • 在服务器域名配置成功后,建议开发者关闭此选项进行开发,并在各平台下进行测试,以确认服务器域名配置正确。

  • 如果手机上出现 “打开调试模式可以发出请求,关闭调试模式无法发出请求” 的现象,请确认是否跳过了域名校验,并确认服务器域名和证书配置是否正确。

局域网通信

基础库 2.4.0 提供了 wx.startLocalServiceDiscovery 等一系列 mDNS API,可以用来获取局域网内提供 mDNS 服务的设备的 IP。 wx.request/wx.connectSocket/wx.uploadFile/wx.downloadFile的 url 参数允许为${IP}:${PORT}/${PATH}的格式,当且仅当 IP 与手机 IP 处在同一网段且不与本机 IP 相同(一般来说,就是同一局域网,如连接在同一个 wifi 下)时,请求/连接才会成功。

在这种情况下,不会进行安全域的校验,不要求必须使用 https/wss,也可以使用 http/ws。

wx.request({
  url: 'http://10.9.176.40:828'
  // 省略其他参数
})

wx.connectSocket({
  url: 'ws://10.9.176.42:828'
  // 省略其他参数
})123456789



kitidog2016
6楼 · 2021-02-22 13:52

获取page数据,看代码:var text=this.data.name ,这样就获取到初始化的值

page({

data:{name:"test"},

showData:function(){

var text=this.data.name

}

})


收获很多
7楼 · 2021-02-23 15:53

Page({

    //定义初始化数据

    data: {

        name: ”mary”,

        message: ”ma”

    },

    onready: function() {

        //获取初始化数据

        console.log(this.data.name)

        //设置

        This.setData({

            Name:”jack”

        })

    }

})


相关问题推荐

  • 回答 120

    相对前几年来说,要高上不少了,毕竟入行的人也是越来越多了,基础的工作对应想要参与的人群基数越来越大,但是对于高端人才的需求还是很多,人才还是相对稀缺性的。所以,想要学web或者其他技术也一样,别等,别观望。web前端就业方向特别多包括web前端开发...

  • 回答 25

    相对定位和绝对定位是定位的两种表现形式,区别如下:一、主体不同1、相对定位:是设置为相对定位的元素框会偏移某个距离。2、绝对定位:absolute 脱离文档流,通过 top,bottom,left,right 定位。二、特点不同1、相对定位:在使用相对定位时,无论是否进行移...

  • 抓包是什么意思?2020-04-01 17:36
    回答 7
    已采纳

    抓包(packet capture)就是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作,也用来检查网络安全。抓包也经常被用来进行数据截取等。抓包可以通过抓包工具来查看网络数据包内容。通过对抓获的数据包进行分析,可以得到有用的信息。目前流行的...

  • 回答 89

    常用的前端框架有Bootstrap框架、React框架、Vue框架、Angular框架、Foundation框架等等

  • 回答 65
    已采纳

    前端是目的就业前景非常不错的一个计算机技术,但是自学的话还是有一定难度的,网络上自学是碎片化的,同时互联网技术跟新换代快,自己的话比较吃力也学习不到最新的技术。

  • SSR 是什么意思?2020-03-20 18:56
    回答 6

    SSR就是一台服务器,可以利用 SSR 在远程的服务器上配置 SSR,使其能够成为 SSR 节点,这样本地电脑或者其它设备利用 SSR 节点实现 VPN 或者远程上网及游戏加速等方面。ShadowsocksR(简称 SSR)是 Shadowsocks 分支,在 Shadowsocks 的基础上增加了一些数据...

  • 回答 11

    1、代码判断xAxis: {type: 'time',splitLine: {show: false},interval: 3600, // 设置x轴时间间隔axisLabel: {formatter: function(value, index) {return liangTools.unix2hm(value)}}},首先要把xAxis 显示类型设置成time,然后设置对应X轴......

  • 回答 52
    已采纳

    计算机培训方向比较多,建议找适合自己的方向选择培训编程类:JAVA、WEB、Python、C/C++、C#等测试类:软件测试运维类:云计算、网络安全设计类:UI设计、3D建模等

  • 回答 8

    HTML5 + CSS + JavaScript 开发 跨平台重用代码 

  • 回答 4

    采用rem单位自动响应,并提供独有栅格化系统快速定义宽高、边距节省css代码量,同时总结各大型移动端网页,提供一套ui颜色搭配规范,尺寸规范,字体规范等。

  • 回答 10

    iView UI、ioni、SUI

  • 回答 6

     jQTouch 

  • 回答 4

    如果只是普通的移动端用vue react 或者dva 如果是要编译成小程序什么的或者混生 就用uni-app(对应vue语法)taro(对应react) 或者纯原生 这个没有限制的,自己怎么舒服怎么来

  • 回答 4

    因为可以运用在网页和小程序的开饭中,而且开源,用着便宜,企业都很喜欢

  • 回答 10

    一、Visual Studio Code下载地址:https://code.visualstudio.com/微软在2015年4月30日Build 开发者大会上正式宣布了 Visual Studio Code 项目:一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。Visual Stud...

  • 回答 9

    jQuery自带淡入淡出效果 https://www.w3school.com.cn/jquery/jquery_fade.asp 看看这个 

没有解决我的问题,去提问