微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门
点击"按钮"测试后,按钮文本改变,下方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:"我被改变了"});
}

wx:if="{{condition}}"
来判断是否需要渲染该代码块,也可以用 wx:elif
和 wx:else
来添加一个 else 块data: {
text:"Gary_测试ing",
btntext:"按钮_测试",
condition:false
},
btnclick:function(){
var condition = this.data.condition;
console.log(condition);
this.setData({condition:!condition});
}

使用 wx:for-item
可以指定数组当前元素的变量名
使用 wx:for-index
可以指定数组当前下标的变量名
index
,数组当前项的变量名默认为 item

微信小程序_简单组件使用与数据绑定的更多相关文章
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 微信小程序_(校园视)开发上传视频业务
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序_(校园视)开发用户注册登陆
微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...
- 微信小程序校历组件
微信小程序校历组件 校历组件,可以作为校园小程序的插件,如果觉得不错,点个star吧
- 微信小程序内置组件web-view的缓存问题探讨
前言:博客或者论坛上面,还有自习亲身经历,发现微信小程序的webview组件的页面缓存问题相当严重,对开发H5的小童鞋来说应该困扰了不少.很多小童鞋硬是抓破脑袋也没有办法解决这个问题,那我们今天就来探 ...
- 原创:WeZRender:微信小程序Canvas增强组件
WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; h ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- 微信小程序基于swiper组件的tab切换
代码地址如下:http://www.demodashi.com/demo/14010.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
随机推荐
- Python进阶编程 类与类的关系
类与类的关系 依赖关系 # 依赖关系: 将一个类的类名或者对象传给另一个类的方法中. class Elephant: def __init__(self, name): self.name = nam ...
- 阻塞I/O、非阻塞I/O和I/O多路复用、怎样理解阻塞非阻塞与同步异步的区别?
“阻塞”与"非阻塞"与"同步"与“异步"不能简单的从字面理解,提供一个从分布式系统角度的回答.1.同步与异步 同步和异步关注的是消息通信机制 (syn ...
- Linux: cp 复制文件、文件夹到文件夹
参数 a 该选项通常在拷贝目录时使用.它保留链接.文件属性,并递归地拷贝目录,其作用等于dpR选项的组合. d 拷贝时保留链接. f 删除已经存在的目标文件而不提示. i 和f选项相反,在 ...
- python多进程,并获取每个进程的返回值
pool = multiprocessing.Pool(processes=10) row = [...] for row in rows: task_id = row[1] img_id = row ...
- AGC009E Eternal Average
atc 神题orz 那个擦掉\(k\)个数然后写上一个平均值可以看成是\(k\)叉Huffman树的构造过程,每次选\(k\)个点合成一个新点,然后权值设为平均值.这些0和1都会在叶子的位置,同时每个 ...
- CSDN添加文章目录
在发表的文章中,系统根据文章中H1到H6标签自动生成文章目录. 一.发表文章的时候合理使用“标题”标签. 二.目录生成.只要在文章中使用了“标题1”这样的功能,就可以在博文开头看到文章的目录.
- Swift(三)基本运算符
Swift支持大部分标准C语言的运算符,并且对许多特性进行改进来减少常规编码的错误.除了支持基本运算符外,Swift还提供了2个特殊的运算符,分别是:溢出运算符和区间运算符 首先看下基本运算符 imp ...
- Hyperledger Fabric(3)通道与组织
1,通道的结构 通道是Fabric中非常重要的概念(类似微信群?),它实质是由排序节点划分和管理的私有原子广播通道,目的是对通道的信息进行隔离,使得通道外的实体无法访问通道内的信息,从而实现交易的隐私 ...
- Nginx(web服务器)与Tomcat(应用服务器)搭建集群
Nginx作为互联网最常用的web服务器,高性能的HTTP和反向代理使它经常作为Tomcat集群的方案.Nginx官方只支持使用HTTP协议的集成,但是如果你想使用AJP协议集成,可以使用阿里开源的n ...
- tornado实现高并发爬虫
from pyquery import PyQuery as pq from tornado import ioloop, gen, httpclient, queues from urllib.pa ...