微信小程序开发经验总结(五)

微信小程序开发经验总结

微信小程序开发经验总结(一)

微信小程序开发经验总结(二)

微信小程序开发经验总结(三)

微信小程序开发经验总结(四)

微信小程序开发经验总结(五)

微信小程序开发经验总结(六)

微信小程序开发经验总结(七)

13. 常用组件

button

无type属性时 class才能生效 无type属性 or type=”default” 时 hover-class才能生效

hover-class

.wxml
<button hover-class="other-button-hover">拨打电话</button>
.wxss
/** 修改button默认的点击态样式类**/
button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}//opacity不透明
.button-hover {
background-color: red;
}
/** 添加自定义button点击态样式类**/
.other-button-hover {
background-color: blue;
}

image

image组件默认宽度300px、高度225px 一般需要设置宽高

.image {
width: 180rpx;
height: 180rpx;
}

input

实时获取input数据

//能够获取用户输入的组件，需要使用组件的属性bindblur将用户的输入内容同步到 AppService。
//输入框失去焦点时触发，event.detail = {value: value}
<input id="myInput" bindblur="bindBlur" />
var inputContent = {}
Page({
data: {
inputContent: {}
},
bindBlur: function(e) {
inputContent[e.currentTarget.id] = e.detail.value
}
})

​

text

​

<text/> 组件内只支持 <text/> 嵌套

swiper

swiper dots 指示点深度定制 改变形状 大小 位置等

.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot{
width:40rpx;
display: inline-flex;
height: 10rpx;
margin-left: 20rpx;
justify-content:space-between;
}
.swiper-box .wx-swiper-dot::before{
content: '';
flex-grow: 1;
background: rgba(255,255,255,0.8);
border-radius: 8rpx
}
.swiper-box .wx-swiper-dot-active::before{
background:rgba(244,0,0,0.8);
}

​

scroll-view

高度自适应屏幕高度

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//获取系统资料
wx.getSystemInfo({
success: function (res) {
logUtil.log(res);
that.setData({
// 这里的高度单位为px，所有利用比例将300rpx转换为px）
onlyList_height: res.windowHeight - res.windowWidth / 750 * 300,
//
});
}
});
},

​

form 表单

提交事件(用的不多,input textarea用得上,text不能使用,)

<form bindsubmit="formSubmit" bindreset="formReset">
<view class="btn-area">
<button formType="submit">Submit</button>
<button formType="reset">Reset</button>
</view>
</form>

formSubmit: function (e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
},
formReset: function () {
console.log('form发生了reset事件')
},

14. 常用API

phone

wx.makePhoneCall({
phoneNumber: '1340000' //仅为示例，并非真实的电话号码
})

loading

//loding
wx.showLoading({
title: '登录中',
mask: true
})
//hideLoading
wx.hideLoading()

Storage

//
wx.getStorage({
key: "user",
success: function (res){
if (res.data==null)
{
this.login(e);
}else{
wx.showToast({
title: '已登录',
icon: 'success',
duration: 2000
});
wx.navigateTo({
url: '../success/success?a=sdihoshfi'//实际路径要写全
})
}
},
fail: function (res){
},
})
//
wx.clearStorage()
//
wx.setStorage({
key: "user",
data: e,
success: function (res) {
wx.redirectTo({
url: '../../pages/success/success',
})
}
})