当前位置: 首页 > news >正文

微信小程序开发总结

微信小程序开发

1.数据绑定 {{ name}} ,和vue不同的是如果直接更改data并不会重新渲染,而是要使用setData({name:data})的方法

2.调用组件的方法:

  • 获取元素:

     const ele = this.selectComponent(id)
    
  • 调用组建的method中的方法:

     ele.functionName()
    

3.组件中的propertiesdata的区别:

  • 首先properties是外部可更改的属性,data外部不能修改
  • 两者用法差不多 都是this.data.name来取值

4.小程序中的传参问题

​ 首先需要知道的是没有办法和vue中一样 使用函数名(参数)的形式实现,在小程序中如果想要传参数,则需要在绑定的元素中定义属性 data-参数名的形式,在回调函数中通过target.dataset属性获取,例如:

<view data-streamId='{{stream.id}}' bindtap='test'></view>
test: function (event) {
  console.log(event.target.dataset.streamid)
}

5.嵌套传参的问题:

 <view class='new-container' bindtap='update' data-name='{{item.name}}'>
  <view class='title'>{{item.title}}</view>
  <view class='num'>{{item.num}}</view>
  <view class='tips'>点击刷新</view>
</view>

在这里插入图片描述

点击内容区域的时候,如果使用target来取值会出现空,而currentTarget则不会
在这里插入图片描述

在官方的文档上是这样介绍两者的在这里插入图片描述

6关于setData()修改数组对象的操作, 一般setData()传入的是一个对象,如下name是作为了key的名称

data:{
    name:'fa',
    array:[{name:'aa',num:1},{name:'bb',num:2}]
}

this.setData({
    name:'wx'
})

当我们只是想修改array数组中的num的值,这时候按照上面的就没法实现了, 这时候可以采用’array[0].num’:2来实现

this.setData({
    ['array[0].num']:2
})

但是呢这个’0‘又是不能动态更改的,所以呢还是需要整体修改例如:

for (var i = 0; i < this.data.increase.length; i++) {
  if (this.data.array[i].name == 'aa'){
    this.data.increase[i].num = 2
    break
  }
}
this.setData({
  array: this.data.array
})

转载于:https://www.cnblogs.com/FanMLei/p/10500972.html

相关文章:

  • 编码占用字节数
  • spring boot 整合mybatis 无法输出sql的问题
  • 小程序上传图片到七牛云(支持多张上传,预览,删除)
  • 动态魔术使用DBMS_SQL
  • Mac 鼠须管 Rime 输入法 安装五笔输入法 教程
  • 接力10G,25G将成为数据中心首选解决方案
  • Redash本地开发环境搭建
  • 基于MaxCompute打造轻盈的人人车移动端数据平台
  • Chrome 被曝 0day 漏洞,可让黑客获取用户数据
  • Linux权限管理(week1_day5)--技术流ken
  • 基于ArcFace2.0+红外双目摄像头的活体检测 [Windows][C#][.NET][WPF]
  • Android 架构优化~MVP 架构改造
  • python列表,字典,集合
  • 关于移动端页面在手机调整字体大小后无法正常显示(已解决)
  • 一位90后的自述:如何从年薪3w到30w
  • 分享的文章《人生如棋》
  • CentOS 7 修改主机名
  • classpath对获取配置文件的影响
  • IE报vuex requires a Promise polyfill in this browser问题解决
  • JWT究竟是什么呢?
  • Laravel 中的一个后期静态绑定
  • Otto开发初探——微服务依赖管理新利器
  • React-flux杂记
  • Redis中的lru算法实现
  • uva 10370 Above Average
  • Webpack入门之遇到的那些坑,系列示例Demo
  • win10下安装mysql5.7
  • 第十八天-企业应用架构模式-基本模式
  • 仿天猫超市收藏抛物线动画工具库
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 离散点最小(凸)包围边界查找
  • 收藏好这篇,别再只说“数据劫持”了
  • 说说动画卡顿的解决方案
  • 微信小程序:实现悬浮返回和分享按钮
  • 小程序01:wepy框架整合iview webapp UI
  • 一个完整Java Web项目背后的密码
  • Java数据解析之JSON
  • ​LeetCode解法汇总2182. 构造限制重复的字符串
  • ​总结MySQL 的一些知识点:MySQL 选择数据库​
  • "无招胜有招"nbsp;史上最全的互…
  • ###51单片机学习(1)-----单片机烧录软件的使用,以及如何建立一个工程项目
  • #Linux(make工具和makefile文件以及makefile语法)
  • #我与Java虚拟机的故事#连载10: 如何在阿里、腾讯、百度、及字节跳动等公司面试中脱颖而出...
  • #我与Java虚拟机的故事#连载16:打开Java世界大门的钥匙
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (3)STL算法之搜索
  • (3)选择元素——(14)接触DOM元素(Accessing DOM elements)
  • (HAL)STM32F103C6T8——软件模拟I2C驱动0.96寸OLED屏幕
  • (Oracle)SQL优化技巧(一):分页查询
  • (python)数据结构---字典
  • (Redis使用系列) Springboot 整合Redisson 实现分布式锁 七
  • (多级缓存)缓存同步
  • (机器学习的矩阵)(向量、矩阵与多元线性回归)
  • (区间dp) (经典例题) 石子合并
  • (三)uboot源码分析