微信小程序常用组件

最新推荐文章于 2024-06-06 16:39:40 发布

这个bug不是我写的

最新推荐文章于 2024-06-06 16:39:40 发布

阅读量1w

点赞数 7

分类专栏：微信小程序微信小程序

本文链接：https://blog.csdn.net/SS_S1gn/article/details/78569818

版权

微信小程序同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

微信小程序

4 篇文章 0 订阅

订阅专栏

欢迎体验个人小程序

表情小作坊 轻松定制表情包三连图文字转图片
在这里插入图片描述
吃什么都行 解决广大用户吃饭选择恐惧症的问题

微信小程序的组件也挺多了，还是把官网的组件介绍地址先贴出来吧
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中，跳转到个人中心界面。

源码点我

贴几张项目的效果图：
这里写图片描述

这个bug不是我写的

关注

7
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
微信小程序常用组件

微信小程序的组件也挺多了，还是把官网的组件介绍地址先贴出来吧 https://mp.weixin.qq.com/debug/wxadoc/dev/component/这里介绍一点值得记录的例子，最后写一个稍复杂的界面总结tabBar（导航栏）代码：{ &amp;quot;pages&amp;quot;: [ &amp;quot;pages/index/index&amp;quot;, &am
复制链接

扫一扫