微信小程序js文件改变参数并在视图上及时更新【推荐】

2024-03-26 11:02:18

用过VUE的童鞋都知道，vue在改变data里面参数可以以直接用this.XXX=XXX，并且视图层也会立即更新呈现，但是这里我想介绍一下微信小程序是怎样操作data里面参数并在视图层及时更新的

一、简单参数

XX.wxml

<view>
  <text>{{str}}</text>
</view>
<button bindtap="change">改变</button>

XX.js

Page({
 data: {
  str:'早上好'
 },
 change: function() {
  this.setData({
   str:"晚上好"
  })
 }
})

二、已知下标的数组

XX.wxml

<view>
  <text>{{array[0].text}}</text>
</view>
<button bindtap="change">改变</button>

XX.js

Page({
 data: {
  array: [{text: '早上好'}],
 },
 change: function() {
  this.setData({
   'array[0].text':'晚上好'
  })
 }
})

三、动态下标的数组

XX.wxml

<view>
  <block wx:for="array" wx:key="index">
    <text>{{item.text}}</text>
    <button bindtap="change" data-index="index">改变</button>
  </block>
</view>
<button bindtap="change">改变</button>

XX.js

Page({
  data:{
    array:[
      {text:'1111'},
      {text:'2222'},
      {text:'3333'}
    ]
  },
  change:function(e){
    let param = {};
    let string = "array["+e.target.dataset.index+"].text;
    param[string] = '0000';
    this.setData(param);
  }
})

总结

以上所述是小编给大家介绍的微信小程序js文件改变参数并在视图上及时更新，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序 122100版本更新问题解决方案

微信小程序版本更新问题昨天朋友跑过来说微信更新了6.3.2版本,真机运行小程序有不少的问题.主要集中在wx.redirectTo方法无法正常跳转,且没有任何错误提示.但模拟器上是没有任何问题的. 我当时就很"紧张".小程序又要搞事儿了! 果然今天下午,官方更新了122100版本,一共有90几处改动.这里先不一一列举了.放在另外的文章里.这里主要指出本次更新后对我们项目的影响. 一, redirectTo和navigateTo不能再跳转到带有tab选项卡的页面首先是welcome欢迎
微信小程序登录的简单实现

微信小程序实现登录最近一段时间,微信小程序在张小龙的8小时演讲下瞬间火了起来,但是呢没火多久,就迅速沉静下去了,我也是不知道张小龙什么想法,但是我想法挺多的,好了,废话说多了,聊一下正题吧,我呢是刚入行的小程序员,一路上采坑不断,别人遇不到的坑基本上踩了一遍,话说我的运气有时候也确实挺爆炸的,小程序一个小登录送给大家, 一.小程序开发前准备目前在网上的教程已经不计其数了,给大家推荐一个网址: http://www.jb51.net/article/111566.htm 这里面介绍比较详细,
详解小程序用户登录状态检查与更新实例

这篇文章主要解决以下问题:用户每次登录小程序(包括第一次使用)及点击小程序的每个页面的时候,我们如何判断他当前的登录状态是否过期?如果过期,如何重新获取用户信息并发送至开发者服务器更新用户信息,以及设置新的用户登录状态? 将这个部分单独作为一篇文章有两个原因: ① wx.getUserInfo(OBJECT) 接口调整,废弃了以前直接获取用户信息的方法: ② 上篇文章授权.登录.session_key.unionId只梳理了登录流程而没有贴实际的代码,所以这篇文章以代码实现为主. 1. 代码逻辑
一步步教会你微信小程序的登录鉴权

前言为了方便小程序应用使用微信登录态进行授权登录,微信小程序提供了登录授权的开放接口.乍一看文档,感觉文档上讲的非常有道理,但是实现起来又真的是摸不着头脑,不知道如何管理和维护登录态.本文就来手把手的教会大家在业务里如何接入和维护微信登录态,下面话不多说了,来一起看看详细的介绍吧. 接入流程这里官方文档上的流程图已经足够清晰,我们直接就该图展开详述和补充. 首先大家看到这张图,肯定会注意到小程序进行通信交互的不止是小程序前端和我们自己的服务端,微信第三方服务端也参与其中,那么微信服务端在其中
微信小程序中做用户登录与登录态维护的实现详解

总结大家都知道,在开发中提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户登录,标识用户和获取用户信息,以用户为核心提供服务,是大部分小程序都会做的事情.我们今天就来了解下在小程序中,如何做用户登录,以及如何去维护这个登录后的会话(Session)状态.下面来看看详细的介绍: 在微信小程序中,我们大致会涉及到以下三类登录方式: 自有的账号注册和登
微信小程序-详解微信登陆、微信支付、模板消息

微信公众平台近日悄然开始内测微信小程序(微信公众号)功能,引来无数开发者和普通用户关注,微信支付的能力,是随着小程序的发布一并推出的,具有介绍如下: wx.login(OBJECT) 调用接口获取登录凭证(code)进而换取用户登录态信息,包括用户的唯一标识(openid) 及本次登录的会话密钥(session_key).用户数据的加解密通讯需要依赖会话密钥完成. OBJECT参数说明: success返回参数说明: 示例代码: //app.js App({ onLaunch: functio
微信小程序新建登录页并实现tabBar隐藏

微信小程序新建登录页并实现tabBar隐藏实现的效果如下两张图: app.json 设置的pages的path如下: 在app.json里面设置tabBar的值: 如果你不想在登录页有tabBar的内容,则在app.json 里面tabBar-->list-->pagePath 不能写登录页面的路径,并且首页跳转到登录页时,用 navigateTo 跳转到新页面即可实现tabBar的隐藏,如下图所示: login页面如何设置整个页面都是蓝色(#2da1ed)? 在login.json里面设
java实现微信小程序登录态维护的示例代码

相信不少喜欢开发的朋友都已经知道微信小程序是个什么物种了,楼主也是从小程序内测期间就开始关注,并且也写过几个已经上线的微信小程序.但是基本上都是写的纯前端,最近楼主从后端到前端写一个完整的小程序项目,中间碰到了一些问题,楼主会找一些个人觉得有学习价值的点不定时的拿出来跟大家分享,希望对你有一些帮助. 本次就从最基本的微信小程序登录态维护开始吧.小程序官方api文档里面有对登录态的一个完整的解释,并且有相关的代码.想看详情,可以出门右转:https://mp.weixin.qq.com/debug
微信小程序 Tab页切换更新数据

微信小程序 Tab页切换更新数据微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天忽然发现不能用了_(:зゝ∠)_ 功能需求如下: 我在首页点击"5万以上"他会把跳转到买车页然后同时把"5万以上"这个筛选条件带到买车页. 之前navigator导航是可以跳转并携带数据的,但这一次官方更新加了个新东西-----switchTab,专门用来实现tab页的跳转,但禁止携带数据那么如果还想要实现我们的效果只能用别的方法了想了一下有两种思
微信小程序获取手机号授权用户登录功能

小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无效).将button中的open-type="getPhoneNumber",并且绑定bindgetphonenumber事件获取回调. <span style="font-size:14px;"><button open-type="get

微信小程序js文件改变参数并在视图上及时更新【推荐】

相关推荐

随机推荐