微信小程序——常用组件

微信小程序的组件也挺多了，还是把官网的组件介绍地址先贴出来吧
https://mp.weixin.qq.com/debug/wxadoc/dev/component/

这里介绍一点值得记录的例子，最后写一个稍复杂的界面总结

tabBar（导航栏）

代码：

{  "pages": [    "pages/index/index",    "pages/logs/logs"  ],  "window": {    "backgroundTextStyle": "light",    "navigationBarBackgroundColor": "#fff",    "navigationBarTitleText": "WeChat",    "navigationBarTextStyle": "black"  },  "tabBar": {    "color": "#000000",    "selectedColor": "red",    "backgroundColor": "yellow",    "borderStyle": "black",    "position": "top",    "list": [      {        "pagePath": "pages/index/index",        "text": "首页",        "iconPath": "images/icon1.png",        "selectedIconPath": "images/icon1s.png"      },      {        "pagePath": "pages/logs/logs",        "text": "日志",        "iconPath": "images/icon2.png",        "selectedIconPath": "images/icon2s.png"      }    ]  }}

显示及目录结构如下（色调比较丑，能分析问题要紧…哈哈我就是懒）

tabBar属性：

• color：tab 上的文字默认颜色
• selectedColor：tab 上的文字选中时的颜色
• backgroundColor：tab 的背景色
• borderStyle：tabbar上边框的颜色， 仅支持 black/white
• list：tab 的列表
• position：导航栏的位置

list属性

• pagePath：页面路径，必须在 pages 中先定义
• text：tab 上按钮文字
• iconPath：默认图片路径
• selectedIconPath：选中时的图片路径

注意：

• tabBar需要在app.json里配置
• tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序
• 细心的同学发现没有，我们配置的图标并没有显示出来？是因为position属性只有为bottom时才显示图标，写写试试吧
• list里必须包含启动页（即app.json的pages节点下的一个元素），tabBar的设置才有效

textview限制文字显示多行，多余的用…代替

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：

• display: -webkit-box：必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient： 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
• text-overflow：可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
• -webkit-line-clamp： number用于显示的行数
• -webkit-box-orient 默认是水平的，当值设为vertical时为垂直排列

overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;

swiper (轮播图)

wxml中：

<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000" style='width: 100%'>  <swiper-item wx:for="{{imgUrls}}" wx:for-item="imgItem">    <image src='{{imgItem}}' class="slide-image" width="355" height="150" />  </swiper-item></swiper>

.js中

data: {    text: null,    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ]  }  ...

看下效果：

上面用到了wx:for即列表渲染，在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

• 使用 wx:for-item 可以指定数组当前元素的变量名
• 使用 wx:for-index 可以指定数组当前下标的变量名

如上我们改变默认下表变量名item->imgItem
我们绑定的数组可以在对应的.js中data下设置，即可将视图和数据绑定。
是时候来介绍下swiper的常用属性了，当然还有其他的属性，敬请查阅官方文档
常用属性

• indicator-dots Boolean 是否显示面板指示点
• autoplay Boolean 是否自动切换
• interval Number 自动切换时间间隔
• duration Number 滑动动画时长

form （表单）

wxml：表单里有输入框、滑动选择器、开关和提交表单重置表单按钮

<form bindsubmit='formSubmit' bindreset='formReset'>  <input name='input' placeholder='请输入内容'>{{inputText}}</input>  <slider name='slider' value='{{sliderValue}}'></slider>  <switch name='switch' checked='{{isChecked}}'></switch>  <button form-type='submit'>提交表单</button>  <button form-type='reset'>重置表单</button></form>

form的两个属性：

• bindsubmit 表单提交时会携带 form 中的数据触发其绑定的函数
• bindreset 表单重置时会触发 reset 事件
  提交表单时，需要在表单组件中加上 name 来作为 key
  .js

Page({  /**   * 页面的初始数据   */  data: {    inputText: '',    sliderValue: 0,    isChecked: false,  },  //表单提交  formSubmit: function (event) {    //打印日志    console.log(event)  },  //表单重置  formReset: function (event) {    console.log(event)  }})

输入一些内容，并改变slider和开关的状态，提交表单看打印的日志如下

可以看到input,slider,switch是组件的name属性，被当做key提交
点击reset，可以看到表单中的组件状态被重置

ActionSheet（底部弹出框）

先学习下bindtap属性，就是点击事件，当组件被点击时，会触发绑定的函数。
wxml：
简单介绍下：点击按钮时，action-sheet即底部弹出框显示，其中的action-sheet-item为弹出框的条目，最后一个条目为action-sheet-cancel，顾名思义，此条目用于取消操作，其外观会和其它条目不同，会触发action-sheet的bindchange事件（点击弹出框外面空白地方也会触发bindchange事件），点击每一个条目（包括取消）时，将action-sheet隐藏。

<button bindtap='showActionSheet'>showActionSheet</button><action-sheet hidden="{{actionSheetHidden}}" bindchange="actionSheetChange">  <action-sheet-item bindtap="actionSheetItem" data-name="name1" data-value='我是第1条数据'>item1</action-sheet-item>  <action-sheet-item bindtap="actionSheetItem" data-name="name2" data-value='我是第2条数据'>item2</action-sheet-item>  <action-sheet-item bindtap="actionSheetItem" data-name="name3" data-value='我是第3条数据'>item3</action-sheet-item>  <action-sheet-cancel bindtap="actionSheetItem" data-name="cancel" data-value='我是取消'>取消</action-sheet-cancel></action-sheet>

.js

Page({  /**   * 页面的初始数据   */  data: {    actionSheetHidden: true,  },  //显示action-sheet  showActionSheet: function () {    this.setData({ actionSheetHidden: false })  },  //点击取消  actionSheetChange: function () {    console.log("actionSheetChange")    this.setData({ actionSheetHidden: true })  },  //条目点击事件  actionSheetItem: function (event) {    console.log(event)    this.setData({ actionSheetHidden: true })  }})

先点击按钮，让action-sheet显示

点击item1，会触发actionSheetItem函数，看下actionSheetItem函数中打印的日志：

可以看到条目1中携带的数据name和value传到了actionSheetItem的参数中，真实案例中就可以拿到被点击条目的数据，进行下一步的操作了
回到上一步，再看看点击取消会有什么不同吧

注意看，我们先打印出actionSheetChange日志，可以得出，当点击取消时，先被触发的时action-sheet的bindchange函数，然后才执行的取消条目的bindtap函数，同时可以也可以拿到取消条目所传递的数据，但取消一般是不怎么需要的。

modal：（对话框）

wxml：
点击按钮显示对话框，点击确认按钮或取消按钮隐藏对话框

<button bindtap='modalShow'>modalShow</button><modal title='我是标题' confirm-text='确认' cancle-text='取消' hidden="{{modalHidden}}" bindconfirm="modalConfirm" bindcancel="modalCancel">我是内容</modal>

.js

Page({  /** * 页面的初始数据   */  data: {    modalHidden: true,  },  modalShow: function () {    this.setData({ modalHidden: false })  },  modalConfirm: function () {    this.setData({ modalHidden: true })  },  modalCancel: function () {    this.setData({ modalHidden: true })  }})

看下显示结果吧：

很简单，还是先介绍下属性吧

• title 标题
• confirm-text 确认按钮上的字
• cancle-text 取消按钮上的字
• bindconfirm 点击确认时触发的事件
• bindcancel 点击取消时触发的事件

toast（吐司）

wxml：
点击按钮显示吐司，本例中吐司的持续时间为2秒，2秒后会触发bindchange函数，手动隐藏toast（其中的duration为吐司的持续时间）

<button bindtap='toastShow'>toastShow</button><toast hidden="{{toastHidden}}" bindchange="toastChange" duration="2000">我是吐司</toast>

.js

Page({  /**   * 页面的初始数据   */  data: {    toastHidden: true,  },  //点击按钮  toastShow: function () {    this.setData({ toastHidden: false })  },  //吐司的持续时间到了自动触发  toastChange: function () {    this.setData({ toastHidden: true })  }})

看下效果吧，属性就不再介绍咯

loading（加载框）

wxml：
点击按钮显示加载框，模拟数据请求，两秒后隐藏加载框（不同于toast，没有duration属性）

<button bindtap='loadingShow'>loadingShow</button><loading hidden="{{loadingHidden}}">加载中...</loading>

.js

Page({  /**   * 页面的初始数据   */  data: {    loadingHidden: true,  },  loadingShow: function () {    this.setData({ loadingHidden: false })    var that = this    setTimeout(function () {      that.setData({        loadingHidden: true      })    }, 2000)  }})

其实目前的微信公众平台组件列表已经没有上述的四个组件了，我们可以调用微信的api来使用以上四个操作反馈组件，就不多分析了，直接上代码吧。
wxml：

<button bindtap="showToast">showToast</button><button bindtap="showLoading">showLoading</button><button bindtap='showModal'>showModal</button><button bindtap='showActionSheet'>showActionSheet</button>

.js

Page({  /**   * 页面的初始数据   */  data: {  },  //展示吐司  showToast: function () {    wx.showToast({      title: '我是吐司',      duration: 2000,      icon: "loading"    })  },  //展示等待框，请求数据完成后需要手动调用wx.hideLoading()隐藏  showLoading: function () {    wx.showLoading({      title: '我是loading',    })    setTimeout(function () {      wx.hideLoading()    }, 2000);  },  //展示对话框  showModal: function () {    wx.showModal({      title: '提示',      content: '这是一个对话框',      success: function (res) {        if (res.confirm) {          console.log('用户点击确定')        } else if (res.cancel) {          console.log('用户点击取消')        }      }    })  },  //显示操作菜单  showActionSheet: function () {    wx.showActionSheet({      itemList: ['A', 'B', 'C'],      //用户点击的按钮，从上到下的顺序，从0开始      success: function (res) {        console.log("success" + res.tapIndex)      },      //点击取消会走fail      fail: function (res) {        console.log("fail" + res.errMsg)      }    })  }})

实现gridview效果

实现思路：

• 定义父容器布局方式为flex，主轴方向为由左往右，flex-wrap为wrap，当条目显示不下时，就会换行显示从而实现gridview效果
• 我是案例背景框居于条目底部，采用绝对定位的方式（绝对定位的元素时相对离它最近的一个已定位的父级元素进行定位），那我们需要让它的父布局即条目view 已定位（条目view的position:relative），然后给bottom为0就好了

其它的就没什么了，代码如下：
效果：

wxml：

<view class='case'>  <view class='case-head'>    <view class='case-head-line'></view>    <text class='case-head-point'>·</text>    <text class='case-head-text'>案例</text>    <text class='case-head-point'>·</text>    <view class='case-head-line'></view>  </view>  <view class='case-list'>    <view class='case-item' wx:for="{{caseList}}">      <image class='case-item-image'>      </image>      <view class='case-item-bottom'>        <text class='case-item-text'>我是案例</text>      </view>    </view>  </view></view>

wxss：

/*页面  */.case {  width: 100%;  height: 100vh;  display: flex;  flex-direction: column;}/*案例 头部父布局  */.case-head {  width: 100%;  height: 80rpx;  display: flex;  flex-direction: row;  flex-wrap: nowrap;  align-items: center;  justify-content: space-between;  font-size: 10;}/*案例 头部线  */.case-head-line {  width: 260rpx;  height: 3rpx;  background-color: #3791ca;}/*案例 头部点  */.case-head-point {  font-size: 30pt;  color: #3791ca;}/*案例 头部文字  */.case-head-text {  font-size: 11pt;  color: #3791ca;}/*案例 列表  */.case-list {  width: 100%;  display: flex;  flex-direction: row;  flex-wrap: wrap;  justify-content: space-around;}/*案例 列表条目  */.case-item {  width: 350rpx;  height: 200rpx;  margin-top: 20rpx;  background-color: red;  display: flex;  position: relative;  flex-direction: column;}/*案例 列表条目中图片  */.case-item-image {  width: 350rpx;  height: 200rpx;}/*案例 列表条目底部布局  */.case-item-bottom {  width: 100%;  height: 50rpx;  background-color: #636363;  position: absolute;  bottom: 0;  display: flex;  opacity: 0.9;  flex-direction: row;  justify-content: center;  align-items: center;}/*案例 列表条目中文字  */.case-item-text {  font-size: 9pt;  color: white;}

.js：

Page({  /**   * 页面的初始数据   */  data: {    caseList: ["", "", "", "", "", "", "", "", "", "", "", "", "", ""]  },})

综合项目

需求：
打开小程序显示首页，点击个人中心判断appData中是否有个人信息，若有则展示，若无则跳转到登录页面，登录页面加相关逻辑判断，输入用户名密码成功后（本例不为空即为成功）保存用户信息到appData中，跳转到个人中心界面。

源码点我

贴几张项目的效果图：