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

  点击"按钮"测试后,按钮文本改变,下方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. layui2.5 修改layuicms

    雷哥layui2.5版本学习 学习地址: https://www.bilibili.com/video/av59813890/?p=30 注意: 修改layuicms时注意下面是缓存的js, < ...

  2. command----常用命令更新ing

    common commands 1:split---拆分文件 [root@localhost split]# split -b 1M split.tar.gz split_ #按1M拆分文件 [roo ...

  3. leetcode 1266. Minimum Time Visiting All Points

    On a plane there are n points with integer coordinates points[i] = [xi, yi]. Your task is to find th ...

  4. leetcode 1051. Height Checker

    Students are asked to stand in non-decreasing order of heights for an annual photo. Return the minim ...

  5. vue中map组件

    分享一个比较好用的基于百度地图的vue组件.也有react版本的,可以自行选择. 分享链接:点击

  6. redis集群启动和关闭脚本

    创建startall.sh /usr/local/redis/bin/redis-server /usr/local/redis/redis-cluster/7001/redis.conf /usr/ ...

  7. mysoft

    @@a8649fbb56349908b5ca6708fb94b3ddabcf6b97381a9797d3dfb139b8749287117@@##74e02e1207e5a0a8996ba89f1d6 ...

  8. redis性能指标

    1.当内存使用达到设置的最大阀值时,需要选择一种key的回收策略,可在Redis.conf配置文件中修改“maxmemory-policy”属性值. 若是Redis数据集中的key都设置了过期时间,那 ...

  9. 【异常】~/.bash_profile:source:44: no such file or directory: /usr/local/Cellar/nvm/0.34.0/nvm.sh

    1 异常信息 /Users/zhangjin/.bash_profile:source:: no such file or directory: /usr/local/Cellar/nvm//nvm. ...

  10. 解决GitHub添加sshkey仍然无法访问clone远程仓库的问题

    1 ssh -v git@github.com 通过这个命令打印调试信息 ebug1: expecting SSH2_MSG_NEWKEYS debug1: SSH2_MSG_NEWKEYS rece ...