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

微信小程序开发经验总结

微信小程序开发经验总结(一)
微信小程序开发经验总结(二)
微信小程序开发经验总结(三)
微信小程序开发经验总结(四)
微信小程序开发经验总结(五)
微信小程序开发经验总结(六)
微信小程序开发经验总结(七)

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

//lodingwx.showLoading({  title: '登录中',  mask: true})//hideLoadingwx.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',        })      }})