【Wepy2.x】在onLoad中赋值的问题

最新推荐文章于 2024-08-30 10:54:52 发布
原创 最新推荐文章于 2024-08-30 10:54:52 发布 · 680 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端 #css3

本文介绍了在微信小程序开发中遇到的问题，即在onLoad生命周期方法内如何正确获取并设置上个页面传递的数据。当onLoad放置在methods内部时，需要使用setData方法；而当onLoad独立于methods时，可以使用this直接赋值。这个细节对于避免报错和理解小程序的生命周期至关重要。

前几天写代码的时候，想在onLoad里获取上个页面传过来的数据，但是使用this.xxx=xxx直接赋值没有效果，查了一番之后发现要用原生的setData。但是今天在别的页面用同样的写法却报错 this.setData is not a function。两边比较之后发现是onLoad写的位置的问题，整理如下：

1.onLoad写在methods里面

必须用原生

methods:{
	onLoad(option){
		this.setData({
			form:option.data
		})
	}
}

2.onLoad写在methods外面

可以直接this赋值

wepy.page({
	methods:{}
	onLoad(option){
		this.form=option.data
	}
})
小程序开发之onLoad中this.data.xxx赋值失败
荒的博客
06-12 1644
查阅多篇文章文档，目前onLoad中this.data.xxx=xxx赋值直接失败，现在赋值方法只能使用 this.setData({ key:value })
使用wepy框架搭建一个小程序项目框架
蒹葭的博客
12-09 965
文章目录一、环境配置1、安装node2、设置淘宝源3、小程序开发必备4、安装vscode5、使用说明二、开始搭建1、前期初始化项目2、安装scss（可不装） 一、环境配置 1、安装node 官网 https://nodejs.org/en/ or http://nodejs.cn/ 查看node版本号： node -v 查看npm版本号：npm -v 2、设置淘宝源 npm in...
onload事件---addLoadEvent函数
weixin_39307273的博客
02-12 448
onload事件会在页面或图像加载完毕后立即执行；支持该事件的JS对象有image, layer, window 当我们想要在页面加载完毕时执行某些函数： window.onload = myfunction(); // 将函数绑定到事件上 加载一个事件可以这样写，加载两个事件呢？ window.onload = firstFunction; window.onload ...
wepy父组件onload中请求数据，更新.sync动态传值绑定的数据，子组件onload中获取不到值。
山水子农
03-09 4918
  wepy的props传值分为静态传值和动态传值，静态传值比较简单，只能传递String字符串类型，不需要修饰符；动态传值需要使用.sync修饰符，如果想子组件向父组件传值，可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了，具体详细介绍看wepy...
微信小程序onLoad获取无效（已解决）
tnt4399的博客
12-01 2911
在代码中创建一个组件，使用onload时发现控制台没打印出来值，本来我想一开始就将id值赋值。但后面请求接口的时候发现id为空，起初开始以为是值没有传进来。后面打印发现控制台压根没有值。
goToDetail(item) { console.log('---跳转到详情页--', JSON.stringify(item)); // 跳转详情页并传递参数（id 和 monopolyCode） wepy.navigateTo({ url: `/pages/repairshop/detail?id=${item.id}&monopolyCode=${item.monopolyCode}` }); } 打印出的参数不是当前列表循环出的结果是怎么回事
07-09
在 WePY 中，如果 `goToDetail` 方法中打印的 `item` 参数与预期不符（例如总是打印同一项或循环中的最后一项），通常是由于 **作用域问题** 或 **事件绑定方式错误** 导致的。以下是可能的原因和解决方案： --- #...
onLoad(options) { console.log('-----详情页初始参数---', JSON.stringify(options)); const { id, monopolycode } = options; this.id = id; this.monopolycode = monopolycode; this.fetchDetailData(id, monopolycode); } 这样写 data = { id: '', // 修理厂id monopolycode: ''}// 修理厂推荐送修码 能收到参数值吗
07-09
在 WePY 或微信小程序中，你提供的代码逻辑存在一个问题：**直接通过 `this.id = id` 赋值不会自动更新到 `data` 中**，因此模板或其他依赖 `data` 的逻辑可能无法获取到参数值。以下是详细分析和解决方案： --- #...
<view class=&#39;weui-cell weui-cell_input&#39;> <view class=&#39;weui-cell__hd&#39;> <view class=&#39;weui-label&#39;>前台方向:</view> </view> <view class=&#39;weui-cell__bd&#39;> <input class=&#39;weui-input&#39; disabled=&#39;{{isDisabled}}&#39; placeholder=&#39;请输入前台方向&#39; type=&#39;digit&#39; bindinput=&#39;bindreception&#39; value=&#39;{{shopData.reception}}&#39; /> </view> </view> data = { id: &#39;&#39;, // 修理厂id monopolycode: &#39;&#39;, // 修理厂推荐送修码 showBase: false, // 基础信息 showBusiness: false, // 业务信息 showPatrol: false, // 巡店信息 showPortrait: false, // 画像信息 isDisabled: true, // 是否禁止编辑 默认是true 不可编辑的 shopData: { // 修理厂信息 reception: &#39;南方&#39;, // 前台方向 boss: &#39;&#39;, // 老板名称 workers: 0, //工人数量 policy: &#39;&#39;, // 政策 feedback: &#39;&#39;, // 线团反馈信息 thisWeekRepairShopIssue: { // 本周出单信息 startDate: &#39;&#39;, //开始日期 endDate: &#39;&#39;, //结束日期 remark: &#39;&#39;, //备注日期 issueWeek: 0, //本周出单 shareWeek: 0 //本周份额 }, thisMouthPatrols: [ // 巡店情况 // { // clockDate: &#39;&#39;, // 打开时间 // talk: &#39;&#39;, // 谈判信息 // feedback: &#39;&#39;, // 线团反馈信息 // deviceFlag: &#39;&#39;, // 设备信息采集是否正常 1-是 0-否 // } ] } }; onLoad(options) { console.log(&#39;-----详情页初始参数---&#39;, JSON.stringify(options)); const { id, monopolycode } = options; this.id = id; this.monopolycode = monopolycode; console.log(this.monopolycode, &#39;------初始传输111111----&#39;, this.id); this.$apply(); console.log(this.monopolycode, &#39;------初始传输22222----&#39;, this.id); this.fetchDetailData(); this.$apply(); } fetchDetailData() { console.log(&#39;---调用查详情接口--&#39;); const self = this; if (self.isLoading || self.showNoMore) return; self.isLoading = true; tip.loading(&#39;加载中...&#39;); try { postRequest(Api.repairShop.mgttDetail, { id: this.id, // 修理厂id monopolycode: this.monopolyCode // 推荐送修码 }, function(res) { console.log(&#39;-----------详情返回结果------&#39;, JSON.stringify(res)); tip.loaded(); if (res.code === 0) { console.log(&#39;--------详情返回结果---1&#39;); if (!res.data) { tip.alert(&#39;未获取到修理厂数据&#39;); return; } const newData = res.data.data || {}; self.shopData = newData; self.$apply(); console.log(&#39;-&#39;); } else { tip.alert(res.message || &#39;请求失败&#39;); self.pageNum -= 1; if (self.pageNum < 1) { self.pageNum = 1; } self.$apply(); } }, function() { tip.loaded(); }, false); } catch (error) { tip.alert(&#39;网络连接失败&#39;); } finally { self.isLoading = false; tip.loaded(); self.$apply(); // 更新视图 } } 页面加载是这个方法已经调用了 但是 页面上没有展示返回的数据
最新发布
07-09
但你在 `onLoad` 中是从 `options` 解构出的是： ```js const { id, monopolycode } = options; ``` 注意变量名是小写的 `monopolycode`，所以这里有一个拼写错误： ❌ 错误： ```js monopolycode: this....
【19】黑马优购商城：01-项目介绍、初始化项目、首页、优化、分类页面、interceptor 拦截器、搜索、商品列表、商品详情、加入购物车、购物车、确认订单、订单支付、订单列表、发布小程序
忘尘丶莫负的博客
09-27 8761
文章目录黑马优购1. 项目介绍2. 初始化项目2.1 初始化项目2.2 梳理项目结构2.3 绘制 tabBar2.4 修改导航栏样式3. 首页3.1 为异步 API 启用 Promise 功能3.2 轮播图数据渲染3.3 获取首页分类选项数据3.4 渲染分类数据项对应的UI结构3.5 美化分类数据项的UI显示效果3.6 获取楼层相关的数据3.7 渲染楼层UI结构3.8 美化楼层UI结构3.9 点击楼层图片跳转到商品列表页面4. 优化4.1 把页面的业务逻辑抽离到单独的 `mixin` 文件中4.2 封装 `
vue踩坑记录：reader.onload中的值无法被外面读取到，异步问题解决
weixin_43538620的博客
08-30 936
编码，作为入参传入接口，调取OCR识别接口，完成图片转文字。项目需要自己写一个页面读取本地上传的图片文件，读取文件的名字和。产生了异步问题，传参赋值还未完成，导致外面获取不到数据。读取转换为base64编码，用。函数，返回一个Promise。之后发现并没有成功赋值。base64数据处理。可以成功获取到数据啦~改为await赋值给。
vue 在监听里赋值不更新，或者是用下标给数组赋值不更新，解决方法
庆.Gavino的博客
04-23 2229
请看一下代码，reader.onload是一个监听 reader.onload = function (e) { fileData.file=e.target.result; let config = { //添加上传进度监听事件 onUploadProgress: e =&...
vue 赋值不改变_【报Bug】超大BUG，Nvue页面引入组件以后，该页面data里的值不能再赋值改变...
weixin_39627697的博客
12-21 625
详细问题描述随便新建一个项目，一个Nvue页面，在页面里随便插入一个组件以后，该页面data里的值再也不能发生改变，怎么赋值都没有变化！HBuilderX2.1.3之前都正常重现步骤[步骤]新建一个项目，一个Nvue页面，这是nvue页面的主要代码，样式代码就不贴了{{num}}点击import marqueeX from '@/components/marquee/marqueeX.nvue'e...
微信小程序框架wepy.js组件传值的bug
kingov
11-21 5876
使用微信小程序的框架wepy.js遍历组件并且往组件里传值的时候只能传整个数据, 不能传数据里的某个值<repeat for="{{ arr }}" key="index" index="index" item="item"> //当item.name为jack的时候把item传入newProduct组件中, 不能传入item.name因为组件内接收不到为wepy.js的bug <new
微信小程序跳转页面后onload中获取到的参数值和跳转页面时传的参数不一样
ys_healone的博客
12-16 1770
channel是一个从后端获取的被加密的一个字符串且已经被encode，我不对其进行修改，只在页面中跳转时带上这个参数，有接口需要传给后端这个参数时，传给他decodeURIComponent(channel)，理论上没有问题，但是后端数据库表记录发现他解密我传给他的这个数据变成了乱码，就很莫名其妙，代码看着没什么问题 页面A中 let channel = `xh8Dfx0BMhc%3Dizk15iMzexEJHh8rgxU1Kicncz0FFjr8Cz2ylrt8qxGGVouHo`; wx.nav.
wepy关于微信小程序的一点踩坑
weixin_45638909的博客
12-28 543
1.wepy组件没有生命周期 2.wepy组件url路径只能导入网络路径，本地路径无效 <style scoped lang="scss"> .empty-placeholder { padding-top: 290rpx; width: 100%; text-align: center; .emptyImg{ width: 203rpx; display: block;
wepy中的生命周期
起风了
12-06 5002
wepy中的生命周期的钩子函数有：onLoad，onReady，onShow，onPrefetch等，其中onReady，onShow，onPrefetch只有wepy.page中才有用。wepy.component只支持onLoad，其他都不会触发。 &lt;style lang="less"&gt; &lt;/style&gt; &lt;template&gt; &lt;view cl...
document.head.onload
06-20
在 JavaScript 中，`document.head.onload` 并不是一个标准的属性或事件。通常，`onload` 事件与 `window` 或 `document` 对象相关联，用于检测整个页面或特定资源（如图片、脚本等）是否加载完成。然而，`<head>` ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值