微信小程序新手教程text组件progress组件button组件

　　微信小程序新手教程text组件progress组件button组件，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

　　一：text组件

　　通常文本设置要不在wxml中设置，再要不就是通过weml绑定在js中设置文字。

　　wxml

　　我是文本组件

　　{{text}}

　　js

　　Page({

　　/**

　　* 初始化数据

　　*/

　　data:{

　　text:"我是在js文件中绑定的文本"

　　},

　　onLoad:function(options){

　　// 页面初始化 options为页面跳转所带来的参数

　　},

　　onReady:function(){

　　// 页面渲染完成

　　},

　　onShow:function(){

　　// 页面显示

　　},

　　onHide:function(){

　　// 页面隐藏

　　},

　　onUnload:function(){

　　// 页面关闭

　　}

　　})

　　二：progress组件

　　进度条描述的是一种加载的状态，比如软件升级下载进度， 视频，图片下载进度…

　　主要属性：

　　wxml

　　<progress< p="">

　　percent="80"

　　show-info="true"

　　stroke-width="5"

　　color="red"

　　active="true"/>

　　三：button组件

　　button按钮用的算是最普遍的组件之一。

　　主要属性：

　　wxml

　　Defalut

　　Primary

　　warn

　　js

　　Page({

　　data:{

　　// text:"这是一个页面"

　　},

　　/**

　　* button点击事件监听

　　*/

　　clickButton: function(e) {

　　//打印所有关于点击对象的信息

　　console.log(e);

　　},

　　onLoad:function(options){

　　// 页面初始化 options为页面跳转所带来的参数

　　},

　　onReady:function(){

　　// 页面渲染完成

　　},

　　onShow:function(){

　　// 页面显示

　　},

　　onHide:function(){

　　// 页面隐藏

　　},

　　onUnload:function(){

　　// 页面关闭

　　}

　　})