02、微信小程序的数据绑定

02、微信小程序的数据绑定

目录结构:

模板内容:

使用bindtap绑定事件

<!--index.wxml-->
<view class="container">
  <view id=‘testid‘ bindtap=‘clinkMe‘ data-testName=‘用户名称‘ data-testSex=‘用户性别‘>
  点击我
  </view>
</view>

js内容:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: ‘Hello World‘,
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse(‘button.open-type.getUserInfo‘)
  },
  clinkMe:function(val){
    console.log("这是一个测试");
    console.log(val);
    //模板虽然定义的是包含大写,但是在使用时必须用小写(微信内部进行了转换)
    console.log(val.currentTarget.dataset.testname);
    console.log(val.currentTarget.dataset.testsex);
  }
})

测试:

参照博客:

https://zhuanlan.zhihu.com/oldtimes

找的电影开源项目:

https://github.com/7insummer/orange-can

https://github.com/7insummer/orange-can-server

原文地址:https://www.cnblogs.com/gaogaoyanjiu/p/9553609.html

时间: 2024-08-29 23:15:42

02、微信小程序的数据绑定的相关文章

微信小程序之数据绑定(五)

前几篇讲述微信小程序开发工具使用.生命周期和事件. 本次讲述微信小程序数据和视图绑定 >>>数据视图绑定 做前端开发的同学,尤其是WEB前端,每天都要跟视图打交道,假如你是用过jQuery,你就能体会到jQuery的代码冗余和操作不便性,需要手动管理视图和对象的数据一致性. 以下数据和对象等同. 传统的视图和数据绑定 那么微信小程序是通过什么方法来管理视图和对象绑定的呢?状态模式-单向数据流. 状态模式定义一个对象,这个对象可以通过管理其状态从而使得应用程序作出相应的变化. 简单的讲,对

02——微信小程序官方demo讲解——app部分

第一节讲了目录结构,这节主要讲解下目录中app.js部分. 它由三部分组成app.js.app.json与app.wxss 1.JS部分 1.1概述 //app.js App({ onLaunch: function () { // 展示本地存储能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) // 登录 wx.login({ success

微信小程序之数据绑定

最近在帮朋友写个小程序,本人小白一枚,但是好在计算机科班出身,有些概念一看还是明白的,只是之前没实际写过程序.于是最近看了好多资料和视频,不得不说,对于小白来讲,还是有点难度,但是不大. 通过最近看资料和别人的视频,总结一下: 页面布局,先画好.都是盒子,需要几个盒子,你就先画几个盒子.比如下面这个页面: 红色盒子浅蓝盒子绿色盒子(这个绿色盒子里又可以切分成两个盒子:白色字体较大一个盒子,白色字体较小一个盒子)蓝色盒子 数据先静态,后动态简单的说就是刚开始,你可以直接先往页面里塞静态数据,然后调

02微信小程序-轮播的宽度100%显示和轮播的基础配置

1==>如何让轮播的宽度100%显示? 你先给swiper 外面添加一个大盒子,给大盒子一个类 . <view class='lunbobox'> 然后wxss 里面设置 image , width: 100%; 在设置大盒子的宽度 width: 100%; 这样就可以了. <view class='lunbobox'> <!-- 轮播开始 --> <swiper indicator-dots="{{indicatorDots}}" ci

【免费下载】全套最新 017微信小程序 视频教程+教学资料+学习课件+源代码+软件开发工具

017微信小程序视频教程 网盘地址: 链接:https://pan.baidu.com/s/1VV5KVxd7\_LLOMSM8BNuFqg 提取码:6d4k 加公众号 获取更多新教程 教程目录大纲 ./017微信小程序 ├── 视频 │?? ├── 01. _微信小程序_入门介绍.avi │?? ├── 02. _微信小程序_相关资料.avi │?? ├── 03. _微信小程序_特点介绍.avi │?? ├── 04. _微信小程序_移动端适配相关内容.avi │?? ├── 05. _微信

如何开发微信小程序学习

文件中 project.config.json是开发者工具为我们自动生成的一个开发者工具的配置文件,主要是保存了一些我们对开发者工具的个性化配置. 一个微信小程序应用至少要有两个文件 一个是app.js        帮我们注册一个微信小程序的应用 一个是app.json            对我们微信小程序的一个全局配置 我们如果需要写一个页面,比如helloworld页面,需要四个文件 .wxml .wxss .js .json,这四个需要名字相同,比如都叫helloworld.xxxxx

SAP UI5和微信小程序对比之我见

今天继续由SAP成都研究院著名的菜园子小哥Wang Cong,给大家分享他作为一个SAP前端人员是如何看待SAP UI5和微信小程序的异同点的. 关于Wang Cong种菜的手艺,大家请移步到他以前的文章 SAP成都研究院非典型程序猿,菜园子小哥:当我用UI5诊断工具时我用些什么 去观摩,这里不再赘述. 下面是他的正文. 近几年微信小程序发展之势如火如荼,越来越多的用户放弃原生App,转而投入小程序的怀抱,大有"一个微信行天下"的趋势. 面对如此巨大的流量机遇,百度.阿里等公司也纷纷在

微信小程序之初探(常见语法 VS vue)常见问题(点击不生效,数据绑定)

最近在调研微信小程序开发,对于一个前端小白来说,在各种框架都还用不熟的情况下,再来开发小程序确实还是不容易. 小程序出来之初,听过演讲,看过一点点儿视频,感觉和angular语法有点相似(PS:那是也是只了解一点点儿angular语法): 近两天开始尝试开发小程序,讲真,语法和angular和vue都很相似,小程序提供的语法现在还算全面,很多方法都有提供: 下面简述一下常用方法的使用: 一:数据绑定: html js 直接把数据写在data里面就行了,这样数据可以直接渲染到页面上, 那么问题来了

微信小程序开发02

今天完成小程序的内容展示页,通过不断地尝试学会了新闻列表展示页样式的简单设置,以及数据绑定的相关知识,但并未来得及实现其功能. 一.样式设置相关知识总结: 上一次总结写到为了使背景色完全平铺,在app.wxss中设置page{}的背景色,这种做法欠妥.会影响后期其他页面内容展示,因此将第一次总结中的page背景色增添到启动页的wxss文件中. 本次设计学会使用了swiper组件,为后面使用templete模板打下铺垫. 使用以下代码作为讲解: <view> <swiper indicat