微信小程序_简单组件使用与数据绑定

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

　　点击"按钮"测试后，按钮文本改变，下方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

转载于:https://www.cnblogs.com/1138720556Gary/p/9432765.html

微信小程序_简单组件使用与数据绑定相关推荐

微信小程序_基础组件学习02
微信小程序_基础组件学习02 swiper组件 swiper是滑块容器,也就是手机端的轮播图. swiper组件有两部分组成swiper和swiper-item. swiper-item需要放在swi ...
微信小程序_自定义组件_初体验
自定义组件是微信小程序中重要的组成部分,是实现模块化开发的重要手段个人认为,自定义组件是区分菜鸟与高手的分水岭第一篇先介绍小程序自定义组件的基本使用自定义组件的使用可以分为如下几个步骤创建组件 ...
微信小程序vue轮播图_微信小程序使用swiper组件实现类3D轮播图
Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏多图切换等常用效果. Swiper开源.免费.稳定.使用简单. ...
微信小程序_小程序开发框架
微信小程序_小程序开发框架微信小程序框架微信小程序小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXS ...
微信小程序_(校园视)开发视频的展示页_上
微信小程序_(校园视) 开发用户注册登陆传送门微信小程序_(校园视) 开发上传视频业务传送门微信小程序_(校园视) 开发视频的展示页-上传送门微信小程序_(校园视) 开发视频的展示页-下 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
【微信小程序】选择器组件picker
文章目录 [微信小程序]选择器组件picker picker组件的定义 picker组件的类型 picker属性共同的属性时间选择器time 参考 [微信小程序]选择器组件picker picke ...
微信小程序的父子组件传值
微信小程序的父子组件传值如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来. 下面介绍父子组件的数据传递方法,以及一个简单的组件和一个复杂的组件示例. 二.父子组件传递数 ...

微信小程序_简单组件使用与数据绑定

微信小程序_简单组件使用与数据绑定相关推荐

最新文章

热门文章