简单的数据传值  官方文档:传送门

  点击"按钮"测试后,按钮文本改变,下方text文本改变,通过console.log()在输出台中打印按钮文本信息

程序结构

Page({
//页面的初始数据
data: {
text:"Gary_测试ing",
btntext:"按钮_测试"
}, //生命周期函数--监听页面加载
onLoad: function (options) { }, //生命周期函数--监听页面初次渲染完成
onReady: function () { }, //生命周期函数--监听页面显示
onShow: function () { }, //生命周期函数--监听页面隐藏
onHide: function () { }, //生命周期函数--监听页面卸载
onUnload: function () { }, //页面相关事件处理函数--监听用户下拉动作
onPullDownRefresh: function () { }, //页面上拉触底事件的处理函数
onReachBottom: function () { }, //用户点击右上角分享
onShareAppMessage: function () { }, btnclick:function(){
console.log("btnclick");
this.setData({text:"按钮已被点击",btntext:"我被改变了"});
}
})

text.js

Gary
<text>微信小程序</text>
<button type="default" > default </button>
<button type="primary" > primary </button>
<button type="warn"> warn </button>
<button type="primary" bindtap="btnclick"> {{btntext}}</button>
<text>{{text}}</text>

text.wxml

{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

app.json

实现过程

  在app.json中注册test表单信息

  在text.wxml中布局控件

  在text.js中创建页面函数,创建自定义btnclick()函数,通过bindtap="btnclick"将按钮 与函数绑定

  btnclick:function(){
console.log("btnclick");
this.setData({text:"按钮已被点击",btntext:"我被改变了"});
}
button控件type(类型):  default(违约)  primary(初级的)  warn(警告)
 
 
条件渲染  官方文档:传送门
 
 
 
 
  使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,也可以用 wx:elif 和 wx:else 来添加一个 else 块
 
  点击按钮,改变condition值,通过condition值来控制要打印出的文本,输出台中打印condition数值信息
 
  当未点击按钮时,文本显示condition初值(条件1_false和条件2_true为固定文字),条件1_false中的condition为false不显示在页面上,条件2_true中的condition为true显示在页面上

 
 
实现过程
 
  初始化condition的值为false
 
  data: {
text:"Gary_测试ing",
btntext:"按钮_测试",
condition:false
},
 
  点击按钮改变condition的值并显示到控制台上
  btnclick:function(){
var condition = this.data.condition;
console.log(condition);
this.setData({condition:!condition});
}
列表渲染  官方文档:传送门
 

使用 wx:for-item 可以指定数组当前元素的变量名

使用 wx:for-index 可以指定数组当前下标的变量名

 
 
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
 

微信小程序_简单组件使用与数据绑定的更多相关文章

  1. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  2. 微信小程序_(校园视)开发上传视频业务

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  3. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  4. 微信小程序_(校园视)开发用户注册登陆

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

  5. 微信小程序校历组件

    微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧

  6. 微信小程序内置组件web-view的缓存问题探讨

    前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...

  7. 原创:WeZRender:微信小程序Canvas增强组件

    WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...

  8. 微信小程序之swiper组件高度自适应

    微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...

  9. 微信小程序基于swiper组件的tab切换

    代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. Python进阶编程 类与类的关系

    类与类的关系 依赖关系 # 依赖关系: 将一个类的类名或者对象传给另一个类的方法中. class Elephant: def __init__(self, name): self.name = nam ...

  2. 阻塞I/O、非阻塞I/O和I/O多路复用、怎样理解阻塞非阻塞与同步异步的区别?

    “阻塞”与"非阻塞"与"同步"与“异步"不能简单的从字面理解,提供一个从分布式系统角度的回答.1.同步与异步 同步和异步关注的是消息通信机制 (syn ...

  3. Linux: cp 复制文件、文件夹到文件夹

    参数 a 该选项通常在拷贝目录时使用.它保留链接.文件属性,并递归地拷贝目录,其作用等于dpR选项的组合. d 拷贝时保留链接.    f 删除已经存在的目标文件而不提示.    i 和f选项相反,在 ...

  4. python多进程,并获取每个进程的返回值

    pool = multiprocessing.Pool(processes=10) row = [...] for row in rows: task_id = row[1] img_id = row ...

  5. AGC009E Eternal Average

    atc 神题orz 那个擦掉\(k\)个数然后写上一个平均值可以看成是\(k\)叉Huffman树的构造过程,每次选\(k\)个点合成一个新点,然后权值设为平均值.这些0和1都会在叶子的位置,同时每个 ...

  6. CSDN添加文章目录

    在发表的文章中,系统根据文章中H1到H6标签自动生成文章目录. 一.发表文章的时候合理使用“标题”标签. 二.目录生成.只要在文章中使用了“标题1”这样的功能,就可以在博文开头看到文章的目录.

  7. Swift(三)基本运算符

    Swift支持大部分标准C语言的运算符,并且对许多特性进行改进来减少常规编码的错误.除了支持基本运算符外,Swift还提供了2个特殊的运算符,分别是:溢出运算符和区间运算符 首先看下基本运算符 imp ...

  8. Hyperledger Fabric(3)通道与组织

    1,通道的结构 通道是Fabric中非常重要的概念(类似微信群?),它实质是由排序节点划分和管理的私有原子广播通道,目的是对通道的信息进行隔离,使得通道外的实体无法访问通道内的信息,从而实现交易的隐私 ...

  9. Nginx(web服务器)与Tomcat(应用服务器)搭建集群

    Nginx作为互联网最常用的web服务器,高性能的HTTP和反向代理使它经常作为Tomcat集群的方案.Nginx官方只支持使用HTTP协议的集成,但是如果你想使用AJP协议集成,可以使用阿里开源的n ...

  10. tornado实现高并发爬虫

    from pyquery import PyQuery as pq from tornado import ioloop, gen, httpclient, queues from urllib.pa ...