微信小程序遇到修改数据后页面不渲染的问题解决

2024-12-14 14:29:00

微信小程序遇到修改数据后页面不渲染的问题解决

前言：

去年从小程序一开始出来到现在，我一直是比较看好和保持一定的关注度的，小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的，这是我第一次有意识的亲眼目睹了一个新技术的发展，还是感觉比较荣幸的。
唱衰小程序？我的观点是肯定不可能，因为现在每天提交审核的小程序还在继续增加，而且有些小程序确实很好用，比如摩拜的扫码骑车，还有我上周去KTV，直接用小程序扫屏幕上的二维码，就可以绑定房间，然后通过小程序点歌，切歌，发表情包等方便好玩的事情，所以，在我看来，有些应用场景是非常适合小程序的，以后生活中的更多场景会更多的应用小程序。

截止到目前，小程序的系列文章写了有十几篇，基本上是解决开发中的一些问题，踩过的坑。我的小程序也已经写的差不多了，但是公司的https加密认证还没有弄好，所以只能暂且搁置在那里了。

数据修改不生效

今天继续要介绍一个setData()的问题。

我们经常会这样写：

var that = this;
wx.getStorage({
  key: 'user',
  success: function(res){
    console.log(res.data)
    that.data.params.uuid = res.data.uuid;
    that.data.params.ticket = res.data.ticket;
    that.data.params.courseUuid = options.courseUuid;
    that.data.params.isCompany = options.isCompany;

    that.fetchData();
    that.getShareList();
  }
})

我们给data对象进行了一些赋值操作，但是发现接着使用这些数据的时候是不对的，我们赋值的数据并没有成功的渲染到页面。找了好久之后我发现，原来要想数据立马生效，必须要调用一下setData()方法才能有用，所以上面的代码修改如下：

var that = this;
wx.getStorage({
  key: 'user',
  success: function(res){
    console.log(res.data)
    that.data.params.uuid = res.data.uuid;
    that.data.params.ticket = res.data.ticket;
    that.data.params.courseUuid = options.courseUuid;
    that.data.params.isCompany = options.isCompany;

    that.setData({
      params: that.data.params
    })

    that.fetchData();
    that.getShareList();
  }
})

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

微信小程序解决请求服务器手机预览请求不到数据的方法

微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat配置好了https.然后用开发者工具测试是否能请求到数据,发现能获取到很开心. 后来是注册了小程序,在小程序后台也进行了设置,见下图给项目加了APPID,准备进行手机预览的测试这里说一下,在开发小程序时尽量把图片放到自己的服务器上,因为小程序在上传和预览时都有编译包的限制,没有算过,大概是1M,
微信小程序通过api接口将json数据展现到小程序示例

实现知乎客户端的一个重要知识前提就是,要知道怎么通过知乎新闻的接口,来把数据展示到微信小程序端上. 那么我们这一就先学习一下,如何将接口获取到的数据展示到微信小程序上. 1.用到的知识点 <1> wx.request 请求接口资源(微信小程序api中的发起请求部分) <2>swiper 实现轮播图的组件 <3>wx:for 循环语句 <4>微信小程序的基础知识 2.实现原理首先,先看一下这个请求函数 wx.request({ url: '******',
微信小程序动态的加载数据实例代码

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

一. 问题描述用户首次后再次进入小程序时,我们通常需要通过获取用户openid或unionid用作唯一标示与后台进行数据交流,初始化用户信息.当我们通过第三方服务器跟微信建立请求时,微信需要用户确认是否公开信息.如图1,从console可以看到,在请求的同时,我们的首页index已经加载完成,图中初始化数据显示为空.无论我们将请求信息写在app.js的onload中或者index.js中,当我们点击确认后,请求信息才执行success方法,将第三方服务器返回的数据处理,这样的因需要用户点击而产
微信小程序-详解数据缓存

每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSync).wx.clearStorage(wx.clearStorageSync)可以对本地缓存进行设置.获取和清理.本地缓存最大为10MB. 注意: localStorage 是永久存储的,但是我们不建议将关键信息全部存在 localStorage,以防用户换设备的情况. wx.setStorage(OBJECT) 将数据存储
微信小程序本地数据存储实例详解

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

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

微信小程序开发总结: 一: 参数传值的方法 1: data-id 我们可以给HTML元素添加data-*属性来传递我们需要的值,使用方法说明: (1)设置data-id <view class="block" bindtap="playTap" data-id="{{modle.id}}"> (2): 取值 + 传值 playTap:function(e) { const dataset = e.currentTarget.datas
微信小程序遇到修改数据后页面不渲染的问题解决

微信小程序遇到修改数据后页面不渲染的问题解决前言: 去年从小程序一开始出来到现在,我一直是比较看好和保持一定的关注度的,小程序的掀起的波浪我觉得一开始是在前端及其他技术开发人群中的,这是我第一次有意识的亲眼目睹了一个新技术的发展,还是感觉比较荣幸的. 唱衰小程序?我的观点是肯定不可能,因为现在每天提交审核的小程序还在继续增加,而且有些小程序确实很好用,比如摩拜的扫码骑车,还有我上周去KTV,直接用小程序扫屏幕上的二维码,就可以绑定房间,然后通过小程序点歌,切歌,发表情包等方便好玩的事情,所以,
微信小程序如何修改本地缓存key中单个数据的详解

最近在做教师评教系统,有一个'个人信息'页面中有个编辑修改邮箱的功能,本来想得很简单,结果进坑了,搞了好久才出来. 我想实现的效果是点击下图左侧邮箱,然后进入右侧页面,进行邮箱的修改,点击提交后跳转到左侧页面,同时邮箱也发生改变. 点击'我的'时,我让它从控制台打印出student缓存中传过来的数据,如下: {no: "1635050601", name: "张三", sex: "", email: "123@qq.com",
150行代码带你实现微信小程序中的数据侦听

在小程序项目中, 我们的通常会使用到使用到一个全局对象作为各个页面通用的数据存储容器, 将它绑定到app对象后, 就能在每一个页面都自由的操纵这个对象. 然而在实践中, 由于这个对象及其属性不具备响应式条件, 它不能直接参与业务逻辑的编写, 能力仅仅局限于数据储存. 若是在VueJS项目中, 我们可能经常使用到 Vue.$watch 去侦听某个数据是否发生变化, 小程序却缺乏这种能力. 在这篇文章中, 我将用150行代码, 手把手带你打造一个小程序也可以使用的侦听器(下简称VX): // 一个快
微信小程序实现商品数据联动效果

微信小程序实现商品数据联动直接复制代码更改可以看出效果,然后根据自己想要进行调整注: 以下商品图片用于测试,如有侵权请通知,会删除相关图片. js部分: // pages/demo1/demo1.js //存放右侧分类的高度累加数组 var heightList = []; //记录scroll-view滚动过程中距离顶部的高度 var distanceToTop = 0; Page({ /** * 页面的初始数据 */ data: { curActive: 0, //当前选中项 produ
关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题

1.微信小程序使用echarts,首先下载echarts并导入小程序项目中,因小程序后期上线对文件大小有要求,所以建议进行定制下载导入可减少文件大小占比,也可以下载以前旧版本文件比较小的应付使用下载echarts: https://echarts.apache.org/zh/download.html 定制下载:https://echarts.apache.org/zh/builder.html 旧版本查看:https://archive.apache.org/dist/echarts/ 下载
微信小程序定义全局数据、函数复用、模版等详细介绍

微信小程序定义全局数据.函数复用.模版等问题总结: 1.如何定义全局数据在app.js的App({})中定义的数据或函数都是全局的,在页面中可以通过var app = getApp(); app.function/key的方式调用,不过我们没有必要再app.js中定义全局函数. 2.如何实现代码的复用函数的复用: test.js test: function(){ } module.exports={ test:test } other.js var common = require('
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下先看效果是否是自己需要的实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true J
微信小程序开发之路由切换页面重定向问题

这段时间开发了一个微信小程序,虽然小程序的导航API 官方文档写得很详细,但是在具体开发过程中还是会遇到很多不明白,或者一时转不过弯的地方. 1.页面切换传参,参数读取 1.1 wx.navigateTo(Object) 功能:保留当前页面,跳转到应用内的某个页面,但是不能跳到 tabbar 页面.使用 wx.navigateBack 可以返回到当前页面. wx.navigateTo({ //当前页面对应的JS文件内控制模板 url: 'test?id=1' //需要切换到的页面路劲,此处为
微信小程序实现打卡签到页面

本文实例为大家分享了微信小程序实现打卡签到页面的具体代码,供大家参考,具体内容如下效果图如下所示 .wxml <view class='gs_banner'> <view class='gs_continue'> <view>每日坚持签到</view> <view>总共签到:<text>{{continuity}}</text>天</view> </view> </view> <
微信小程序中的数据存储实现方式

目录全局变量globalData 页面私有变量 data storage 异步存储(根据设备性能的不同,你还真不知道他会存多久) 同步存储(会造成阻塞~) 文件存储 fileSysteManager 写入: 读取移除全局变量globalData 在最初创建小程序时,app.js文件中App方法中传入的对象里面默认添加了globalData参数.在所有的页面中我们都可以通过getApp方法获取到这个App方法传入的对象,进而拿到其中的globalData. const App = getAp

微信小程序遇到修改数据后页面不渲染的问题解决

相关推荐

随机推荐