微信小程序_简单组件使用与数据绑定
简单的数据传值 官方文档:传送门
点击"按钮"测试后,按钮文本改变,下方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 ...
随机推荐
- layui2.5 修改layuicms
雷哥layui2.5版本学习 学习地址: https://www.bilibili.com/video/av59813890/?p=30 注意: 修改layuicms时注意下面是缓存的js, < ...
- command----常用命令更新ing
common commands 1:split---拆分文件 [root@localhost split]# split -b 1M split.tar.gz split_ #按1M拆分文件 [roo ...
- 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 ...
- leetcode 1051. Height Checker
Students are asked to stand in non-decreasing order of heights for an annual photo. Return the minim ...
- vue中map组件
分享一个比较好用的基于百度地图的vue组件.也有react版本的,可以自行选择. 分享链接:点击
- redis集群启动和关闭脚本
创建startall.sh /usr/local/redis/bin/redis-server /usr/local/redis/redis-cluster/7001/redis.conf /usr/ ...
- mysoft
@@a8649fbb56349908b5ca6708fb94b3ddabcf6b97381a9797d3dfb139b8749287117@@##74e02e1207e5a0a8996ba89f1d6 ...
- redis性能指标
1.当内存使用达到设置的最大阀值时,需要选择一种key的回收策略,可在Redis.conf配置文件中修改“maxmemory-policy”属性值. 若是Redis数据集中的key都设置了过期时间,那 ...
- 【异常】~/.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. ...
- 解决GitHub添加sshkey仍然无法访问clone远程仓库的问题
1 ssh -v git@github.com 通过这个命令打印调试信息 ebug1: expecting SSH2_MSG_NEWKEYS debug1: SSH2_MSG_NEWKEYS rece ...