微信小程序開發經驗總結(五)

微信小程序開發經驗總結

微信小程序開發經驗總結(一)
微信小程序開發經驗總結(二)
微信小程序開發經驗總結(三)
微信小程序開發經驗總結(四)
微信小程序開發經驗總結(五)
微信小程序開發經驗總結(六)
微信小程序開發經驗總結(七)

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',
        })
      }
})