欢迎体验个人小程序
表情小作坊 轻松定制表情包 三连图 文字转图片
吃什么都行 解决广大用户吃饭选择恐惧症的问题
微信小程序的组件也挺多了,还是把官网的组件介绍地址先贴出来吧
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中,跳转到个人中心界面。
贴几张项目的效果图: