微信小程序把玩《四》：text组件，progress组件，button组件

发布：2018-01-26 10:41浏览：次来源：网络作者：cola

一：text组件

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

wxml

<view >
    <text>我是文本组件</text>
</view>
<text>{{text}}</text>

Page({
    /**
     * 初始化数据
     */
  data:{
    text:"我是在js文件中绑定的文本"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

二：progress组件

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

主要属性：

wxml

<progress 
    percent="80"
    show-info="true" 
    stroke-width="5"
    color="red"
    active="true"/>

三：button组件

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

主要属性：

wxml

<!--按钮默认样式，点击事件-->
<button type="defaule" bindtap="clickButton">Defalut</button>

<!--原始颜色，不可点击状态， 正在加载状态-->
<button type="primary" disabled="true" loading="true">Primary</button>

<button type="warn">warn</button>

Page({
  data:{
    // text:"这是一个页面"
  },

  /**
   * button点击事件监听
   */
  clickButton: function(e) {
      //打印所有关于点击对象的信息
      console.log(e);
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

上一篇：零基础入门篇：微信小程序开发博客项目《中》

下一篇：微信小程序把玩《三》：scroll-view组件，swipe

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

微信小程序开发工具常用快捷键2018-06-09
微信小程序架构分析《一》调试技巧，模块构成，理念分析2018-02-07
微信小程序架构分析《二》：view 模块和 service 模块的构成2018-02-07
微信小程序架构分析《三》：实现过程以及实时更新2018-02-07
梁兴臣:微信小程序开发三宗罪和解决方案2018-02-07
微信小程序使用Promise实践2018-02-07
微信小程序开发系列分析《一》视图层2018-02-07
微信小程序开发系列分析《二》数据层2018-02-07
微信小程序官方文档个人分析心得2018-02-07
微信小程序的原型设计尝鲜2018-02-07